Typography | Task 1: Exercises

|| 21/4/2025 – 30/5/2025 (Week 1 – Week 6)
|| BAI ZHUO QING, 0370042
|| Typography
|| Task 1: Type Expression &Text Formatting

1. Lectures
2. Instructions
3. Process Work
4. Feedback
5. Reflection
6. Further Reading

1. Lecture：

Week1:

Typo_0_Introduction：

This lecture gave me a clearer and deeper understanding of the importance of typography in design. Typography is not just about making things look good. It is a visual language that helps deliver messages and emotions effectively. Good typography improves both visual appeal and readability, and it plays a key role in how information is communicated. Mr. Vinod explained the basic principles of typography and also introduced some historical context, including how the alphabet has developed over time.

One important point he highlighted was the difference between font and typeface. A font refers to a specific style, size, and weight of a typeface, while a typeface is a family of fonts that share the same overall design. Understanding this distinction helps us make more thoughtful choices in design and use typography to express the right tone and intention. This lecture made me realize that typography is not just a skill but a fundamental part of meaningful design.

Fig. 0.1 — Georgia fonts & Typefaces

Fig. 0.2 — Type Family

Typo _0_Eportfolio Briefing：

This lecture helped me understand the concept of an E-portfolio and the tools required to build one. We learned how to set up our own E-portfolio using the Blogger platform and how to structure it into five main sections: Lectures, Instructions, Feedback, Reflections, and Further Reading. Each section should include summaries, task progress, and personal reflections. After viewing the Typography E-portfolio example, I gained a clearer idea of how to present my learning process in an organized and structured way. The example showed effective information management and a logical content layout, covering all stages of each task such as the brief, research, process, final outcome, and reflections. I realized that a good Typography E-portfolio is not only about showcasing final results but also about clearly documenting the entire design process and the thinking behind it.

Typo_1_Development：

This lecture introduced the historical development of typography and its influence on design. Mr. Vinod explained how early letterforms were shaped by simple tools and materials like clay and stone, resulting in basic lines and curves. The invention of Gutenberg’s printing press marked a major turning point, spreading knowledge more widely and shaping modern typography. He also emphasized the importance of recognizing local designers’ contributions instead of only focusing on Western influences.

Fig. 1.1—Left: Ancient Phoenician inscription;
Right: Evolution from Phoenician to Modern Latin alphabet.

In terms of early writing methods, the Phoenicians used a right-to-left writing method, while the Greeks used a writing method called "boustrophedon". The text of this period had no spaces and punctuation, making it extremely challenging to read.

Fig. 1.2 — The Greek writing style: Boustrophedon

Etruscan and Roman carvers would first paint letters onto stone before carving, allowing for more precise planning. Over time, the stroke style evolved, with weight gradually shifting from vertical to horizontal. This shift is especially noticeable in Etruscan marble inscriptions and played a key role in shaping the visual style of classical letterforms.

Fig. 1.3 — Rustic Capitals

Fig. 1.4 — Early Letterform development

Between the 3rd and 10th centuries, various styles of handwritten scripts emerged, including lowercase Roman cursive and uppercase Uncial letters.

Fig. 1.5 — Figure 1.6 Handwritten text from the 3rd to the 10th century AD

Gutenberg combined his expertise in engineering, metalwork, and chemistry to develop a printing system that could replicate the appearance of northern Europe’s Blackletter script. To achieve this, he had to create a separate brass matrix for every individual letterform, ensuring each character matched the intricate and dense style of the handwritten originals.

Fig. 1.6 — Example of Blackletter script

The classification of text types is based on their approximate periods of origin.

Fig. 1.7 — Text type classification

Week2:

Typo_3_Text_Part 1：

In this lecture, Mr. Vinod introduced the principles of text formatting, focusing on kerning, letter spacing, and tracking. Kerning involves adjusting the space between specific letter pairs to create visually balanced text.

Letter spacing refers to increasing the space evenly between all letters, while tracking adjusts the overall spacing across an entire word or line of text. This lesson helped me understand how these techniques contribute to clearer, more aesthetically pleasing typography.

Fig. 3.1 - Example of Kerning

In this lecture, Mr. Vinod explained the difference between kerning and letter spacing. Kerning adjusts the space between specific letter pairs to improve visual harmony, while letter spacing changes the spacing evenly across all letters to enhance readability.

He emphasized that kerning should not be overused in large bodies of text and is best applied to prominent text like headings.

Mr. Vinod also recommended using tools like Adobe InDesign or Illustrator for text formatting, especially when working with large amounts of text.

He then demonstrated practical techniques for text formatting using Adobe InDesign, helping us understand how to apply these principles in design projects.

Fig. 3.2 - Example

The text below appears more visually pleasing than the one above, showing that sometimes adding more space between letters can enhance the overall look of the typography.

Fig. 3.3 - Types of Tracking

Tracking refers to adjusting the overall spacing across an entire word or sentence, affecting both kerning and letter spacing to create visual balance.

The appearance of the font, along with letter spacing, line spacing, and other design elements, plays an important role in shaping the reader's experience.

Fig. 3.4 - Compare usage of traces in text

This lecture covered common text alignments including left, center, right, and justified. Left alignment is the most widely used and is ideal for long-form content, as it follows the natural reading flow. Center alignment, while visually balanced, can be difficult to read and is better suited for short texts like headings. Right alignment is less common but can be effective for captions or aligning text with images. Justified alignment creates a neat and orderly appearance, commonly seen in books and newspapers.

Mr. Vinod also explained that uppercase letters are designed to stand independently, while lowercase letters depend on the space between them—called counterform—for readability. In addition, the overall reading experience is influenced by typeface design, letter spacing, kerning, and line spacing.

When selecting a font, it is important to consider both its suitability for the context and its readability. A well-chosen font enhances communication and reinforces the purpose of the design.

Fig. 3.5 - Two styles for one wedding invitation

Mr. Vinod reminded us that in formal texts, capital letters should not be used with script fonts, as doing so can lead to an unbalanced and visually unpleasant effect. Script fonts are designed for fluidity and elegance, and capital letters often disrupt that flow.

The wedding invitation shown on the left side of the image is a typical example of this mistake. It clearly demonstrates how inappropriate use of capital script letters can negatively affect the overall appearance and readability of the design.

Mr. Vinod also discussed the concept of “gray value” in typography. He explained that the gray value of a text block—the overall visual darkness or lightness created by the type—should be kept within a moderate range to maintain good readability and visual balance.

In addition, he highlighted the role of x-height in text legibility. Fonts with a higher x-height are generally easier to read, especially at smaller sizes, making them more effective for content that needs to be quickly and easily understood.

Fig. 3.6 - The "X-Height"

Mr. Vinod explained that three key elements contribute to making text more readable: type size, line spacing (leading), and line length. Type size should be large enough to read comfortably from a natural distance, like holding a book in your lap.

Proper line spacing prevents readers from losing their place—too tight leads to vertical eye movement, while too loose creates distracting gaps. He also emphasized the relationship between line spacing and line length. Shorter lines need less leading, while longer lines require more.

Fig. 3.7 - The Type Specimen Sheet

A type specimen book is a valuable resource that displays how different typefaces look at various sizes. By presenting printed samples in a wide range of sizes and styles, it helps designers evaluate type choices based on actual visual outcomes. Without these printed references, making an informed and accurate decision about typography becomes difficult.

Week3:

Typo_4_Text Part 2：

1. Line Space and Leading

In typography, line spacing and leading are often confused but have different meanings. Leading is the vertical distance between baselines of text lines, while line spacing includes the full height, covering both ascenders and descenders. Knowing the difference helps improve text clarity and layout.

Fig. 4.1 - Leading vs line space

2. Identation and Alignment
Indentation is commonly used to mark the beginning of a paragraph or section and is typically set to match the font size or line spacing. This helps create clear structure while keeping the layout visually balanced with minimal ragging on either side.

3. Orphan & Widow

In typography, orphans and widows are common layout issues that should be carefully avoided. A widow refers to a single line of text left alone at the top or bottom of a column, while an orphan is the first line of a paragraph stranded at the end of a column without the rest of its content.

To fix these problems, slight adjustments can be made to letter or word spacing to improve the flow of the layout. However, such changes should be minimal—ideally no more than three times—to maintain visual consistency and readability.

Fig. 4.2 - The orphans and widows

4. Highlighting Text

To emphasize key information in text, various methods can be used, such as italics, bold type, color changes, underlines, or placing borders around the text. These techniques help draw attention to important points. However, when applying color, it is best to avoid overly bright tones like yellow, as they may reduce readability.

Another effective way to highlight text is by adding a colored background. When using this method, it's important to maintain the left reading axis to ensure the text remains easy to follow and visually balanced.

Fig. 4.3 - Highlighting Text

5. Headline within Text

A clear structure helps emphasize key information in the text. Titles should use larger or bold fonts, while subtitles can be slightly smaller or italicized. Proper formatting makes the content

easier to read and understand.

The A-Head represents the main topic. It is set in a larger size than the body text and typically uses lowercase letters with bold styling to create a strong visual emphasis.
The B-Head serves as a subheading that introduces a new point. It is usually set in lowercase letters and styled with italics, bold serif, or bold sans-serif fonts to distinguish it from the main heading and body text.
The C-Head represents detailed points or sub-sections. It is usually written in lowercase letters and styled with italics, bold serif, or bold sans-serif fonts to distinguish it from higher-level headings.

Fig. 4.4 - A-Head

Fig. 4.5 - B-Head

Fig. 4.6 - C-Head

A clear and well-structured headline is essential for establishing the background and organization of a text. It helps guide the reader through the content and enhances the overall reading experience.

Using a clear hierarchy of titles—such as A, B, and C levels—provides context and structure, making it easier for readers to follow the flow of information and understand the relationship between different sections.

Fig. 4.7 - Headline within Text

6. Cross Alignment

Aligning headlines and captions with the body text helps strengthen the page structure and creates a consistent vertical rhythm, enhancing both clarity and visual flow.

Fig. 4.8 - Example of Cross Alignment

Typo_2_Basic

Baseline: The imaginary line the visual base of the letterforms.

Median: The imaginary line defining the x-height of the letterforms.

X-height: The height in any typeface of the lowercase 'x'.

Fig. 4.2.1 - Baseline.median.x-height

Stroke:Any lines that defines the basic letterform

Fig. 4.2.2 - Stroke

Apex/Vertex:The point created by joining two diagonal stems

Fig. 4.2.3 - Apex/Vertex

Arm:Short strokes off the stem of the letterform ,either horizontal or inclined upward

Fig. 4.2.4 - Arm

Ascender:The part of a lowercase letter that extends above the x-height or median line.

Fig. 4.2.5 - Ascender

Barb:A short, half-serif detail found at the end of certain curved strokes in letterforms.

Fig. 4.2.6 - Barb

Bowl:The curved part of a letterform that encloses a counter. It can be either open or fully closed.

Fig. 4.2.7 - Bowl

Bracket:The curved or angled connection between a serif and the main stem of a letterform.

Fig. 4.2.8 - Bracket

Cross Bar:The horizontal stroke in a letterform that links two vertical stems or spans across part of a letter.

Fig. 4.2.9 - Cross Bar

Cross Stroke:A horizontal stroke that connects two stems within a letterform, typically seen in characters like "t" or "f".

Fig. 4.2.10 - Cross Stroke

Crotch:The inner space formed at the point where two strokes join in a letterform.

Fig. 4.2.11 - Crotch

Descender:The part of a lowercase letter that extends below the baseline.

Fig. 4.2.12 - Descender

Ear:A small stroke that extends from the main stem or body of a letterform, often seen on the lowercase "g" or "r".

Fig. 4.2.12 - Ear

Em/En:Originally based on the width of the uppercase "M," an em now represents a space equal to the point size of the typeface, while an en is half that width.

Fig. 4.2.12 - Em/En

Finial:The rounded, non-serif end of a letterform’s stroke.

Fig. 4.2.13 - Finial

Ligature:The character formed by the combination of two or more letterforms.

Fig. 4.2.14 - Ligature

Link:The stroke that connects the bowl and the loop of a lowercase G.

Fig. 4.2.15 - Link

Serf:The right-angled or oblique foot at the end of the stroke.

Fig. 4.2.16 - Serf

Spine:The curved stem of the S.

Fig. 4.2.17 - Spine

Stress:The orientation of the letterform, indicated by the thin stroke in round forms.

Fig. 4.2.18 - Stress

Swash:The flourish that extends the stroke of the letterforms.

Fig. 4.2.19 - Swash

Terminal:The self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial).

Fig. 4.2.19 - Terminal

Typography: Basic/ The font:

Uppercase:Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Fig. 4.2.20 - Uppercase

Lowercase: Lowercase letters include the same characters as uppercase.

Fig. 4.2.21 - Lowercase

Small Capitals:These are uppercase letterforms designed to match the x-height of the typeface. They are most commonly used in serif fonts and are typically included in what’s known as an expert set.

Fig. 4.2.22 - Small Capitals

Uppercase Numerals:Also known as lining figures, these numbers align with the height of uppercase letters and share uniform spacing. They are especially effective in tabular data and contexts where uppercase text is used.

Fig. 4.2.23 - Uppercase Numerals

Lowercase Numerals:Also known as old-style or text figures, these numerals are designed with ascenders and descenders and align with the x-height of the typeface. They work best in settings that use both uppercase and lowercase letters. Lowercase numerals are more commonly found in serif typefaces than in sans-serif ones.

Fig. 4.2.23 - Lowercase Numerals

Italic styles:These are standard in most modern typefaces. The term comes from 15th-century Italian cursive writing and is usually designed based on the forms of Roman letter structures.

Fig. 4.2.24 - Italic styles

Punctuation and special characters:Most fonts come with basic punctuation, but the design and availability of additional symbols and special marks can differ across typefaces. It's important to review all available characters in a font before choosing it for a particular project.

Fig. 4.2.25 - Punctuation and special characters

Ornaments:These decorative elements are often used in designs like invitations or certificates and are usually provided as a separate font within a typeface family. Only a few classic typefaces, such as Adobe Caslon Pro, include ornaments as part of the full font set.

Fig. 4.2.26 - Ornaments

Basic/Describing typefaces:

Roman:This style is named after the capital letters found in ancient Roman inscriptions. A lighter version of Roman is often referred to as “Book.”

Italic:Based on 15th-century Italian handwriting, Italics are designed with flowing, cursive letterforms.

Oblique:Unlike Italics, Oblique styles are simply slanted versions of the Roman form and lack cursive structure.

Boldface:Defined by thicker strokes than the Roman style, bold weights may also appear as semibold, medium, black, extra bold, or super, depending on the typeface. In some cases, such as Bodoni, the heaviest version is labeled “Poster.”

Light:Features thinner strokes than the standard Roman weight. Even lighter versions are commonly called “Thin.”

Fig. 4.2.27 - Example of Describing Typefaces

Comparing Typefaces:

The following ten typefaces represent 500 years of typographic evolution. Each was designed with two main goals in mind: readability and visual appeal.

These classic fonts have stood the test of time, continuing to shape the way we read, write, and design today.

For beginners, studying these typefaces is essential. Gaining a solid understanding of them will build a strong foundation in typography and help you develop a deeper appreciation for other typefaces as your skills grow.

Fig. 4.2.30 - 10 Typefaces

2. Instructions：

3. Process Work：

Task 1: Type Expression

SKETCHES

Make a sketch of 4 words: SHAKE, WALK, MELT, STRETCH

We need to create rough sketches before starting our work in Adobe Illustrator.

SHAKE: The word instantly made me think of intense motion—shaking, trembling, even breaking apart—so I aimed to capture that sense of dynamic energy in the design.

WALK: This word brought to mind the rhythm of footsteps, road patterns, shadows, and the breeze while walking, so I explored four different styles inspired by those elements.

MELT: It immediately evoked images of melting candles, flickering flames, dripping wax, steam, and even lava. I tried to blend these visual cues into the design.

STRETCH: To me, this word suggests elongation, flexibility, vines reaching out, diffusion, and movement. I combined these ideas to shape the final designs.

Fig. 1 - My type sketch

After reviewing references and my classmates' sketches, I gained new ideas and insights. I also found some mistakes in my own work and adjusted and improved my sketches accordingly.

Digital version：

Final digital version：

Final Animated Type Expression (SHAKE):

Task 1: Exercise 2 - Text Formatting

In this exercise, we begin learning how to use InDesign for layout design.

KERNING AND TRACKING

We were instructed to use the 10 fonts provided by the professor in InDesign to design our names and adjust the letter spacing and line spacing.

PRACTICE - TEXT FORMATTING

Initially I made several sketches with different layouts.

Based on the suggestions provided by Mr. Max, I chose one of them as the final work.

HEAD LINE

Typeface: ITC Garamond Std

Font/s: Ultra Condensed Italic

Type Size/s: 24pt

Leading: 36pt

Paragraph spacing: 0

BODY

Typeface: ITC Garamond Std

Font/s: Ultra Narrow Italic

Type Size/s: 12pt

Leading: 14pt

Paragraph spacing: 14pt

Characters per-line: 60

Alignment: Justify with last line aligned left

Margins: 123 mm top + left + right, 26 mm bottom

Columns: 2

Gutter: 5 mm

Text Formating - PDF, Week04

4. Feedback：

Week 1：

General Feedback：

Mr. Max started by explaining the general content of the module and clearly explained the requirements of Task 1. He introduced the feedback form and demonstrated how to use it step by step. To help us better understand and get inspiration, he also showed some electronic portfolio works made by previous students. Then, he led everyone to build their own electronic portfolio on the Blogger platform. The whole class was clearly arranged and gave us a clearer direction for the next task.

Week 2：

General Feedback：

We received feedback and suggestions from the professor on our sketches and learned how to translate them into digital designs.

Specific Feedback：

Specific feedback: My sketches needed some improvement during the action. When I sketched, I didn't explain the information that the font itself could express, but expressed the description of the font through other added parts, so I made some improvements later.

Week 3：

General Feedback：

This week, I showed Mr. Max the improved sketch. I am concerned that the font itself can convey the information, rather than adding other decorations.

Specific Feedback：

Mr. Max finally chose SHAKE, but the others still need to be improved.

Week 4：

General Feedback：

This project provided a pleasant and open creative experience,allowing us to explore our ideas in depth. Although we encountered some difficulties because it was our first creation, we finally completed the creation.

Specific Feedback：

The final output effect is generally good. However, in order to better display the effect, I still made some modifications to achieve the best effect.

Week 5：

General Feedback：

This week my layout sketches were given to Mr. Max to choose from, and he ultimately chose one of the sketches that had a good layout.

Specific Feedback：

The font layout was too tight before, which is not suitable for long reading and easily gives people a sense of compression.

5. Reflection：

Experience:

At first, I learned the basics of typography, but I found it to be different and challenging because I had to create some fonts using software that I had little experience with before. However, with constant practice and repetition, I gradually learned how to design different font styles and how to use Adobe Illustrator for digital creative exploration. We watched step-by-step instructional videos that helped us through the process and made it easier for us to follow along.

Observation:

During the learning process, I realized that it was quite difficult to clearly express both the meaning of the word and my own ideas. Creating artistic typography using Adobe Illustrator was also much more challenging than sketching by hand. Different tools and commands can produce very different effects, and although some features may appear similar, their outcomes vary significantly. It takes time to fully understand and master these functions.

Findings:

After completing the exercise, I gained a deeper understanding of typography. It plays a vital role in graphic design, advertising and communication. I went from knowing nothing about digital technology to having a deeper understanding of them. I learned a lot in the process.

6. Further Reading：

Among the many typography resources, I chose to study Typography Basics by David Creamer.

This book emphasizes the importance of readability as the foundation of all typographic design. The author clearly points out that no matter how beautiful a font may look, if it hinders the transmission of information, the design has failed its core purpose. With this concept in mind, Creamer introduces various font classifications beyond the commonly known serif and sans serif, providing a more comprehensive framework for understanding type.

One key takeaway from the book is the detailed breakdown of font categories: Serif, Sans Serif, Display, Script, Text, Mono-Spaced, and Dingbats. Each type serves a unique function—Serif fonts offer classical readability; Sans Serif fonts give a modern feel but require careful application; Display and Script fonts are decorative and should be used sparingly for headlines or invitations. Mono-Spaced fonts reflect traditional typewriting styles, while Dingbats are symbolic fonts used for visual accents.

Through this reading, I realized that being a good typographer means understanding not just how fonts look, but how they behave and what roles they serve. Creamer's systematic classification helped me reflect on font choices in my past designs and gave me new tools to make more informed, purposeful selections in the future. One sentence that left a strong impression was:"If the typography makes the information on the page harder to read, it does not matter how 'pretty' a page layout is or how 'unique' a font selection is, the page has failed in its main duty: to transfer information to the reader in an efficient manner."

搜索此博客

BAI ZHUO QING 0370042