Typography - Task 1: Exercises
.png)
21/4/2025 - 19/5/2025 / Week 1 - Week 5
Ten Sze Ching / 0365326Typography / Bachelor of Interactive Spatial Design / Taylors University
Task 1: Exercises
-----
- Lecture Note
- Instructions
- Exercise 1: Text Expression
- Exercise 2: Text Formatting
- Feedback
- Reflection
- Further Reading
-----
Lecture Note
Week 1 - 2 (5/5/2025)
I joined the Typography class in Week 3 due to a sudden change of module. I was really eager to learn this subject and waited patiently until Week 3, when an extra slot finally became available, I was very happy to get in. Since I missed the first two weeks of class, the lecture notes below are based on Mr. Vinod's video recordings. We were given an introduction to typography, covering its history, development, types, formatting, and more.
Lecture 1: Typo 0 Introduction
Typography
- Core foundation in design studies
- Develops essential skills like attention to detail and composition
- Important and widely used in graphic design, animation, new media
- Animation, Web design, App UI, Signage
- Good typography enhances usability and navigation in public design
- Typography has evolved for about 500 years, from calligraphy to lettering and finally evolved to typography
- Font: refers to individual font or weight within a typeface
Figure 1.1 Fonts
- Typeface: refers to the various families that do not share characteristics
Figure 1.2 Typeface
Lecture 2: Typo 1 Development
- Book reference: Kane. J. (2002) A Type Primer. London, UK: Laurence King
- Early letterform development: Phoenician to Roman - initially writing meant scratching into wet clay with sharped stick or carving into stone with chisel.
Figure 1.3 Left: Evolution from Phoenician latter. Right: 4th century B.C.E - Phoenicians votive stele Carthage, Tunisia.
- The Greeks changed the direction of writing - 'boustrophedon', which meant that read from right to left and left to right, at the same time changed the orientation of the letterforms
- Early letterform development: Phoenician to Roman
Figure 1.5 Evolution from Phoenician to Roman
- Square capitals - letterforms have serifs added to the finish of the main strokes
- 3rd - 10th century C.E.
Figure 1.6 Square capitals
- Compressed version of square capitals - took lesser time to time, rustic capitals allowed for twice as many words on a sheet of parchment
Figure 1.7 Compressed version of square capitals
- Both square and rustic capitals were typically reserved for documents
- Written in cursive hand which is simplified for speed
Figure 1.8 Roman Cursive
- Unicals incorporated roman cursive hand (e.g. A, D, E, H, M, U, Q)
- Unicals is Latin for a twelfth of anything. The broad forms of uncials are more readable at small sizes than rustic capitals.
Figure 1.9 Unicals
- Cursive hand - formal beginning of lowercase letterforms, replete with ascender and descenders
Figure 1.9 Half Unicals
- Charlemagne - the monks rewrite the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century
Figure 1.10 Caloline minuscule
- Blackletter - condense strongly vertical letterform
Figure 1.10 Blackletter (Textura)
- Gutenberg's - included engineering, metalsmithing and chemistry
Text Type classification
- 1450 Blackletter - earliest printing type
- 1475 Old-style - lowercase forms used by Italian humanist scholars for book copying
- 1500 Italic - contemporary Italian handwriting
- 1550 Script - originally and attempt to replicate engraved calligraphic forms
- 1750 Traditional - refinement of old-style forms, advances in casting and printing
- 1775 modern - further rationalization of old-style letterforms
- 1825 square serif / slab serif - heavily bracketed serif, with variation between thick and thin strokes
- 1900 sans serif - eliminated serifs all together
Figure 1.12 Text Type Classification
Lecture 3: Typo 3 Text Part 1
Tracing
- Kerning - automatic adjustment of space between letters
- Letterspacing - add space between the letters
Figure 1.13 Kerning & Letterspacing
Figure 1.14 Normal tracking, loose tracking and tight tracking
- Uppercase letterforms are drawn to be able to stand on their own
- Lowercase letterforms require the counterform created between letters to maintain the line of reading
Figure 1.15 Normal tracking vs loose tracking
- Flush left: most closely mirrors the asymmetrical experience of handwriting
- Centered: create strong shape on the page, important to amend line breaks so that the text does not appear too jagged
- Flush right: useful in situation like captions, where the relationship between text and image might be ambiguous without a strong orientation to the right
- Justified: occasionally produce rivers of white space
Figure 1.16 Flush left
Figure 1.17 Centered
Figure 1.18 Flush right
Figure 1.19 Justified
- Type with generous x-height or relatively heavy stroke width produces a darker mass on the page than type with smaller x-height or lighter stroke.
Figure 1.20 Anatomy of a Typeface
Figure 1.21 Different typefaces show the different grey values
Leading and Line Length
- Type size: large enough to be read easily at arms length (imagine yourself holding a book in your lap)
- Leading: text that is set too tightly encourage vertical eye movement
- Line length: good rule of thumb is to keep line length between 55-65 characters
Figure 1.22 Different leading
Figure 1.23 Tight leading and loose leading
- Shows samples of typefaces in various different sizes
- Provide accurate reference for type, type size, type leading, type line length and etc.
Figure 1.24 Sample type specimen book
Lecture 4: Typo 3 Text Part 2
Indicating Paragraph
- The ‘pilcrow’ (¶): A holdover from medieval manuscripts seldom uses today. It is one of the hidden characters or blue indicators that helps in formatting large amounts of text.
Figure 1.25 Pilcrow
- Line space: space from the baseline of a sentence to the descender of the next sentence.
- Leading: space between two sentences.
- Indentation: Standard indentation is the indentation of the first line in a paragraph; the ident is the same size of the line spacing or the same as the point size of the text.
Figure 1.26 Standard Indentation
Figure 1.27 Extended Indentation
- Widow: short line of the type left alone at the end of a column of text. It can be avoided by creating a force line break before or adjusting the tracking of the line before to let the last word in the second last line moves down to the last line.
- Orphan: short line of the type left alone at the start of a new column. It could be avoided by adjusting the length of the column.
Figure 1.28 Widow and Orphans
- Use the same typeface but different fonts (Italic, Bold) or colour
- Use bold sans serif, place a field of colour, place typographic elements (such as bullet points), use quotation marks
- A head: indicates a clear break between the topics within a section.
- B head: subordinate to A heads, they indicate a new supporting argument or example for the topic at hand.
- C head: highlights specific facets of material within B head text. C heads in this configuration are followed by at least an em space for visual separation.
Figure 1.29 A head
Figure 1.30 B head
Figure 1.31 C head
Lecture 5: Typo 4 Basic
Basic / Describing letterforms
- Baseline: The imaginary line 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'.
- Stroke: Any line that defines the basic letterform
- Apex/Vertex: The point created by joining two diagonal stems (apex above and vertex below)
- Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y)
Figure 1.32 Arm
- Ascender: The portion of the stem of a lowercase letterform that projects above the median.
Figure 1.33 Ascender
- Barb: The half-serif finish on some curved stroke.
- Bowl: The rounded form that describes a counter. The bowl may be either open or closed.
- Bracket: The transition between the serif and the stem.
- Cross Stroke: The horizontal stroke in a letterform that joins two stems together.
- Crotch: The interior space where two strokes meet.
- Ear: The stroke extending out from the main stem or body of the letterform.
- Serif: The right angled or oblique foot at the end of the stroke.
- Stress: The 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.34 Terminal
- Small Capitals: Uppercase letterforms draw to the x-height of the typeface.
Figure 1.35 Small capitals
- Uppercase Numerals: Same height as uppercase letters and are all set to the same kerning width.
- Lowercase Numerals: These numerals are set to x-height with ascenders and descenders.
- Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
- Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.
Figure 1.36 Punctuations and Ornaments
- Roman, Italic, Boldface, Light, Condense, Extended
Figure 1.37 Typefaces
Figure 1.38 Different typefaces
- A range of altitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.
Figure 1.39 Comparing typefaces
Letters / Understanding letterforms
- Two different stroke weights of the Baskerville stroke form.
- Each bracket connecting the serif to the stem has a unique arc.
Figure 1.40 Basketville 'A'
- The letterform may appear symmetrical, but a close examination shows that the width of the left slop is thinner than the right stroke.
- Type designer takes to create letterforms that are both internally harmonious and individually expressive.
Figure 1.41 Univers 'A'
- Comparison of how the stems of the letterforms finish and how the bowls meet the stems.
- Reveals the palpable difference in character between the two.
Letters / Maintaining x-height
- X-height - size of the lowercase letterforms
- Keep in mind that curved strokes, such as in 's' must rise above the median or sink below the baseline in order to be the same size as the vertical and horizontal strokes they adjoin.
Figure 1.43 x-height
Letters / Form / Counterform
- The space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.
- Counterform has the same importance as the letterforms as it helps to recognize the shape of the letters and assure the readability of the words.
- We could examine the counterform of letters by enlarging each letter and analysing them. It could give us a glimpse into the process of letter-making.
Figure 1.44 Space
Figure 1.45 Form and counterform
- The simple contrasts produce numerous variations: small+organic / large+machines; small+dark / large+light, etc.
Figure 1.4 Contrast in Typography
< back
-----
Instructions
Figure 2.1 Module Information
< back
-----
Exercise 1: Text Expression
1.1 Sketches
For this exercise, we were given four words by Mr. Max: "jump," "melt," "roll," and "chill." Before creating the typography designs in Adobe Illustrator, we were instructed to start with a few sketches, ideally four different design ideas for each word. Below are my initial attempts at some of the sketches.
Figure 3.1 Sketches for "jump" and "melt"
Figure 3.2 Sketches for "roll" and "chill"
After receiving feedback from Mr. Max, I made some adjustments to my designs and also came up with new ideas. Although some of my initial typography designs were visually appealing, a few were similar to those done by other students. Below is my second attempt at the sketches, and I’m glad that all of them were approved by Mr. Max.
Figure 3.3 Second attempt of sketches for "jump" and "melt"
Figure 3.4 Second attempt of sketches for "roll" and "chill"
1.2 Digitalization
Jump
For this word, I used Futura Std Extra Bold Condensed to digitize it. After typing the word, I created outlines and separated the 'U', positioning it slightly upward to suggest a jumping motion. To create the shadow effect, I duplicated the 'U' several times, gradually adjusting the opacity from 0% to 100%. Then, I selected all the 'U's and aligned them using Vertical Distribute Space. This digitalized typography has been approved by Mr. Max.
Figure 3.5 Jump
Melt
I used Gill Sans MT Bold to digitalize this word. For the "ice cubes" design, instead of drawing it manually, I discovered the 3D and Materials effect in Adobe Illustrator. I used this effect to create 3D letters and adjusted the perspective and lighting to make them appear as if they were lying on the ground. Then, I used the Curvature Tool to create melting water and fine-tuned each anchor point using the Direct Selection Tool. This typography design was also approved by Mr. Max.
Figure 3.6 Melt
Roll
I used Gill Sans MT Regular for this word. To make the letters follow a circular path, I first created a circle. Then, I used the Type on a Path Tool to click on the circle’s path and typed the word along it. This design was also approved by Mr. Max.
Figure 3.7 Roll
Similar to the word 'melt', I wanted to create an ice cube effect to represent 'chill'. So, I used the 3D effect in Adobe Illustrator and added a small snowflake on top of the letter 'i'. Below is my first attempt, although it resembles an ice cube, it didn’t look cold enough. Mr. Max suggested adding some icicles on the letters to enhance the chill effect.
Figure 3.8 Chill (First Attempt)
Figure 3.9 Chill (Second Attempt)
I tried to add icicles below the 3D word, but it looked weird because it was difficult to make the icicles appear natural in 3D. So, I created another version in 2D, which looked much better, and Mr. Max chose the 2D version.
1.3 Final Outcome
Figure 3.10 Final Text Expression in JPEG
Figure 3.11 Final Text Expression in PDF
As suggested by Mr. Max, I have chosen the word "roll" to animate. My idea is to make the letters appear one by one and form a circle, which also makes the animation simpler to create. Below is the outcome of my first attempt.
Figure 3.10 Photoshop
Figure 3.11 First Attempt
Figure 3.12 Final GIF
-----
2.1 Layout Exercise
In this exercise, we learned how to format text using Adobe InDesign, such as adjusting kerning, tracking, and leading. These are crucial for making the text visually tidy and clean by fine-tuning its placement, small adjustments like these can demonstrate your attention to detail and show that you're a good designer.
Figure 4.1 Kerning, tracking and leading exercise
2.2 Formatting Exercise
In this exercise, we were given text and formatting details to complete the task. Using the same elements, we created different page layouts consisting of a heading, subheading, body text, and image. Below are the formatting details provided:
HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm
2. Things to look out for when completing Task 1, Exercise 2 Text Formatting:
• Font size (8–12)
• Line Length (55–65/50–60 characters)
• Text Leading (2, 2.5, 3 points larger than font size)
• Paragraph spacing (follows the leading)
• Ragging (left alignment) / Rivers (Left Justification)
• Cross Alignment
• No Widows / Orphans
Figure 5.1 Text formatting according to requirements in Adobe InDesign
Figure 5.2 Text formatting with guides and baseline
Figure 5.3 Text formatting without guides and baseline
Figure 5.4 Drafts
Figure 5.5 Drafts 2
After showing the different variations to Mr. Max, he chose the fourth one for submission. Below is the final version for my Task 1 Exercise 2.
Figure 5.6 Final text formatting (without grids).jpg
Figure 5.7 Final text formatting (with grids) screenshot.jpg
Figure 5.8 Final text formatting (without grids).pdf
Figure 5.9 Final text formatting (with grids).pdf
Formatting Details:
HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 72 pt
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 11 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 23 mm
Columns: 1
Gutter: 10 mm
< back
-----Feedback
Week 1 & 2
- Not registered to this module yet
Week 3
- General Feedback: Today is my first typography class. Before class I have recap on the previous lecture and also read through the module information. So, in this class I started with sketching the typography design of "jump", "melt", "roll" and "chill". As this is my first physical class, I was a bit left behind compared to other students. So, I proactively came out with quite a lot of different style of sketches for Mr. Max to review. After a little bit of amendment and improvement, Mr. Max has picked some good designs for each word and allowed me to digitalize them in Adobe Illustrator. Apart from that, we were taught of how to make simple frame by frame animation using Adobe Illustrator and Photoshop, which we will need to do this for our Exercise 1.
- Specific Feedback: For the first draft that i proposed, apart from the word "melt", the other typography design is quite common, although it is a good idea. So, Mr. Max gave me suggestion to how to make it more different so that my typography won't clash with other students. MELT: He chose the one which the letter is "lying down" and suggested me to make it in 3D and add melting effect. JUMP: The jumping effect is not obvious, perhaps can try to add shadow below the letter to make it feel like in the air. ROLL: The sketches that I proposed have already done by other students, perhaps can try to play around with the letter "R" or "O" to make the rolling effect, and it's ok to make changes on the font as long as it is readable. CHILL: Still my sketches have already proposed to other students, so he suggested me to maybe add a circular snowflake on the letter "i". I amend my work according to Mr. Max advice and also came out with some new ideas. At the end of the class, he was okay with my sketches and allow me to choose the design myself based on the approved choices. For me it's a good start as for my first typography class.
- General Feedback: We were given lecture on introduction of Adobe InDesign, and we have learnt the formatting, kerning, leading and tracking.
- Specific Feedback: I've gotten feedback for my digitalized typography design on Adobe Illustration. Mr. Max has approved the design for "jump", "roll", "melt". For the word "chill", it can be better by adding icicles to make it visually colder.
- General Feedback: Mr. Max has given us lecture on exercise 2: text formatting. In which we learned how to adjust body text formatting to improve readability by modifying hyphenation, the number of words per line, kerning, tracking, ensuring text aligns properly with the baseline and etc.
- Specific Feedback: I showed my second attempt at the digitalized "chill" design to Mr. Max, where I added icicles. I created both 2D and 3D versions, and he approved the 2D one. I also showed him the text animation for "roll", which he approved as well. However, I suggested fine-tuning it to make it more engaging and will present the updated version in the next class. By the end of the class, I completed all seven sketches for text formatting and consulted with him. He approved all of them and selected one for me to refine further, specifically by turning the body text into two columns.
-----
1. Experience
This module has given me a new perspective on how typography can be expressed in design, which is something I hadn’t considered before taking this course. Previously, I viewed text as simply a tool for understanding and conveying content. However, through this module, I’ve learned that typography itself can be a form of design, used to express emotion, meaning, and layout. It’s a fundamental yet essential skill for any designer. I was taught by Mr. Max in this module. Although I only registered in Week 3, I managed to catch up with the pace thanks to Mr. Max’s guidance and the detailed learning materials provided on Microsoft Teams. In addition, I received valuable feedback from Mr. Max on how to further improve my typography designs. Thanks to my basic design foundation, I’m glad that most of my work was approved by him. Overall, I had a great time and truly enjoyed this module.
2. Observation
Since starting this module, I’ve become more aware of how typography appears in our daily lives. I began observing signboards, posters, and magazine designs, paying attention to how typography is used to express the purpose of each design. I took notes and learned from these real-life examples. In addition, learning about kerning, tracking, and leading has trained my eye for detail, almost like turning my eyes into a ruler. By applying these skills, I’ve reflected on my previous designs and realized how typography could further enhance and elevate them.
As I’ve mentioned, typography is more than just a communication tool, it is a visual art that conveys the meaning and purpose of a design. By watching Mr. Vinod’s YouTube videos, I also gained a deeper understanding of the evolution of typography. I was amazed to learn that behind every font and design choice, there is a meaning and intention. I had never realized that there were so many theories behind the typography I encounter every day. In addition, I actively sought feedback from Mr. Max. His suggestions pushed me to think outside the box and encouraged me to experiment more, compare different versions, and identify the best outcome for each task.
< back
-----
Further Reading
Suggested by my friends who took this module before, I read a book called Thinking with Type by Ellen Lupton. It is a must-read introduction to typography for designers, covering type history, classification, and application with clear visuals.
From Thinking with Type by Ellen Lupton, I gained a solid understanding of typography as both a practical tool and a form of visual expression. The book taught me the fundamentals of type anatomy, classifications, and layout principles like alignment, spacing, and hierarchy. I also learned how typography evolves across different media and how thoughtful type choices can enhance clarity, emotion, and communication in design. Most importantly, it helped me develop a sharper eye for detail and a deeper appreciation for the meaning behind every typographic decision.
< back
.jpg)
Comments
Post a Comment