TYPOGRAPHY / TASK 1: EXERCISES
╎Week 01
╎Gwendalyn Firly Bong / 0374580
╎Bachelor of Design (Honours) in Creative Media
╎Task 1: Exercises
TABLE OF CONTENTS
I. Lectures
II. Instructions
III. Process Work
IV. Feedback
V. Reflection
VI. Further Reading
I. LECTURES
Week 1: Typo_0_Introduction + Typo_1_Development
What is Typography?
- The act of creating letters
- Geometrical shapes to create letters
- The creation of typefaces
- Can come in animated forms
- I.e.: signage design, websites, app designs, books, posters
Typography has evolved over 500 years: calligraphy > lettering >
typography
- Calligraphy is the writing styles
- Lettering is drawing out the letters
Who practices Typography?
- "Typography is now something everybody does"
- Typographers, typesetters, compositors, graphic designers, art directors, manga artists, comic book artists, and graffiti artists.
A Font is an individual font or weight within the typeface, I.e.
Georgia Regular, Georgia Italic, and Georgia Bold
A Typeface is an entire family of fonts or weights that share similar
characteristics or styles, I.e: Georgia, Arial, Times New Roman, Didot, and
Futura
Early Letterform Development: Phoenician to Roman
- Initially, writing meant scratching into wet clay with sharpened sticks or carving into stone with a chisel
- The forms of uppercase letters evolved from this
- Uppercase letters are just a simple combination of straight lines and pieces of circles
- Tools used for writing have a big impact in determining the typefaces
Figure 1.1: 4th century BCE, Phoenicians votive stele Carthage,
Tusinia
- The Greeks changed the direction of reading along with the orientation of letterforms
- They developed a style of writing called "boustrophedon", which meant that the lines of text read alternately from right to left and left to right
Figure 1.2: Boustrophedon style
Figure 1.3: Greek fragment
- Etruscan carvers work in marble-painted letterforms before inscribing them
Figure 1.4: Late 1st-century B.C.E Augustan Inscription
Figure 1.5: Late 1st-century B.C.E Augustan Inscription
Hand Script from 3rd - 10th Century C.E.
- Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.
- Stroke width was achieved by the reed pen held at an angle of approximately 60 degrees off the perpendicular
- Rustic capitals are a compressed version of square capitals. They allowed for twice as many words on a sheet of parchment and took far less time to write. However, they were slightly harder to read due to their compressed nature.
- The pen/brush was held at an angle of approximately 30 degrees of the perpendicular.
Figure 2.2: Rustic Capitals
- Roman cursive was used during everyday transactions for speed. This is the beginning of lowercase letterforms.
Figure 2.3: Roman Cursive
- Unicials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q. Simply, they are small letters
Figure 2.4: Unicials
- Half Unicials mark the formal beginning of lowercase letterforms.
Figure 2.5: Half Unicials
- Caloline Miniscule was invented to standardize the writing system.
Blackletter to Gutenberg's Type
- In northern Europe, a condensed strongly vertical letterform known as "Black letter/Textura" gained popularity
- In the South, a rounder more open hand gained popularity called "Rotunda"
- Gutenberg used all his skills to build pages that mimicked the work of a scribe's hand; Blackletter.
Typography Development/Timeline
- 1450 Blackletter
- earliest printing type
- based upon the hand-copying styles used for books in Northern Europe
- e.g. Cloiste Black
- 1475 Oldstyle
- Based upon the lowercase forms used by Italian humanist scholars for book copying along with the uppercase letterforms found inscribed on Roman ruins
- e.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
- 1500 Italic
- Echoes of contemporary Italian handwriting
- Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms
- 1550 Script
- Originally an attempt to replicate engraved calligraphic forms
- Not entirely appropriate in lengthy text settings
- Ranges from the formal and traditional to the casual and contemporary
- e.g. Kuestler Script, Mistral, Snell Roundhand
- 1750 Transitional
- A refinement of old-style fonts
- Achieved in part because of advancements in casting and printing
- Thick-to-thin relationships were exaggerated, and brackets were lightened
- e.g. Baskerville, Bulmer, Century, Time Roman
- 1775 Modern
- Represents a further rationalization of old-style letterforms
- Serifs were unbracketed, and the contrast between thick and thin strokes extreme
- e.g. Bell, Bodoni, Caledonia, Didot, Walbaum
- 1825 Square Serif/Slab Serif
- Originally heavy bracketed serif, with little variation between thick and thin strokes
- Responded to the newly developed needs of advertising for heavy type in commercial printing
- As they evolved, the brackets were dropped
- e.g. Clarendon, Memphis, Rockwell, Serifa
- 1900 Sans Serif
- These typefaces eliminated serifs altogether
- First introduced by William Caslon IV in 1816, but became more widespread at the beginning of the twentieth century
- Variations tended toward either humanist forms or rigidly geometric
- Occasionally, strokes were flared to suggest the calligraphic origins of the form
- Referred to as grotesque and gothic
- e.g. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers
- 1990 Serif/Sans Serif
- A recent development
- Enlarges the notion of a family of typefaces to include both serif and sans serif alphabets
- e.g. Rotis, Scala, Stone
Week 2: Typo_3_Text_P1
Text/Tracking: Kerning and Letterspacing
- Kerning is the automatic adjustment of space between letters
- Kerning is NOT letterspacing
- Tracking is the addition and removal of space in a word or sentence
- Designers always letter space uppercase letters but are against letterspacing lowercase letters within the text
Figure 3.1: Kerning
Figure 3.2: Tracking
Text Formatting
- Flush Left: This format mirrors the asymmetrical experience of handwriting
- Each line starts at the same point and ends whenever the last word on the line ends
- Spaces between words are consistent throughout the text
Figure 4.1: Flush Left
- Centered: This format imposes symmetry upon the text, assigning equal value and weight to bot ends of any line
- It transforms fields of text into shapes, adding a pictorial quality
Figure 4.2: Centered
- Flush Right: This format emphasizes the end of the line instead of the start
- May be useful in situations where the relationship between text and image might be ambiguous
Figure 4.3: Flushed Right
- Justified: This format has a symmetrical shape on the text
- Achieved by expanding or reducing spaces between words or letters
- Results in the openness of lines that produce "rivers"
Figure 4.4: Justified
Text/Texture
- Type with a generous X-height or a heavy stroke width produces a darker mass on the page as compared to a smaller X-height or a lighter stroke
Text/Leading and Line Length
- Type size: Should be large enough to be read easily at arm's length
- Leading: Text set too tight encourages vertical eye movement, which causes readers to lose their place
- Type set too loosely creates striped patterns that distract the reader
- Line Length: A good rule of thumb is to keep line length between 55-65 characters
- Extremely long or short line lengths impair reading
Text/Type Specimen Book
- A type specimen book shows samples of different typefaces in various different sizes
- It is used to provide an accurate reference for type, type size, type leading, type line length, etc
Week 3: Typo_4_Text_P2
Text/Indicating Paragraphs
- Pilcrow (¶): Indicates paragraphs, a holdover from the medieval manuscripts seldom used today
- Leading/Line Space: Ensures cross-alignment across columns of text
Figure 7.1: Leading
Figure 7.2: Line Space vs Leading
- Standard Indentation: The indent is the same size as the line spacing or the same as the point size of the text
Figure 7.3: Standard Indentation
- Extended Paragraphs: Creates usually wide columns of text
- There can be strong compositional or functional reasons for choosing it
Figure 7.4: Extended Paragraphs
Text/Widows and Orphans
- Widow: A short line of type left alone at the end of a column of text
- The solution is to rebreak the line endings throughout the paragraph
- Orphan: A short line of type left alone at the start of a new column
- The solution is to make sure no column starts with the last line of a preceding paragraph
Figure 8: Widows and Orphans
Text/Highlighting Text
- Italics, bold, color, different typefaces
- Only CMYK for body text
- Typically reduce the font size of the highlighted text by .5 to match the x-height of the serif typeface
- All capital acronyms are also reduced by .5 to ensure visual cohesion
- Quotation marks help to create a clear indent
Figure 9.1: Different Ways to Highlight Text
Figure 9.2: Font Size Decrease
Text/Headline within Text
- A Head: Indicates a clear break between the topics within a section
- B Head: Subordinates to A heads
- Indicates a new supporting argument or example
- Usually shown in small caps, italic, bold serif, and bold san serif
- C Head: Highlights specific facets of material within B heads
- Usually shown in small caps, italics, serif bold, and sans serif bold
Figure 10: A, B, and C Head
Text/Cross Alignment
- Reinforces the architectural sense of the page
Week 4: Typo_5_Understanding
Letters/Understanding Letterforms
- Baskerville
- NOT symmetrical as:
- 2 different stroke weights
- Each bracket connecting the serif to the stem has a unique arc
- Univers
- NOT symmetrical as:
- The width of the left slope is thinner than the right stroke
- Helvetica VS Univers
- 2 similar sans-serif typefaces
- the lowercase "a" is slightly different
- The stems of the letterforms finish differently
- The speed at which the bowls meet the stems
- X-height: Describes the size of the lowercase letterforms
- The curved strokes must rise above the median or sink below the baseline to appear the same size
Figure 12: Median and Baseline
Letters/Form/Counterform
- When letters are joined to form words, the counter form includes the spaces between them
Letters/Contrast
- Simple contrasts produce numerous variations
Figure 13: Contrast
Week 5: Typo_6_Screen&Print
Typography/Different Medium
- In the past, typography was viewed as living only when it reached paper
- Today, typography not only exists on paper but on a multitude of screens
- e.g. operating systems, system fonts the device, and the screen itself
- Print Type VS Screen Type
- Type for print
- Intended for reading from print long before we read from the screen
- It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read
- Typefaces used for print: Caslon, Garamond, and Baskerville
- Because they are elegant, intellectual, and also highly readable when set at a small font size
- Versatile, easy to digest, classic typeface
Figure 14: Print Type
- Type for Screen
- Optimized and often modified to enhance readability and performance onscreen in a variety of digital environments
- May include: A taller X-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, and modified curves and angles
- All these factors serve to improve character recognition and overall readability
- Hyperactive Link/Hyperlink
- A word/phrase/image that can be clicked on to jump to a new document or new section within the current document
- Found on nearly all web pages
- Allows users to click their way from one page to another
- Normally blue and underlined
- The cursor changes to a small hand when hovered over the link
- Font Size for Screen
- 16-pixel text on a screen is similar to the size of text printed in a book/magazine
- System Fonts for Screen
- Appears across all operating systems
- e.g. Open Sans, Helvetica, Lato, Arial, Georgia, Garamond, Courier New, Palatino
Figure 15: Font Size for Print VS Screen
- Pixel Differential Between Devices
- The screens used by our PCs, tablets, phones, and TVs are different sizes, and the text on-screen differs in proportion too
Static VS Motion
- Static Typography
- Has minimal characteristics in expressing words
- Motion Typography
- Fluid and kinetic letterforms
- Dramatic
- Often used in music videos and advertisements
II. INSTRUCTIONS
III. PROCESS WORK
Task 1 - Exercise 1
Research
The 4 words given to us were burn, melt, fade, and grow. To start, I
went on Pinterest and searched for ideas that would help me.
Figure 17: Ideas from Pinterest
Figure 18.1: Original Sketches for Grow
Figure 18.2: Original Sketches for Fade
Figure 18.3: Original Sketches for Burn
Figure 18.4: Original Sketches for Melt
Figure 18.5: Final Sketches
Figure 18.6: Final Choices + Explanations
Digitization
This is my first draft of the digitization. I used the fonts Gill Sans
Std and ITC Garamond for the words. After consulting with Mr Max, he
suggested several small adjustments.
- Grow: He suggested that changing the orientation of the word might help exaggerate the growing effect even more
- Burn: The ash effect was too dense
- Melt: The melting effect seemed a little unrealistic and suggested making it look more dynamic
I had the most trouble fixing the melt element. After some trial and
error, I found out that the puddle would look more realistic if I had
drawn it in a specific way:
After making the changes suggested, here is the final digitization:
Figure 19.3: Final Digitization
Figure 19.4: Final Digitization PDF
The next assignment involves animating one of the words I have digitized
earlier. Mr Max suggested I animate the word "Melt" as it would have the
most drastic and dramatic effect.
First, I figured out how I wanted the orientation of the melt to be by
sketching it out on Procreate.
Figure 20.1: Animation Test using Procreate
After that, I transferred the sketch onto Adobe Illustrator. I slowly
cropped out and rotated each of the letters at a specific angle.
Figure 20.2: Gif Test
Figure 20.3: Gif Test 2
I was still unsatisfied with the way the word melted so I did a couple more
trial runs, and I was finally satisfied with this.
Figure 20.4: Final Gif Test
I then transferred each layer to Adobe Photoshop and here is the final
result.
Task 1 - Exercise 2
Figure 21.1: My Name in Different Fonts
Figure 21.3: Option 2
Figure 21.4: Option 3
Figure 21.5: Option 4
Figure 21.6: Option 5
Figure 25: Final Layout with Grids
IV. FEEDBACK
Week 1
General Feedback: Introduction to typography and finished setting up
my blogger
Week 2
General Feedback: Learned the basics and shortcuts for Adobe
Illustrator and finalized the sketches for each word
Week 3
General Feedback: Transferred all the sketches into Illustrator and
finished digitizing
Specific Feedback:
- Grow: He suggested that changing the orientation of the word might help exaggerate the growing effect even more
- Burn: The ash effect was too dense
- Melt: The melting effect seemed a little unrealistic and suggested making it look more dynamic
Week 4
General Feedback: Started animating the word "melt" on Adobe
Illustrator
Week 5
General Feedback: We were introduced to the software Indesign and were
tasked to our name using different typefaces, along with 6
compositions.
V. REFLECTION
Experience
I was first exposed to the process of using Adobe Illustrator in this
module. As it was my first time using this software, I struggled quite a
bit. However, the recorded lectures helped a lot as they gave me the freedom
to playback the videos and try them at my own speed.
Observations
Thanks to Mr Max's feedback on my work, I was able to greatly improve on it.
Findings
Through this class, I found out that Adobe Illustrator wasn't as difficult as
I thought it would be. For years, I have dreaded the thought of having to use
this software in a professional space. After being introduced to it in this
module, I started having fun exploring all the different ways I can design
with the software.
VI. FURTHER READING
VI. FURTHER READING
In summary, this book is a guide to the basic principles and practices of
design. He discusses topics like typefaces, texture, color, layout, margins,
etc. Vignelli states that there are three aspects of Design that are
important: Semantic, Syntactic, and Pragmatic.
Semantics: Semantics means to understand all aspects of the subject of
design. It highlights the importance of understanding the meaning behind a
design project; to design something that has meaning. This involves
researching the subject's history and context to better understand the nature
of the project. Vignelli dislikes it when designers create crude and vulgar
designs as it may disregard the consumers and creates visual pollution
Comments
Post a Comment