Typography - Task 1: Exercises
23/9/2024 - 27/10/2024 (Week 1 - Week 5)
Chang Wing / 0367807
Typography / Bachelors of Design (Honours) in Creative Media / Taylor's University
Task 1: Exercises
TABLE OF CONTENTS
1. Lectures
.png)
.png)
.png)
.png)
Higher readability if x-height is larger than ascender and descender.
.png)
A type specimen book shows samples of typefaces in various different sizes. It provides an accurate reference for type, type size, type leading, type line length etc. if the final product is to be printed out.
.png)
.png)
1. Pilcrow (¶): Indicates paragraph breaks, a holdover from medieval manuscripts seldom use today.
.png)
Figure 1.17 Indicating Paragraphs
.png)
.png)
.png)
.png)
Figure 1.21 Sans-serif fonts are larger than serif fonts
.png)
1. 'A' head: Indicates a clear break between the topics within a section.
.png)
.png)
.png)
.png)
Cross aligning headlines and captions with text type reinforces the architectural sense of the page.
.png)
1. Baseline: The imaginary line, the visual base of the letterforms.
.png)
.png)
Figure 1.30 Lowercase Numerals
.png)
Figure 1.35 The 10 Typefaces used for the Typography Module
1. Lectures
4. Feedback
5. Reflection
6. Further Reading
Introduced development of typography over a period of time 500 years.
5. Reflection
6. Further Reading
LECTURES
Week 1
Typo_0_Introduction
Highlighted typography's importance in design, the history and definition of it and the skills students will develop throughout this module.Figure 1.1 Typography in website design
Figure 1.2 Calligraphy
Terminology
Font: The individual font or weight within a Typeface.
Typeface: Refers to the various families that do not share characteristics.
Figure 1.3 Example of fonts
Figure 1.4 Example of Typefaces
Typo_1_Development
Early Letterform Development: Phoenician to Roman
In ancient times, writing means scratching into wet clay with sharpened sticks/carving into stones with chisel. Type of writing tools heavily affects the letterforms.
Figure 1.5 Early Letterform Development
Phoenicians wrote right to left. Then, the Greek developed "Boustrophedon" (The style of writing where its text can be read alternatively from right to left and left to right).
Figure 1.6 Boustrophedon
Hand Script From 3rd - 10th Century C.E.
1. Square capitals: Has serifs, variety of stroke width achieved by reed pen held at about 60 degree off perpendicular.
2. Rustic capitals: Form is narrower to be fit more in one page. However, with decreased readability.
3. Cursive hand: Forms were simplified for speed. Beginning of lowercase of letterforms can be seen.
4. Uncials: Has broader forms, more readable at small sizes than rustic capitals.
5. Half-uncials: The beginning of lowercase letterforms, replete with ascenders and descenders.
6. Standardization of texts: Charlemagne, the first unifier of Europe issued an edict to standardize all ecclesiastical texts. As result, the texts were rewrote using majuscules, miniscule, capitalization and punctuation which sets the standard for calligraphy for a century.
Figure 1.7 Font development
Blackletter to Gutenberg's type
A condense strongly vertical letterform known as Blackletter gained popularity.
Figure 1.8 1300: Blackletter (Textura)
Text Type Classification
1. 1450 Blackletter: The earliest printing type, forms based upon hand-copying styles used in books
in northern Europe at the time. (Cloister Black, Goudy Text)
2. 1475 Oldstyle: Based upon lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on roman ruins. (Bembo, Casion, Dante)
3. 1500 Italic: Condensed and close-set, allows more words per page, cast to complement roman forms.
4. 1550 Script: Attempt to replicate engraved calligraphic forms, not appropriate in lengthy texts. (Kuenstler Script, Mistral)
5. 1750 Transitional: A refinement of oldstyle forms, exaggerates thick to thin relationships and brackets were lightened. (Baskerville, Bulmer, Century)
6. 1775 Modern: Rationalization of oldstyle; Serifs are unbracketed, contrast between thick and thin are extreme.
(Bell, Bodoni)
7.1825 Square Serif / Slab Serif: Little variation between thick and thin strokes; Responded to advertising for heavy type in commercial printing. (Clarendon, Memphis)
8. 1900 Sans Serif: Eliminated serifs, flared strokes to suggest its calligraphic origins. (Optima)
9. 1990 Serif / Sans Serif: Includes both serif and sans serif alphabets. (Rotis, Scala, Stone)
Figure 1.9 Text Types
Week 2
Typo_3_Text_P1
Terminology
Kerning: The adjustment of spacing of two particular characters to correct visually uneven spacing
Letter-spacing: The overall spacing of a word or block of text affecting its overall density and texture
Tracking: The action of doing both kerning and letter-spacing
Leading: The space between adjacent lines of typeGray value: The text color perceived with half-closed eyes
*Kerning/Tracking change to 5 in default
*Proper letterspacing makes full cap words look more presentable, ideal well formatted text has a middle gray value.
.png)
Figure 1.10 Kerning
.png)
Figure 1.11 Normal tracking, loose tracking, tight tracking
Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counter form created between letters to maintain the line of reading, so it's not encouraged to letter-space lowercase fonts.
.png)
Figure 1.12 Counter form (Black part)
Formatting Text
1. Flush left: Most closely mirrors the asymmetrical experience of handwriting. Each line startsat the same point but ends wherever the last word on the line ends. This should be used the most.
2. Centered: Looks symmetrical, looks jagged on both end of line, sometime difficult to read because it has an irregular starting point. Should be use sparingly for small amount of text.
3. Flush right: Places emphasis on the end of a line. Useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right. Only use for small amount of text because it decreases readability.
4. Justified: Looks symmetrical. The resulting openness of lines produce 'rivers' of white space through text and decreases readability. Avoid using this as much as possible.
.png)
Figure 1.13 Text Formatting
*Never use full caps for script typefaces because it looks horrendous.
*Sans-serif typefaces at smaller point sizes has greater legibility for screen reading purpose compared
to serif fonts.
Texture
.png)
Figure 1.14 Anatomy of a typeface
Leading and Line Length
1. Type size: First to be decided. Large enough to be read easily
2. Leading: To be decided after type size. If text too tight it encourages vertical eye movement, reader easily loose their place; If too loose it creates striped patterns that distract readers.
3. Line length: Lastly decided. Shorter lines require less leading, longer lines more. Keep line between 55-65 characters. Extremely long/short line lengths impairs reading.
Type Specimen Book
.png)
Figure 1.15 Type Specimen Book
It is also often useful to enlarge type to 400% on screen to sense clearer of the relationship between descenders on one line and ascenders on the line below.
.png)
Figure 1.16 Texts enlarged to 400% on screen
Week 3
Typo_4_Text_P2
Indicating Paragraphs
2. Paragraph Space: If the text point is 10pt, line space should be 12pt (2 or 3pt larger), then the paragraph space should be 12pt to maintain cross-alignment across column of text.
3. Indentation: Indent and point size should be the same. Avoid using indentation if text is flush left/right, best use on justified texts.
4. Extended paragraphs: Creates unusually wide columns of text. Not widely used.
.png)
Figure 1.17 Indicating Paragraphs.png)
Figure 1.18 Leading and Line Spacing
Widows and Orphans
Widow: A short line of type left alone at the end of a column of text
Orphan: A short line of type left alone at the start of new column
*Designers must avoid widows and orphans because it looks untidy!
*When letterspacing/kerning to solve orphans/widows, don't do it more than 3 times!.png)
Figure 1.19 Windows and Orphans
Highlighting Text
1. Italics
2. Bold
3. Bold with different typeface: Wherever change typeface from serif to sans-serif, reduce point size by 5pt (because sans-serif fonts are larger in general)
4. Different text color: Only use colors like cyan, magenta or black
5. Place field of color at the back of text: Ensures left side of box aligns with text or text within the box aligns with text above it to maintain strong reading axis
6. Bullet Point: Necessary to place typographic elements outside the left margin of texts to maintain left reading axis
7. Quotation Mark ('/"): Maintain left reading axis
.png)
Figure 1.20 Highlighting Text
.png)
Prime and Quote
Prime: Abbreviation for inches and feet.
Quote: Used to mark the beginning and end of a title or quoted passage.
*Do not misuse prime as quote!
.png)
Figure 1.22 Primes and Quotes
Headline Within Text
1. 'A' head: Indicates a clear break between the topics within a section.
2. 'B' head: Subordinate to 'A' heads. They indicate new supporting arguments or examples of
the topic. They do not interrupt the text as strongly as A heads do.
3. 'C' head: Not common, highlights specific facets of material within 'B' head text. They do not interrupt the flow of read. Must place 2 spacing between the 'C' head and the beginning of the sentence.
Putting the 3 subheads together creates hierarchy.
Putting the 3 subheads together creates hierarchy.
.png)
Figure 1.23 'A' Heads
.png)
Figure 1.24 'B' Heads
.png)
Figure 1.25 'C' Heads
.png)
Figure 1.26 Hierarchy
Cross Alignment
Cross aligning headlines and captions with text type reinforces the architectural sense of the page.
Can maintain cross alignment by doubling the leading. For example, if text point is 13pt then the headline leading should be 26pt (13pt times two).
.png)
Figure 1.27 Cross Alignment
Week 4
Typo_2_Basic
Describing Letterforms
2. Median: The imaginary line defining the x-height of letterforms.
3. X-height: The height in any typeface if the lowercase 'X'.
4. Stroke: Any line that defines the basic letterform.
5. Apex/Vertex: The point created by joining two diagonal stems (Apex: Above, Vertex: Below)
6. Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K,Y).
7. Ascender: The portion of the stem of a lowercase letterform that projects above the median.
8. Barb: The half-serif finish on some curved stroke.
9. Beak: The half-serif finish on some horizontal arms.
10. Bowl: The rounded form that describes a counter. The bowl may be open or closed.
11. Bracket: The transition between the serif and the stem.
12. Cross Bar: The horizontal stroke in a letterform that joins two stems together.
13. Cross Stroke: The horizontal stroke in a letterform.
14. Crotch: The interior space where two strokes meet.
15. Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
16. Ear: The stroke extending out from the main stem or body of the letterform.
17. Em/en: Em is the size of capital 'M' and en is half the size of em.
18. Finial: The rounded non-serif terminal to a stroke.
19. Leg: Short strokes off the stem of the letterform, either at bottom of the stroke (L) or inclined downward (K,R).
20. Ligature: The character formed by the combination of two or more letterforms.
21. Link: The stroke that connects the bowl and the loop of a lowercase 'G'.
22. Shoulder: The curved stroke that is not part of a bowl.
23. Spine: The curved stem of the S.
24. Spur: The extension that articulates the junction of the curved and rectilinear stroke (b, q, G)
25. Stem: The significant vertical or oblique stroke.
26. Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
27. Swash: The flourish that extends the stroke of the letterform.
28. Tail: The curved diagonal stroke at the finish of certain letterforms.
29. Terminal: Any stroke that does not terminate in a serif.
Figure 1.28 Ligature (Right Image)
The Font
Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Do not stress Capital letters to small caps because then they will have different stroke thickness, use designed Small Caps instead.
Fake Small Capitals: Small caps that are artificially generated by software's style command.
Figure 1.29 Fake Vs. True Small Caps
Uppercase Numerals: Numbers with same height as uppercase letters.
Lowercase Numerals: Numbers that set to x-height with ascenders and descenders. Less used in sans-serif typefaces.
.png){kind=small}
Figure 1.29 Uppercase Numerals
.png){kind=small}
Punctuation, miscellaneous characters: If dealing with mathematical contents, make sure it has a well designed mathematical sign.
Figure 1.31 Punctuation, Miscellaneous Characters
Ornaments: Used as flourishes in invitations or certificates. (Adobe Casion Pro)
Figure 1.32 Ornaments
Describing Typefaces
1. Roman: So called because it's derived from Inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.
2. Italic: So called because it's forms are based on 15th century Italian handwriting. Oblique are based on roman form of typeface.
3. Boldface: Characterized by thicker stroke than a roman form.
4. Light: Lighter stroke than roman form. Even lighter strokes are called 'Thin'.
5. Condense: A narrower roman form. Even condenser strokes are called 'Compressed'.
6. Extended: A wider roman form.
.png)
Figure 1.34 Typefaces
The 10 Typefaces
INSTRUCTIONS
Task 1: Exercises 1
Type Expression
We are required to produce designs of fonts expressing meaning/action of the chosen 4 words, namely "Pull", "Explode", "Chop", "Rush", "Wind" or "Tangle", referring to the given 10 typefaces. Then, We are required to produce one GIF animation for one of the 4 chosen final type expression using Adobe Photoshop's animate frame feature.
Software: Adobe Illustrator and Adobe Photoshop
Text Formatting
Software: Adobe InDesign
PROCESS WORK
Task 1: Exercise 1 - Type Expression
Inspiration
Sketches
Chop: Fonts sliced to half or fonts break to parts show it's chopped
Explode: Letter "O" as focal point because it gives impression of a bomb's shape. Tried to mimic the explosive sign, exploding confetti etc.. Also tried designing letter "O" as a ticking bomb.
Pull: Extended letter "U" shows its getting pulled down
Tangle: The ends of fonts are connected to each other, overlapped and bent to mimic entangled threads.
Figure 2.2 Sketches drawn with Procreate (26/09/24)
Figure 2.3 "Explode" inspired by timer bomb (26/09/24)
Digitisation of sketches
Figure 2.4 Process in Adobe Illustrator (6/10/24)
Figure 2.5 Alternative designs for "Tangle" and “Explode" (06/10/24)
Figure 2.6 Alternative designs for "Pull" (06/10/24)
When creating the word "Tangle", I prevent from using pen tool to draw the curve of "e" and instead overlapped the rotated letter "G" and "L” to create letter "e" so it looks geometrical and proportionate to other letters. I used shape builder tool to remove the extra parts.
.png)
Figure 2.7 Shape Builder Tool (06/10/24)
Final Type Expression
Figure 2.8 Final Type Expression (07/10/24)
Figure 2.9 Final Type Expression (PDF) (07/10/24)
Producing Animation Frames
.png)
Figure 2.10 Process in Adobe Illustrator (14/10/24)
I liked the idea of timer bomb so I continued to animate "explode" with this idea, I tried to adjust the speed of the flying fragments several times until I get the right speed for it to look like it exploded.
I made the letter 'O' vibrate as the timer counted down to convey the buildup of energy and add a sense of tension before the explosion. I intentionally kept the timer still while the 'O' vibrated to emphasize that it was the letter itself experiencing the explosion, rather than depicting the entire scene as a bomb countdown because I wanted viewers to focus on the font itself.
%20GIF.gif)
Figure 2.11 First Version (14/10/24)
Final GIF Animation
In the final version, I added motion blur to the frame where it explodes so it mimics the resonance effect of explosion. I also added a blinking effect to the timer when it reached zero, simulating the flashing of an alarm and to add more cinematic feel to it.
%20GIF.gif)
Figure 2.12 Final Version (14/10/24)
Kerning Exercise
Figure 2.13 Kerning exercise with my name (19/10/24)
Inspiration
Figure 2.14 Page Layout Reference from Pinterest (19/10/24)
I chose Universe Lt Std as text font because it's form looks similar to the Helvetica font mentioned in the body text, to match my design to the context.
Figure 2.15 Univers LT Std Vs. Helvetica (20/10/24)
Exploration
I did different versions of layouts to find the most interesting composition that also comprises good readability and legibility.
Figure 2.16 Exploration on different compositions
Final Text Formatting
Aguayo (n.d.) states "Large blocks of text can be overwhelming, causing cognitive overload". So I broke down the body texts into sections to allow the reader to process smaller chunks, making it easier to follow and understand.
Figure 2.17 Final Text Formatting (Without Grids) (24/10/24)
.jpeg)
Figure 2.18 Final Text Formatting (With Grids) (24/10/24)
Figure 2.19 Final Text Formatting (PDF: With & Without Grids) (24/10/24)
Final Text Formatting Layout
Head
Font : Universe LT Std (65 Bold/55 Oblique)
Type size : 98 pt and 11 pt
Leading : 88 pt (Smaller than type size because I think it looks better) and 22 pt
Paragraph Spacing : 0 pt
Type size : 98 pt and 11 pt
Leading : 88 pt (Smaller than type size because I think it looks better) and 22 pt
Paragraph Spacing : 0 pt
Body
Font : Universe LT Std (55 Roman)
Type size : 9 pt
Leading : 11 pt
Paragraph Spacing : 11 pt
Characters per line : 60
Alignment : Flushed left
Margines : Top/Bottom/Left/Right (12.7 mm)
Columns : 4
Gutter : 5 mm
Type size : 9 pt
Leading : 11 pt
Paragraph Spacing : 11 pt
Characters per line : 60
Alignment : Flushed left
Margines : Top/Bottom/Left/Right (12.7 mm)
Columns : 4
Gutter : 5 mm
FEEDBACK
Task 1: Exercise 1 - Type Expression
Week 2 (30/09/2024)
General Feedback: Sketch within boxes, more explorations, sketch referring to specific typefaces, minor distortion that does't affect the overall form of typefaces are allowed, effects like blur are allowed (minor), no graphical symbols, duplication of
words are allowed; E-portfollio: Combine the diagrams to one.
Specific Feedback: Seems fine, more explorations required.
words are allowed; E-portfollio: Combine the diagrams to one.
Specific Feedback: Seems fine, more explorations required.
Week 3 (07/10/2024)
General Feedback: Decrease illustrations and focus expressing with the fonts instead.
Specific Feedback: The words "Pull" and "Tangle" is fine,"Chop" looks pixelated instead of chopped, "Explosion" needs to be more impactful.
General Feedback: Follow the instruction and refer to the 10 typefaces when doing t1 exercise 1; Leading has to be 2.5-3.5pt larger than the text point size for t1 exercise 2, press shift + enter to force line-break, never use full justified. Headline can be any size we want.
Specific Feedback: Speed of explosion needs to be increased.
Task 1: Exercise 2 - Text Formatting
General Feedback: Have a little bit of space between by line and the headline, headline shouldn't have different font unless it has a purpose, aware of the leading size, does't require a large headline because it just a document writing (unless it's put in the background). If text is left justified, have atleast a 7mm gutter (Normal minimum 5mm). CANNOT have large amount of font in bold, gutter shouldn't be too big because it wastes space. Don't use image that has text in it. No different size of text columns.
Specific Feedback: Mr. Vinod likes the headline. Should improve cross alignment and reading axis.
REFLECTION
Experience
I like how Mr. Vinod always give clear instructions regarding the tasks, and I like his weekly reminders in Microsoft Teams that highlight important notes and tasks we have to complete before the next week. As result, I seldom have question regarding Typography's task requirements, which significantly reduced my stress compared to other modules. Through Task 1, I managed to get more familiar with the features in Adobe Illustrator and Adobe InDesign.Observation
My observation from this task is that effective typography plays a crucial role across various fields, including UI/UX design, newspaper production, advertising, and beyond. Well-crafted typography not only captures the viewer's attention but also conveys the essence of a brand's identity and reputation.
Findings
I have come to realize that for designers to create visually appealing and well-organized layouts, several typography elements must be taken into consideration, including typefaces, text size, leading, paragraph spacing, and text alignment. Different typefaces evoke distinct moods and emotions, while proper text settings ensure the readability and legibility of the design's message. Additionally, I have discovered that grid lines are useful for achieving precise alignment and cohesion in text placement, maintaining a strong reading axis across our design.
Figure 3.1 Typography Referenced by Halley et. al, 2012. [Front Cover]
Typographic Principles (pg207-pg233)
This book offers a rich array of typographic examples for my reference. In this particular chapter, it explores essential typographic principles that contribute to effective design, focusing on aspects such as typeface selection, foundational design principles, the strategic use of white space, and the importance of grid lines and more. It helps me understand how these principles interact to create visually appealing and readable text.
Figure 3.2 Text Type
Figure 3.3 Display Type
Figure 3.4 Focal Point
Figure 3.5 Typographic Design: Form and Communication by Carter et. al, 1985. [Front Cover]
Legibility (pg49-pg62)
This chapter talks about how typeface choice, spacing, alignment, and the overall organization of letters contribute to legibility and readability. It also discusses the importance of clarity in letterforms and how factors like x-height, stroke width, and contrast impact a reader's ability to distinguish and comprehend text quickly.
I like the comparison diagrams they provide, it gives me clear vision of what they intended to convey. Through the examples, they highlighted the importance of maintaining sufficient contrast between the letters in a font so that they can be easily distinguished.
Figure 3.6 Distinction between letter "a" and "d"
Figure 3.7 Lowercases are more recognizable than uppercases
Additionally, this chapter also explores how contrast between typefaces and their background significantly impacts readability. Higher contrast between text colour and background makes reading easier for viewers. Achieving this contrast can be done through complementary colour pairings or by increasing the difference in value (lightness and darkness) between the text and background.
Figure 3.8 Legibility and Colour
This chapter also discusses the challenges associated with stretched fonts, which can distort their character and negatively impact readability. It also examines how varying letter spacing affects the perceived brightness of text, where tighter spacing may create a denser appearance, while wider spacing enhances brightness. Understanding these principles has reminded me to consider these critical aspects when approaching typographic projects, ensuring that my designs maintain clarity and visual appeal.
-03.png)
Comments
Post a Comment