Typography - Task 1: Exercises
22/9/2025 - 20/10/2025 (Week 1 - Week 5)
Cher Pei Ying (0389055)
Typography
Task 1: Exercises
TABLE OF CONTENTS
1. Lectures
1.5 Typo 2 Basic
1. LECTURES
- Indentation: indent is the same size of the line spacing/ same as the point size of the text (10pt type size = 10pt indentation) never use ragging on the right when indentation is used, indentation is best used when text is justified
Stroke: Any line that defines the basic letterform
Link: Stroke that connects the bowl and the loop of a lowercase G
2. INSTRUCTIONS
My first design was inspired by the shape of a campfire, the base of letters acts as firewood and the top of the letters burn like flames. This design is too distorted. My second design is expressing expansion in the process of burning, but the typeface wasn't included in the list given. Therefore changes had to be made for both designs in Adobe Illustrator.
With using the font Futura Std Extra Bold Condensed, I tried to express the movement of flames with applying the twist effect. I then changed the perspective of the word to show the shape of a campfire, and stacked two of the repeated words in gradients to express fire burning to the top. I chose the third design as my final piece as it looks the most like flames burning.
For these two designs, I used Futura Std Extra Bold Condensed with rise effect, and tweaked the letter "D" shaped like a drop of blood dripping down.
Futura Std Bold Condensed was used for these designs. I used the pucker tool to create blood dripping down from the letters, causing slight distortion of text, but fully expressing the words meaning. For the first design, I added droplets in the cavities of letter "b" and "d". I chose the first design as my final type expression.
3. FEEDBACK
4. REFLECTIONS
5. FURTHER READINGS
2. Instructions
3. Feedback
4. Reflections
1. LECTURES
1.1 Typo 0 Introduction
Typography
- The act of creating letters
- Creation of typefaces or type families
- Can be in animated forms
- Used in websites, app designs, signage designs, product labels, books, logos
- Calligraphy (write) > Lettering (draw) > Typography
Font
- The individual font or weight within the typeface
Typeface
- The entire family of fonts or weights that share similar characteristics and styles
1.2 Typo 1 Development
Writing
- Scratching into wet clay with sharpened stick / carving into stone with chisel
The Greeks developed "boustrophedon" = text read from right to left and left to right + changed orientation of letterforms
- Strokes are developed based on the tools used = letterforms
Figure 1.2.1 Development/timeline of hand scripts
Figure 1.2.2 Text type classifications
1.3 Typo 3 Text (Part 1)
Kerning
- The automatic adjustment of space between letters
Figure 1.3.1 Text with and without kerning
How to kern texts in InDesign?
- Change text size: Ctrl + Shift + </>
- Kerning: Alt + (←)
- Change amount of kerning: Edit > Preferences > Units and Increments > Change Kerning/Traking em
Letterspacing
- To add space between letters
Tracking
- The addition and removal of space in a word/sentence
- Increase in letterspace = Reduce in readability of text (loose tracking)
Figure 1.3.2 Types of tracking
Counterforms
- Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading
- Adding letterspacing may break the natural counterform of a word = hard to read
~ Lowercase letters are not encouraged to add letterspacing
Figure 1.3.3 Difference in counterforms
Text formatting
- Clear and appropriate presentation of author's message should be the priority when setting a text format
Figure 1.3.4 Types of text formatting
X-height
- space above x-height = ascender
- space below x-height = descender
- If ascender and descender is smaller in comparison the x-height = increase in x-height
Figure 1.3.5 Anatomy of Typeface
Type size, leading and line length determines the readability of a paragraph
- Text type should be readable at arms length
- Tight text will cause vertical eye movement, this should be avoided
- Keep line length between 55-65 characters
~ Example: When type size is 10 pt, the ideal leading should be 12 pt to 13 pt (2 to 3 pt larger than the type size)
Text/type specimen book
- Shows samples of typefaces in various different sizes
- Provide accurate reference for type, type size, type leaning, type line length etc
Figure 1.3.6 Sample type specimen sheet
1.4 Typo 3 Text (Part 2)
Ways of indicating paragraphs
- Pilcrow ¶
- Leading: space seen between two sentences
~ Leading and paragraph spacing value should be equal to maintain cross-alignment
- Line spacing: the baseline of one sentence to the descender of the top sentence
Figure 1.4.1 Line spacing vs Leading
- Extended paragraphs: creates unusually wide columns of text
Widow: short line of type left alone at the end column of text
Orphan: short line of type left alone at the start of new column
- These two should not appear in a paragraph of text, unless its applied for flush right and ragged left, but only abit
Figure 1.4.2 Widow and Orphan
Ways to highlight text
- Apply italic
- Increase boldness
- Change typeface by making it bold
- Highlight with different colour of text
- Create box around text by placing a field of colour at the back of the text
Maintaining reading axis
- Place certain typographic elements outside the left margin of a column of type
Headline within text
- A head indicates a clear break between the topics within a section
- B head is subordinate to A heads and indicates new supporting argument or example for the topic at hand
- C head highlights specific facets of material within B head text
- Putting together a sequence of subheads = hierarchy
Figure 1.4.3 A head in paragraphs
Figure 1.4.4 B head in paragraphs
Figure 1.4.5 C head in paragraphs
1.5 Typo 2 Basic
Baseline: The imaginary line and the visual base of the letterforms
Median: The imaginary line defining the x-height of letterforms
X-height: The height in any typeface of the lowercase "x" (section between median & baseline)
Optical adjustment: letters that have a stem stroke that reaches the ascender height has a ascending stroke that is higher than capital letters
Figure 1.5.1 Letterform Basics 1
Apex/Vertex: Point created by joining two diagonal stems (apex-above/vertex-below)
Arm: Short stroked off the stem of the letterform (horizontal/inclined upward)
Ascender: The portion of the stem of a lowercase letterform that projects above the median
Barb: Half-serif finish on curved stroke
Beak: Half-serif finish on horizontal arms
Bowl: Rounded form that describes a counter (open/closed)
Bracket: Transition between the serif and the stem
Crotch: Interior space where two strokes meet
Descender: Portion of the stem of a lowercase letterform that projects below the baseline
Ear: Stroke extending out from the main stem
Em: Distance equal to the size of the typeface (originally means width of an uppercase M)
En: Half the size of an em
Finial: Rounded non-serif terminal to a stroke
Leg: Short stroke off the stem of letterform
Ligature: Character formed by combination of two or more letterformsLink: Stroke that connects the bowl and the loop of a lowercase G
Figure 1.5.3 Letterform Basics 3
Loop: The bowl created in the descender of lowercase G
Serif: Right-angled/oblique foot at the end of the stroke
Shoulder: Curved stroke (x part of bowl)
Spine: Curved stem of S
Spur: Extension the articulates the junction of the curved and rectilinear stroke
Stem: Significant vertical/oblique stroke
Stress: Orientation of the letterform, indicated by the thin stroke in round forms
Swash: The flourish that extends the stroke of the letterform
Terminal: The self-contained finish of a stroke without a serif
Figure 1.5.4 Letterform Basics 3
2. INSTRUCTIONS
2.1 Exercise 1 - Type Expression
Choose 4 letters from the words: BURN/burn, GLITCH/glitch, SHAKE/shake, NOISY/noisy, SQUISH/squish, BLEED/bleed and design type expressions in Adobe Illustrator. The 10 typefaces that where given are Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std and Univers LT Std. Distortion of letters should be avoided but minor distortion can be accepted depending on the concept.
My choice of words are: BURN, SQUISH, bleed and shake.
The first task was to create 3-4 sketches of the chosen words. The sketches can be in digital form or conducted in pen/pencil, as long as its clear. These were my sketches:
Figure 2.1.1 Sketches of Type Expression
After completing the sketches and receiving feedback, the designs were to be created in digital form with Adobe Illustrator.
#1 BURN/burn
Figure 2.1.2 Sketches of Burn
My first design was inspired by the shape of a campfire, the base of letters acts as firewood and the top of the letters burn like flames. This design is too distorted. My second design is expressing expansion in the process of burning, but the typeface wasn't included in the list given. Therefore changes had to be made for both designs in Adobe Illustrator.
Figure 2.1.3 Type Expression of Burn
With using the font Futura Std Extra Bold Condensed, I tried to express the movement of flames with applying the twist effect. I then changed the perspective of the word to show the shape of a campfire, and stacked two of the repeated words in gradients to express fire burning to the top. I chose the third design as my final piece as it looks the most like flames burning.
#2 SQUISH/squish
I chose my first sketch of the word squish for my digital type expression where the word is being squished from the left and right towards the center. I applied 40% of the squish effect and tried three different fonts to see which one suits most, and decided on the second design, which is using the font Gill Sans Std Bold Extra Condensed.
#3 BLEED/bleed
My sketches for the word bleed were too distorted, therefore I had to come up with more simple designs in Adobe Illustrator.
Figure 2.1.6 Type Expression of Bleed
Figure 2.1.7 Type Expression of Bleed 2
Futura Std Bold Condensed was used for these designs. I used the pucker tool to create blood dripping down from the letters, causing slight distortion of text, but fully expressing the words meaning. For the first design, I added droplets in the cavities of letter "b" and "d". I chose the first design as my final type expression.
#4 SHAKE/shake
After receiving feedback, some modifying had to be made.
I then moved all the words around one by one to create the movement of a flame burning.
After completing the images, it had to be converted into a GIF in Adobe Photoshop. I adjusted the frame seconds for a few frames to 0.1 seconds to get the most ideal result of the animation.
This is my final animation for the word BURN:
By using letterspacing and kerning, a paragraph can achieve a good alignment and ragging as showed below:
Cross alignment and adjusting the paragraph to sit on the baseline is also important to achieve an ideal text format.
After the exercises, it is time to apply what is taught and complete a text format.
This is my first attempt. After receiving feedback, I changed my picture and tried out more layouts.
I made the headline bigger and made it bold to show it more. I liked the last attempt but the line length is too short. Therefore I had to choose between the third and fourth attempt. I settled down with the third at last as it looks better overall and is more neat.
For the word shake, I chose my third sketch and used Univers LT Std Bold Condensed. I changed the height of letters and rotated them like they were shook into place, I also duplicated the letters in gradients behind the word to express shakiness. In comparison to my sketch, I changed the perspective to add the effect directly behind each letters.
This is my outcome of digital type expression awaiting for review and feedback:
Figure 2.1.10 Type Expression
BURN: I reduced the amount of twist effect for the base and increased it gradually with gradient. I also rotated and duplicated the top words around to create a flame shape.
SQUISH: The squeeze effect was only applied to the letters "U" and "I". I also changed the font of letters "S", "Q" and "H" from Gill Sans Std Condensed to Gill Sans Std Ultra Bold Condensed.
bleed: There are too many elements included, I chose to only let letter "l" drip down a drop of blood and removed the two white droplets in cavities of "b" and "d".
shake: It had to be bigger, so I resized it and moved it to the middle instead of placing it in the right corner.
This is my final outcome for my digital expression for the words BURN, SQUISH, bleed and shake:
Figure 2.1.11 Final Outcome of Type Expression
The next step is to create an animation for one of the selected words. My choice is to animate BURN.
Before working on the animation, I looked through Pinterest for references and to study the movement of flames to better understand how i should animate my design. Here was the reference i found:
I studied each frame of the reference and wanted to create the s curves of the movement of flames in my work.
In Adobe Illustrator, I first adjusted the colors of the text with gradient to show that the word is burning starting from a small flame.
Figure 2.1.12 Process of Animation for Burn 1
Figure 2.1.13 Process of Animation for Burn 2
After completing the images, it had to be converted into a GIF in Adobe Photoshop. I adjusted the frame seconds for a few frames to 0.1 seconds to get the most ideal result of the animation.
Figure 2.1.13 Process of Animation for Burn 3
This is my final animation for the word BURN:
Figure 2.1.14 Final Outcome of Animation
2.2 Exercise 2 - Text Formatting
For the first exercise, kerning and tracking is to be practiced in ten different fonts using Adobe InDesign.
The ten fonts are Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std and Univers LT Std.
Figure 2.2.1 Kerning and Tracking Exercise
Next is to learn how to determine a paragraph's point size, line length, leading and paragraph spacing.
A paragraph's point size should always be between 8pt to 12pt, the ideal line length is 55 to 65 characters and the leading and paragraph spacing should be equal.
Figure 2.2.2 Text Formatting Exercise 1
Figure 2.2.3 Text Formatting Exercise 2
Cross alignment and adjusting the paragraph to sit on the baseline is also important to achieve an ideal text format.
Figure 2.2.4 Text Formatting Exercise 3
After the exercises, it is time to apply what is taught and complete a text format.
Figure 2.2.5 Text Formatting
Figure 2.2.6 Text Formatting Reattempt
I made the headline bigger and made it bold to show it more. I liked the last attempt but the line length is too short. Therefore I had to choose between the third and fourth attempt. I settled down with the third at last as it looks better overall and is more neat.
This is my final outcome:
Figure 2.2.8 Final Outcome of Text Formatting
Figure 2.2.9 Final Outcome of Text Formatting (with grids)
HEAD
- Font/s: ITC Garamond Std Bold/ITC Garamond Std Book Narrow
- Type Size/s: 68 pt/30 pt
- Leading: 22 pt/66 pt
- Paragraph spacing: 11 pt
BODY
- Font/s: Univers LT Std 55 Roman
- Type Size/s: 9 pt
- Leading: 11 pt
- Paragraph spacing: 11 pt
- Characters per-line: 59 characters
- Alignment: Align Left
Page Margins
- 12.7mm + 12.7mm + 12.7mm + 12.7mm
- Columns: 4
- Gutter: 5mm
3. FEEDBACK
Week 2
General Feedback:
The readability of the designed words should be clear and not confusing, therefore less is more, over complicated designs result in distortion of letters. Other than that, affects are not necessary applied to all the letters, it can be applied to only some or one letter to express the word more clearly and cleanly. Diagonal designs should also be reconsidered as it may effect the overall visual of the design. We should use the provided fonts and study them before sketching and designing instead of coming up with fonts ourselves. The organization and placement of letters in the box is important too.
Specific Feedback:
My first design for the letter burn should aim for minimal distortion. Designs for squish were okay, squishing the words a little is enough, Mr. Vinod suggests to choose the first design. All designs for the word bleed have the same concept, can show bleeding in certain parts only to show contrast and look for cavities to design. For the word shake, there is already some fuzziness created, therefore there is no need to design the letters jumping up and down, focus on the word itself, different positions in letters should be avoided.
Week 3
General Feedback:
Be considerate of the negative spaces inside the box, avoid adjusting the text too small. Before submitting work to receive feedback, make decisions and avoid providing options to Mr. Vinod and expect him to help choose. Lastly, make sure the fonts used are fonts in the ten typefaces provided.
Specific Feedback:
Mr. Vinod suggests to make my design for the word burn smaller, and add the twist effect gradually more as the word gets smaller and goes up. I am also advised to not be averse in repeating the word to fill up the spaces in the box. Squish is overly distorted, only squish the middle letters and leave the rest normal. Too much elements in the bleed design is causing over expressing, always stick to one element. Shake could be bigger and in the middle.
Week 4
General Feedback:
Focus on the main object when trying out animations, only think of the details after getting the main animation right and clear. Always follow the instructions given when updating E-portfolio, make sure all the work is assessable and in the correct file form as stated. Updating process work in E-portfolio is important , avoid only showing the results, unclear process work may cause deductions in marks.
Specific Feedback:
My work is acceptable, no changes are needed.
Week 5
General Feedback:
Avoid leaving too much space on the bottom of the page, composition of the whole page is important. The columns for the text paragraph should be at least two, do not use one column only.
Specific Feedback:
The image I chosen has no relation with the text given, therefore I have to find a new picture to replace it. For the headline, Mr.Vinod suggests to change the font to ITC Garamond Std Book Narrow to achieve a better contrast. Some parts of the text has too much letterspacing which should be avoided. The ragging of the paragraphs are good. Attempt to try more layouts and choose the best one.
4. REFLECTIONS
Experience:
For the type expression task, this was my first time using Adobe Illustrator and I learned various things throughout the process. It is better to create multiple artboards rather than creating many files, this can ease the process of copy pasting an object in the same file. Besides, it is very convenient to familiarize with the shortcut keys of Adobe Illustrator to increase work efficiency, and of course that means to study the tools and functions in Adobe Illustrator.
For text formatting exercise, Adobe InDesign is quite hard to use in my opinion, the texts move around easily and I can't find a lot of tools I wanted to use as I am still unfamiliar with this software.
Observations:
After reviewing everyone's type expression work, I can see that the same design and idea may be repeated, but everyone executes their creativity in their own way, and there are still minor differences in design even though the same concept are applied.
Besides, everyone has a different approach in trying out layouts for text the formatting task, personal preference acts quite hard in this task.
Findings:
Designs that are overcomplicated actually cause distortion of letters when conducting type expressions. Words with minimal distortion are clean and easy to read, expressing the meaning of word easily and clearly. Therefore, we should avoid distorting the natural shape of the letters when designing.
As for text formatting, it is quite time consuming when attempting to try out different layouts, its better to sketch out some ideas beforehand to avoid unnecessary work being done.
5. FURTHER READINGS
I.D.E.A.S Computer Typography Basics by David Creamer
Figure 5.1 Book Cover of I.D.E.A.S Computer Typography Basics by David Creamer
Figure 5.2 Page 6 of I.D.E.A.S Computer Typography Basics by David Creamer
From reading this page of the book, I learnt that font families are groups of fonts with the same design but different weights or styles like plain, italic, bold, or bold italic. Some fonts have even more weight variations to achieve condensed or extended versions of the font.
Font weight names vary depending on the designer. For example “Medium” or “Book” might mean different things in different fonts. It’s best to use the official font menu for the best results.
In design, it’s acceptable to mix fonts from the same family, but it’s recommended to limit the number of font categories used to just one or two.
Comments
Post a Comment