Typography is a foundational subject in design studies, essential for developing critical design skills such as attention to detail, composition, and visual communication. It applies broadly across various design disciplines including animation, graphic design, new media, app design, website design, signage, packaging, and logo creation.

Challenge of Perceiving Typography Visually

Many design students find typography difficult because text is often not initially perceived as a visual element. The module helps students learn to view text as a design element, integrating visual expression and communication.

Application of Typography in Various Real-World Contexts

Typography is present in everyday life and across various media — from animated titles, websites, app interfaces, and signage to books, posters, bottle labels, and logos. Competency in typography influences the effectiveness of communication and user experience in all these contexts.

Historical Evolution of Typography

Typography has roots dating back over 500 years, evolving from calligraphy and hand lettering to digital typesetting with computers. Understanding this history provides context and helps students discern good and bad typographic practices.

Terminology: Typeface vs. Font

It is important to distinguish between ‘typeface’ (the complete family of related fonts like Georgia, Times New Roman) and ‘font’ (an individual style or weight within a typeface like Georgia Bold, Georgia Italic).

Calligraphy is about writing styles with tools such as pens.

Lettering is drawing out letter forms.

Typography evolved from these manual crafts into mechanical and digital forms.

Calligraphy is no longer a core part of the curriculum due to time constraints but remains valuable.

Week 1: Development

Phoenician to Greek Influence

Phoenician Characters laid the foundation for many Western alphabets.
The Greeks developed a unique writing style called boustrophedon:
- Text is written left to right on one line, then right to left on the next, and so on.
- This method did not use spaces or punctuation.

Figure 1.1.1 boustrophedon writing system

Etruscan Innovations

The Etruscans painted letters onto marble before carving.
- The use of a paintbrush influenced the shape and flow of the strokes, contributing modern letterform

Figure 1.1.2 Etruscan marble craving

Hand Script from (3rd–10th Century C.E)

Square Capitals emerged due to the use of the reed pen, held at a 60-degree angle.
Figure1.1.3 square capital
A more compressed version of square capitals was developed:
- It saved space and writing time but was harder to read.
- Readability improved only as readers grew accustomed to the forms — not ideal for communication.
  Figure 1.1.4 rustic capitals
Square capitals were primarily used in formal documents, while cursive scripts were used for daily transactions due to their speed.
- This distinction laid the foundation for the uppercase and lowercase system.
  Figure 1.1.5 cursive scripts
Uncial script evolved by incorporating Roman cursive:
- It was a hybrid style that didn't distinguish between upper and lowercase.
  Figure 1.1.6 unical
Half-uncial followed, introducing ascenders and descenders — a stepping stone toward modern lowercase letters.

Figure 1.1.7 half-unical

Charlemagne sought to standardize writing across his empire:
- Introduced structured usage of uppercase, lowercase, punctuation, and sentence formation.
  Figure 1.1.8 standardize writing by Charlemagne
After Charlemagne’s reign:
- Blackletter script became dominant in Northern Europe.
- Rotunda, a rounder variant, was widely used in the South.
  Figure 1.1.9 blackletter
Gutenberg revolutionized text reproduction:
- Developed metal matrices for printing.
- Enabled mass production of books like the Bible, drastically reducing reliance on scribes.
  Figure 1.1.10 Gutenberg revolutionized text

Importance of Digitizing Ancient Typefaces

Preserving and digitizing typefaces from our own culture is vital.
- It safeguards cultural heritage and allows for its integration into modern design systems.

Typeface Classifications

Blackletter:
- The earliest printing style.
- Based on medieval handwriting in Northern Europe.
- E.g. Cloister Black, Goudy Text
  Figure 1.1.11 blackletter
Old Style:

Lowercase inspired by Italian humanist scholars.
Uppercase from Roman inscriptions.
Spread from Italy to England.
E.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.

Figure 1.1.12 old style

Italic:
- Created to fit more text on a page.
- Considered a separate typeface, not just a slanted version.
- When slanted Roman letters are used instead, it is known as oblique.
  Figure 1.1.13 italic
Script:
- Decorative and should not be used for large blocks of text.
- Avoid using it in all caps — it’s not designed for that
- .E.g. Kuenstler Script, Mistral, Snell Roundhand.
  Figure 1.1.14 script
Transitional:

A refinement of Old Style.
Influenced by improvements in printing technology.
Less connected to handwritten forms.
E.g. Baskerville, Bulmer, Century, Times New Roman.

Figure 1.1.15 transitional

Modern:

More rational and geometric.
Features high contrast in stroke thickness and unbracketed serifs.
E.g. Bell, Bodoni, Caledonia, Didot, Walbaum.

Figure 1.1.16 modern

Slab Serif (Square Serif):

Thick, blocky serifs with little or no bracketing.
Often used in commercial or display type.
E.g. Clarendon, Memphis Rockwell, Serifa.

Figure 1.1.17 slab serif

Sans Serif:
- No serifs — clean and minimal.
- Initially disliked for appearing “ugly” or “unfinished” compared to handwritten scripts.
- E.g. Akzidenz Grotesk, Grotesk, Gill Sans Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers.
  Figure 1.1.18 sans serif
Serif /Sans Serif:

Throughout type development, both styles evolved and coexisted.
Many modern typefaces include both serif and sans serif versions.
E.g. Rotis, Scala, Stone.

Figure 1.1.19 serif/ sans serif

Week 2: Typo_3_Text_Part 1

Kerning:
The automatic adjustment of space between specific letter pairs. Often confused with letter spacing.

Figure 1.2.1 comparison of kerning

Letter Spacing:
The process of adding space uniformly between all letters in a word or sentence.

Tracking:
The combined application of kerning and letter spacing within the same word or sentence.

Figure 1.2.2 comparison of tracking

When to Kern/Letter Space?
Kerning is essential for headlines and prominent text, but not suitable for large bodies of text. Letter spacing is commonly used with uppercase letters to give them more breathing room.

InDesign vs. Illustrator:
Illustrator is used for creating graphics, while InDesign is more suitable for formatting large amounts of text.

Kerning and Letter Spacing in InDesign:
The video shows how to adjust kerning and letter spacing using keyboard shortcuts:

Option + Left/Right Arrow for kerning
Option + Right Arrow for letter spacing
It also explains how to adjust the kerning increment through InDesign preferences for finer control.

Text Alignment:

Flush Left: Most natural; mirrors handwriting and creates a ragged right edge.
Figure 1.2.3 flush left
Centered: Creates symmetry; best used sparingly for short text.
Figure 1.2.4 centered
Flush Right: Emphasizes the line ending; useful for captions or axial layouts, especially in small text blocks.
Figure 1.2.5 flush right
Justified: Provides order and uniformity but can create uneven spacing and visible "rivers" of white space.
Figure 1.2.6 justified

Readability:
Adding letter spacing to body text reduces readability by disrupting the natural word recognition patterns.

Figure 1.2.7 anatomy of typeface

Typeface Selection:
Different typefaces convey different messages. A skilled typographer chooses the one most appropriate for the context.
X-Height:
The distance between the baseline and the mean line of a typeface. Larger x-heights usually improve readability.

Figure 1.2.8 comparison of typefaces

Leading:
The vertical space between lines of text. It should match the typeface and point size.

Line Length:
Ideally, one sentence should contain no more than 55–65 characters for optimal readability.

Type Specimen Book:

A reference book displaying typefaces in various sizes.

Figure 1.2.9 specimen sheet

Gray Value:
Refers to the overall visual tone (darkness or lightness) of a text block. A well-set text should present a balanced, medium gray appearance.

Week 3: Typo_4_Text (Part 2)

Paragraph Indication:

Pilcrow symbol (¶): a historical marker indicating paragraph breaks, originally used in manuscripts and typography.
Line spacing (leading): setting a paragraph space

Paragraph spacing should be controlled via software values, not manual line breaks.

Figure 1.3.10 leading

Indentation
Paragraph spacing should ideally match the leading value to maintain consistent cross-alignment in multi-column layouts. Used especially in justified text. Notes its historical use in newspapers to save space.

Figure 1.3.11 indentation

Cross Alignment:
Shows how maintaining the same value for paragraph spacing and leading ensures visual alignment across columns of text. Doubling the leading can help achieve this alignment across different font sizes.

Line Spacing vs. Leading:

Line spacing: the space from baseline to ascender/descender.
Leading: space between lines of text.
Encourages the use of the term leading in typographic contexts.

Figure 1.3.12 line space vs leading

Widows and Orphans:

Widow: A short line at the end of a paragraph.
Orphan: A single line at the start of a new column.
These are considered typographic errors.
Figure 1.3.13 widow & orphan

Solutions include:

Re-breaking lines using Shift + Enter
Adjusting letter spacing or kerning

Highlighting Text:

Methods for emphasizing text in body copy:

Italics
Bold

Figure 1.3.14 bold highlight

Changing type family

Figure 1.3.15 typefamily highlight

Using color (cyan, magenta, black)
Suggests reducing the point size of highlighted sans-serif text or numerals by 0.5 pt for visual consistency.

Figure 1.3.16 colour highlight

Quotation Marks
Figure 1.3.16 quotation mark highlight

Typographic Hierarchy:
Stresses the need for clear informational hierarchy:

A Heads: Highest-level headings, set larger, often bold or small caps, sometimes extending beyond the text margin.
Figure 1.3.17 A heads

B Heads: Subordinate to A heads, these support main topics without adding paragraph spacing but use a false line break.
Figure 1.3.18 B heads

C Heads: Even more subordinate, used for granular subdivision, typically inset and followed by an em space before text resumes.

Figure 1.3.19 C heads

Week 4: Typo_2_Basic

Letterform Terms:

Baseline: an imaginary line where letters visually rest.
Median Line: marks the x-height of lowercase letters.
X-height: the height of the lowercase ‘x,’ used to measure other lowercase letters.
Above the baseline, key lines include:

Cap Height: height of capital letters.
Ascender Height: part of lowercase letters that extend above the median line (e.g., letters like ‘b’ or ‘h’).
Descender Height: strokes going below the baseline (e.g., ‘g’ or ‘y’).
Figure 1.4.1 letterform terms

Stroke: any defining line of a letterform.
Apex and Vertex: points formed by diagonal stems converging; apex at the top (like the letter ‘A’) and vertex at the bottom (like the letter ‘V’).
Arm: a short stroke extending from a stem, horizontal, flat, or inclined (e.g., parts of ‘E’, ‘F’, ‘K’).
Beak and Bowl: “Beak” refers to the half-serif in curved strokes; “Bowl” refers to the rounded enclosure contouring counter spaces.
Bracket: the curved transition between a serif and the main stroke.
Crossbar and Cross Stroke: horizontal strokes connecting stems in letters such as ‘A’ (crossbar) or ‘f’ and ‘t’ (cross stroke).
Crotch: the interior space where two diagonal strokes meet (e.g., in ‘V’ or ‘K’).
Descender: extensions below the baseline.

EM / EN spaces: typographic spacing units relative to the width of the uppercase ‘M’ and ‘N’. The M space roughly equals the width of ‘M’ and is often used as a word space.
EM-/ EN-: punctuation marks that correspond in width to the ‘M’ and ‘N’.
Ligatures: special combined characters (e.g., ‘fi’, ‘fl’) designed to avoid clashing elements like the finial (hooked stroke) and dot on ‘i’.

Stress: Refers to the orientation of the thickest strokes within a letter. Serif fonts often mimic handwriting with diagonal stress, while some designers like Baskerville created fonts with vertical stress to break from this tradition.
Swash: Decorative flourishes extending from letter strokes, often used in fancy or wedding invitations but never to be combined in capitals, as this is considered poor typographic practice.
Terminal: A catch-all for the end of a stroke without a serif, including ball terminals and teardrop shapes.

Full Font and Type Families

A type family consists of multiple related typefaces (weights/styles), such as bold, italic, regular, condensed.
A typeface is a specific style or weight within that family.
Selecting a type of family with multiple weights and styles provides flexibility and improves readability in complex layouts, such as books with headlines, subheadings, and body text.

Uppercase and Lowercase: Terms originate from the physical case storage of metal type blocks—uppercase letters stored in the “upper case,” lowercase in the “lower case.”

Small Capitals: Uppercase letterforms drawn at the size of a lowercase x-height, primarily found in serif fonts as part of what was traditionally called “expert sets.”

Small caps are especially useful when acronyms appear frequently in body text, preventing dominance or distraction from large uppercase letters.

Numerals:

Uppercase numerals or lining figures: Same height as capital letters, aligned uniformly, preferred in tabular data or formal contexts.
Figure 1.4.4 numerals
Lowercase numerals or old-style figures: Designed with varying heights similar to lowercase letters (including ascenders and descenders), used to blend better with text and avoid visual distractions from numbers.
Figure 1.4.5 old style numerals
Old-style figures are more common in serif fonts and less so in sans-serif typefaces.
Use lowercase numerals when numeric data frequently appears in body text (e.g., historical years) to maintain visual harmony.
Similar to small caps, access to old-style figures depends on typeface capabilities.

Typeface Variations

Italic: Based on handwriting style; slanted with distinctive letterforms.
Oblique: Mechanically slanted Roman forms without major shape changes.

Small caps almost always exist only in Roman (upright) styles and are rare or unavailable in italics.
Proper use of italics and obliques is important for tone and emphasis in typography.

Figure 1.4.6 italic vs oblique

Fonts include standard punctuation but may vary in available miscellaneous characters.

For specialized content, such as scientific or mathematical texts, choosing fonts with comprehensive character sets is crucial.
Figure 1.4.7 miscellaneous characters

Ornaments (decorative glyphs) are included in some larger type families for use in invitations or certificates but are not universally available.

Figure 1.4.8ornaments

Classification of Typefaces

Roman: Typeface styles derived from inscriptions on Roman monuments, featuring balanced stroke weights and clear readability.
Book: A lighter stroke variant of Roman for body text.
Italic: Handwriting-inspired slanted forms from 15th century Italy.
Oblique: Slanted Roman forms.
Variations within type families include bold, condensed, extended, light, poster, black, semi-bold, and medium—a wide range of weights and widths to support diverse design needs.
Figure 1.4.9 classification of typefaces

Experienced typographers often use a limited palette of typefaces, sometimes only one or two, for decades.

Instructions

Document 2.1 Module Information Booklet (MIB) of Typography.

Process Work

3.1Research

3.1.1 Static Type Expression

Before looking for visual references, I first researched the definitions of the four chosen words: Chill, Roll, Melt, and Jump. Words like Roll, Melt, and Jump have straightforward meanings. However, Chill has a dual interpretation — it can refer to both a cold sensation and a relaxed state of mind. Therefore, the rest of the research will explore both sides of the word Chill to better capture its full meaning in the design.

Chill:

Figure 3.1.1.1 chill reference board

Roll:

Figure 3.1.1.2 roll reference board

Melt:

Figure 3.1.1.3 melt reference board

Jump:

Figure 3.1.1.4 jump reference board

3.1.2 Animation

I believe the rolling motion is more dynamic, which makes it visually impactful. A rolling ball immediately came to mind, so I started drawing inspiration from real-life objects to ensure the animation flows smoothly and naturally. Here's a reference video I found on YouTube that features a rolling ball.

Video 3.1.2.1 ball rolling motion

3.2Ideation

3.2.1Static Type Expression

Chill:

Figure 3.2.1.1 chill ideation board

Roll:

Figure 3.2.1.2 roll ideation board

Melt:

Figure 3.2.1.3 melt ideation board

Jump:

Figure 3.2.1.4 jump ideation board

Modification:

Finalize sketch:

3.2.2 Animation

Several attempts were made during the animation process. Initially, I manually adjusted the frame rate one by one, which resulted in the use of nearly 80 artboards. Despite the effort, the final outcome wasn’t as smooth as expected. The large number of artboards made the animation feel somewhat messy and inconsistent.

Figure 3.2.2.1 screenshot of artboards

Gif 3.2.2.1 animation1.0

Therefore, I began adjusting the movement using the Transform feature in Photoshop. In each frame, the text is set to move 25 pixels and rotate 20 degrees, creating a smooth and consistent animation. As a result, only 35 artboards were needed, and the final animation turned out much smoother and more natural compared to the first attempt.

Figure 3.2.2.2 screenshot of artboards 2.0

Gif 3.2.2.2 animation2.0

Modification:

After consulting with Mr. Max, he suggested adding a few seconds of white screen to improve the pacing and overall visual impact.

Gif 3.2.2.3 animation2.1

3.2.3 Text Formatting

Figure 3.2.3.1 Sketches of text formatting

3.3Final Outcome

3.3.1 Static Type Expression

Figure3.3.1.1 final static type expression

3.3.2 Animation

Figure3.3.2.2 final animation

3.3.3 Kerning & Tracking

Figure3.3.3.1 final kerning & tracking exercise

3.3.4 Text Formatting

HEADLINE

Typeface: Gill Sans MT

Font/s: Gill Sans MT Bold

Type Size/s: 45 pt
Leading: 54 pt
Paragraph spacing: 0

BODY
Typeface: Gill Sans MT
Font/s: Gill Sans MT Regular
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Margins: top:161mm bottom:43mm left:20mm right:17mm
Columns: 2
Gutter: 18 mm

Figure3.3.4.1 final text formatting

Figure 3.3.4.2 final text formatting(pdf)

Figure 3.3.4.3 final text formatting with baseline

Figure 3.3.4.4 final text formatting with baseline (pdf)

Feedback

Week 1:

general feedback: We received a clear and detailed briefing on the course outline and expectations from Mr. Max, which helped set the direction for the semester. We were introduced to the process of creating an e-portfolio using Blogger, along with examples of past students’ work that served as useful references for designing a neat and well-organized portfolio. Task 1 was also explained thoroughly, with past high-quality submissions shown to help us understand the standard expected. Overall, the session was smooth, clear, and made it easier to begin with the coursework.

Week 2:

general feedback: Mr. Max showed us the tutorial on using Adobe Illustrator (the shortcut keys and some functions). We are also given the instructions on digitizing task 1’s font.

specific feedback: Based on the sketches from Task 1, I finalized the selection of four fonts with guidance from Mr. Max. The word "chill" was approved as it effectively conveys a sharp, icy, and shivering effect. For "melt," it was suggested to explore a combination of two fonts, incorporating design elements like candle wicks and a melting candle to enhance the concept. The word "roll" features four letters merged into a ball, but it was recommended to revise the design so that the letter "L" faces outward, making the word more legible. As for "jump," two options were proposed for digitization: one showing an afterimage effect on the letter "u" to imply motion, and another using a stair-like arrangement of the letters, with "j" compressed to show the moment before jumping.

Week 3:

general feedback:Mr. Max introduced us to the process of animating fonts and demonstrated how to export the final output.

Week 4:

general feedback. Max introduced us to Adobe InDesign, focusing on text formatting techniques. He provided a tutorial on key typographic concepts such as kerning (adjusting the horizontal spacing between individual characters), leading (adjusting the vertical spacing between lines of text), and tracking (modifying the spacing across a range of characters or entire words).

specific feedback. Max reviewed the animation of the word “roll.” He approved the overall execution but suggested it could be improved by adding more blank space after the word rolls off the artboard, to create a smoother visual transition.

Week 5:

general feedback: Mr. Max introduced us to key text formatting techniques, enabling us to complete the formatting exercise smoothly. These included cleaning up hyphens, avoiding widows and orphans, adjusting the baseline, and managing the export process.

Reflection

Experience

Before this task, typography was something I treated more like a supporting act than the main character. My comfort zone has always been graphics and visual storytelling, so suddenly shifting all the attention to just the letterforms was unfamiliar, even a little frustrating at first. I caught myself focusing too much on how to "decorate" the design rather than thinking about what the type was saying on its own. Working with words like Chill, Melt, Roll, and Jump, I had to visually express each one using only type. It wasn’t easy, but the challenge forced me to explore new ideas and tools.

This was also my first time using Adobe InDesign. At first, it was overwhelming, but I gradually learned how to apply proper text formatting techniques — like managing hyphens, avoiding widows and orphans, aligning to the baseline, and exporting clean layouts. These were things I never thought about before, but now I see how important they are.

And something new for me: recording my creation process. I wasn’t used to documenting my design journey step by step, but it really helped. Seeing my progress — even the messy drafts and failed attempts — made it easier to reflect, improve, and explain my decisions later on.

Observation

What I’ve come to realize is that typography is so much deeper than picking a nice font. There’s a structure and system behind it — from the spacing between letters (kerning, tracking) to the rhythm of lines (leading), to how the reader’s eye travels through the layout (hierarchy and grid systems). These aren’t just technical details—they shape how information is communicated and understood.

I also observed that design ideas don’t just come from other designers’ work. While I did refer to existing examples online, some of my best ideas came from real-life observation. Watching how ice melts, or how something rolls naturally, helped me bring those concepts into my typography in a more believable and expressive way. It taught me that design isn’t only about digital references—it’s about paying attention to the world around me.

Another interesting realization came from formatting text in InDesign. At first, I didn’t understand why things like baseline grids or avoiding hyphenation mattered so much, but now I see how even small inconsistencies can make a layout feel clumsy or unprofessional. It’s all in the details.

Findings

Looking back, I’ve learned that typography is an entire discipline of design—not just a stylistic choice. It carries structure, emotion, rhythm, and meaning. There’s a lot of knowledge baked into even the simplest choices. I now understand why things like visual hierarchy, alignment, and space management matter so much—and I’ve only scratched the surface.

I’ve also realized the value of tracking my own process. Recording and reflecting on each step gave me clarity—not just on what worked, but on how I think as a designer. It’s something I want to keep doing moving forward.

Typography used to be something I overlooked, but now it feels like a new language I’ve started learning. I’m still far from fluent, but at least now I know what to look for—and I’m genuinely excited to keep exploring i

Futher Reading

Figure 6.1 The cover of book "Typographic: form and communication"

"Typographic Design: Form and Communication" is a comprehensive guide that explores typography not just as an art, but as a vital means of visual communication. The book covers the fundamental principles of type design and layout, explaining how type can be used to convey meaning and evoke emotion beyond just legibility.

Key themes include:

The relationship between form and content: Typography is a tool to enhance the message, where the form of letterforms and their arrangement directly affect how communication is perceived.

The anatomy of type: Understanding letterforms, spacing (kerning, tracking, leading), and type classifications to use type effectively.

Typographic hierarchy and organization: How to structure text visually to guide the reader’s eye and emphasize key points.

Grid systems and layout: The importance of grids in organizing content clearly and cohesively.

The expressive potential of typography: Using type as a graphic element to create mood, rhythm, and impact.

Historical and contemporary examples: The book includes case studies that show typographic design evolving across time and media.

Figure 6.2 typographic design: form and communication page 87

In this page, it;s not just about putting letters together to form words — each letter has its own personality, shaped by its form, size, and weight. I was especially drawn to how letters can be arranged to feel bold and unified, almost like visual art. What stood out most is the idea that letters aren’t just tools for language, but also visual elements that interact with space to create rhythm, energy, and mood. It made me realize that typography is a kind of visual language — one that communicates feeling and tone, even without words.

Search This Blog

CHOONG YEE LENG (0381980)

Typography | Task 1 : Exercises

TABLE OF CONTENTS

Lectures