Typography | Task 1: Exercises

LIST / JUMPLINK

• Lectures
• Instructions
• Exercises
• Feedback
• Reflections
• Further Readings

---

21.4.2025 - 26.5.2025（Week 1 - Week 6)
Yang Shumeng（0378848）
Typography / Bachelor of Design (Honours) in Creative Media / Taylors University
Task 1 / Exercises

---

LECTURES

Week 1

Typo_0_Introduction

During this lecture, we've grasped the significance of typography. Typography is a crucial cornerstone in all design fields. It sharpens our eye for detail and hones our compositional abilities. Widely utilized in web design, app interfaces, logo creations, book layouts, and poster designs, it serves as a linchpin in improving user experience and bolstering communication efficiency. As typography has evolved from manual craftsmanship to digital production, its prevalence has soared, yet this often comes at the expense of its quality.

In this lecture, Mr. Vinod elucidated the influence of fonts on typography and delineated the distinction between fonts and typefaces. Fonts denote the variations in size and weight within a typeface, whereas typefaces represent a collection of related fonts that share a common style but exhibit differences in weight or styling.

Fig. 0.1 — Example of Georgia fonts & Typefaces

Typo_0_Eportfolio Briefing

This lecture empowered us to comprehend the definition and tools of the E - portfolio and instructed us on how to establish our E - portfolio on Blogger. Additionally, the E - portfolio should be organized into five chapters: Lectures, Instructions, Feedback, Reflections, and Further Reading. Each chapter should incorporate summaries, task records, and reflections.

Typo_1_Development

This lecture delved into the historical background of typography. The evolution of early letterforms was shaped by alterations in writing tools, and Greek innovations propelled writing systems forward. Gutenberg’s invention of the modern printing press significantly expedited the dissemination of knowledge. Meanwhile, different regions cultivated rich and varied typographic traditions. Typography has persisted in evolving, and the disparities in the visual impacts and application scenarios of typefaces have had a profound influence on modern design.

Early letterforms emerged in response to practical requirements. People initially inscribed on wet clay or engraved on stone with rudimentary tools. These early forms were predominantly composed of straight lines and curves.

Fig. 0.2 — Example of Type Family

Fig. 1.1—Left: Ancient Phoenician inscription;  Right: Evolution from Phoenician to Modern Latin alphabet. (Right: 4th century B.C.E. - Phoenicians votive stele Carthage, Tunisia.) (Left: Evolution from Phoenician letter. )

The Greeks introduced the concept of “boustrophedon,” where the reading direction alternated between left - to - right and right - to - left. This practice led to significant changes in the orientation of letterforms.

Fig. 1.2 — The Greek writing style: Boustrophedon

The Greek writing style: Boustrophedon

Etruscan and Roman carvers painted letters before carving, with stroke weight changes and broadening influencing the final letterforms.

Fig. 1.3 — Rustic Capitals

Fig. 1.4 — The evolution of the letter “A” from the 1000 B.C.E to 100 B.C.E

Hand script from 3ʳᵈ - 10ᵗʰ century C.E.

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

Following the decline of Charlemagne's empire, diverse regional forms of Alcuin's script came into being. In the northern regions, Blackletter developed, while in the south, Rotunda emerged. Meanwhile, Italy's humanistic script was founded upon Alcuin's minuscule script.

Fig. 1.6 — Example of Blackletter script

C. 1300: Blackletter (Textura)

Gutenberg used his skills in engineering, metalsmithing, and chemistry to create pages mimicking northern Europe’s Blackletter, requiring a unique brass matrix for each letterform.

Fig. 1.7 — C. 1455: 42 line bible, Johann Gutenberg, Mainz

Text type classification (Dates of origin approximated to the nearest quarter century):

Fig. 1.7 — Text type classification

Week 2

Typo_3_Introduction

Kerning involves the automatic adjustment of spacing between specific letter pairs, rather than uniformly changing the distance between all letters. In contrast, letter spacing (or tracking) increases or decreases the space between letters evenly, while kerning ensures visual harmony and aesthetic balance in the overall word.

Fig. 3.1 - Example of Kerning

For lengthy text passages, frequent spacing adjustments should generally be avoided. Such modifications are typically recommended only for visually prominent elements like titles or headings.

When working with text layout, Adobe InDesign or Illustrator are the preferred tools. InDesign is particularly well-suited for handling large volumes of text, offering more efficient formatting capabilities.

Below are some standard text formatting techniques in Adobe InDesign:

Fig. 3.2 - Example

Typography elements such as font choice, letter spacing, and line spacing play a crucial role in shaping the reader's experience. Effective design prioritizes clear and efficient communication as its fundamental objective.

Fig. 3.3 - Types of Tracking

**Text Alignment Options and Considerations**

The four primary text alignment options are: left-aligned, centered, right-aligned, and justified.

1. **Left-aligned text** remains the standard choice for extended reading material. This format replicates the natural flow of handwriting, featuring uniform starting points for each line while allowing organic line endings. The resulting "ragged right" edge maintains consistent word spacing and, when properly executed, creates a visually pleasing rhythm despite its asymmetry.

2. **Centered text** creates perfect bilateral symmetry, balancing the visual weight at both ends of each line. While this treatment enhances graphic appeal, it compromises reading efficiency and should generally be reserved for brief textual elements.

3. **Right-aligned formatting** draws attention to line endings and proves particularly effective when coordinating text with adjacent visual elements. Careful attention to line spacing is crucial with this alignment to prevent disjointed visual flow.

4. **Justified text** achieves clean rectangular blocks through automatic spacing adjustments between words or characters, creating formal, structured layouts.

**Font Selection Principles**

When selecting typefaces, prioritize functional performance and legibility. Each font family possesses distinct visual qualities that determine its appropriateness for specific applications and contexts.

Fig. 3.5 - Two styles for one wedding invitation

Typeface selection significantly impacts message perception. Fonts with generous x-heights or bold stroke weights naturally convey visual weight and presence, while those with compact x-heights or delicate strokes project an airy, lightweight impression.

Fig. 3.6 - The "X-Height"

Optimal Body Text Selection and Layout Principles**

1. **Primary Purpose of Body Fonts:**

- Should ensure effortless reading continuity

- Must create visual equilibrium with other page elements (e.g., matching photo proportions)

2. **Typography Sizing Guidelines:**

- Base size should maintain legibility at normal reading distance

- Line spacing (leading) must accommodate comfortable eye movement:

* Tight leading causes vertical eye strain and disorientation

* Proportional spacing requirements:

- Short lines: reduced leading

- Long lines: increased leading

3. **Common Typographic Pitfall:**

- Formal documents should never set handwritten fonts in all caps

- Example shown (left wedding invitation) demonstrates this poor practice:

* Creates jarring visual disruption

* Compromises professional appearance

Fig. 3.7- The example

Font sample manuals offer designers clear and intuitive visual demonstrations of font styles, point sizes, line spacing, and other typographic elements. These visual references serve as valuable guides, enabling designers to make well - informed and professional typographic decisions.

Appropriate line spacing is crucial for enhancing text readability. When laying out text, sufficient space should be allocated to ensure a seamless and comfortable reading experience. Designers can draw inspiration and find optimal line - spacing solutions by referring to the illustrative examples in font sample manuals.

Fig. 3.7 - The Type Specimen Sheet

Week 3

Typo_4_Text Part 2：

1. Line Space vs. Leading

In typography, line space and leading are frequently mistaken for each other, yet they have distinct definitions. Leading specifically refers to the vertical distance between the baselines of consecutive text lines—a measurement that focuses solely on the gap separating lines. On the other hand, line space encompasses the full vertical extent of text, including the tallest ascenders and lowest descenders. This means it accounts for the overall height occupied by each line, not just the space in between. Understanding this difference is crucial for enhancing text legibility and refining visual layouts, ensuring that designs balance readability with aesthetic harmony.

Fig. 4.1 - Leading vs line space Leading vs line space

2. Indentation and Alignment

Indentation serves as a visual cue to signal the start of a paragraph or section. It is usually configured to be proportional to the font size or line spacing. By doing so, it effectively organizes the text, establishing a clear hierarchical structure. At the same time, it contributes to a balanced layout, reducing uneven edges (known as "ragging") on either side of the text block, thus enhancing the overall aesthetic appeal and readability.

3. Orphans & Widows

In the field of typography, orphans and widows are pesky layout anomalies that designers strive to eliminate. A widow is a solitary line of text left hanging at the top or bottom of a column, detached from the main body of the text. An orphan, on the other hand, is the first line of a paragraph that stands alone at the end of a column, separated from the subsequent lines of the same paragraph.

To rectify these issues, subtle modifications to letter or word spacing can be implemented. These adjustments help to redistribute the text, improving the visual rhythm and flow of the layout. Nevertheless, it's important to exercise restraint; these changes should be kept to a minimum, preferably no more than three instances, to ensure that the visual harmony and legibility of the text remain intact.

Fig. 4.2 - The orphans and widows The orphans and widows

4. Highlighting Text

To emphasize key information, use techniques like italics, bold type, color changes, underlines, or borders. These draw attention to critical points. When using color, avoid overly bright shades (e.g., yellow), as they can hinder readability.

For colored backgrounds, ensure the text maintains a consistent left reading axis to preserve visual flow and balance, keeping the content easy to follow.

Fig. 4.3 - Highlighting Text Highlighting Text

5. Headline within Text

A clear structure enhances key information. Titles use larger or bold fonts, while subtitles may be smaller or italicized for readability.

The A-Head

• Represents the main topic.

• Uses a larger font size than body text.

• Styled in lowercase with bold formatting for strong visual emphasis.

The B-Head

• Serves as a subheading for new points.

• Set in lowercase, with styling like italics, bold serif, or bold sans-serif fonts.

• Differentiates from A-Head and body text.

The C-Head

• Indicates detailed points or sub-sections.

• Uses lowercase letters, styled with italics, bold serif, or bold sans-serif fonts.

• Distinguishes from higher-level headings (A/B-Heads).

Fig. 4.4 -A A-Head

Fig. 4.5 - B -Head

Fig. 4.6 - C -Head

A clear, well-structured headline is vital for setting a text’s context and organization. It guides readers through content and elevates the overall reading experience.

Using a hierarchical title system (e.g., A, B, C levels) adds structure and context, helping readers follow information flow and grasp relationships between sections.

Fig. 4.7 - Headline within Text Headline within Text

6. Cross Alignment

Aligning headlines, captions, and body text vertically strengthens page structure and creates a consistent rhythm, enhancing clarity and visual flow.

Fig. 4.8 - Example of Cross Alignment 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 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 Apex/Vertex

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

Fig. 4.2.4 - Arm

Typography Basics

Uppercase Letters

Uppercase letters include all capital forms of the alphabet, along with certain accented vowels, the cedilla (ç), the tilde (ñ), and ligatures such as æ and œ.

Fig. 4.2.20 - Uppercase

Lowercase Letters

Lowercase letters represent the same character set as uppercase letters but in smaller forms, better suited for continuous text.

Fig. 4.2.21 - Lowercase

Uppercase Numerals (Lining Figures)

These numerals align with uppercase letters in height and have uniform spacing, making them ideal for tabular data and all-caps text settings.

Fig. 4.2.22 - Small Capitals

Uppercase Numerals (Lining Figures)

These numerals align with uppercase letters in height and have uniform spacing, making them ideal for tabular data and all-caps text settings.

Fig. 4.2.23 - Uppercase Numerals

Lowercase Numerals (Old-Style Figures)

These numerals have ascenders and descenders, aligning with the x-height of lowercase letters. They blend well in mixed-case text and are more common in serif fonts.

Fig. 4.2.23 - Lowercase Numerals

Italic Styles

Italic styles originated from 15th-century Italian cursive writing and are now standard in most typefaces, typically based on Roman letterforms.

Fig. 4.2.24 - Italic styles

Punctuation and Special Characters

Most fonts include basic punctuation, but the availability and design of special characters vary. Always review a font’s full character set before use.

Fig. 4.2.25 - Punctuation and special characters 

Ornaments

Ornamental glyphs are decorative elements used in designs like invitations or certificates. They are usually provided as a separate font within a typeface family. Classic typefaces like Adobe Caslon Pro may include them as part of the full font set.

Fig. 4.2.26 - Ornaments

Describing Typeface Styles

Roman

Derived from ancient Roman inscriptions, Roman type is the standard upright style. Lighter versions are often called 'Book'.

Italic

Italic styles are based on Renaissance-era Italian handwriting, featuring more fluid, cursive shapes.

Oblique

Oblique type is a slanted version of Roman, lacking the cursive structure of true italics.

Boldface

Boldface type uses thicker strokes than Roman. Variations include semibold, medium, black, extra bold, and super. In some fonts like Bodoni, the heaviest weight is labeled 'Poster'.

Light

Light weights have thinner strokes than standard Roman. Ultralight styles are often labeled '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 readability and aesthetic quality in mind. Studying these classics builds a solid foundation in typography and deepens appreciation for other typefaces as your skills develop.

Fig. 4.2.30 - 10 Typefaces

---

INSTRUCTIONS

---

EXERCISES

Task 1: Type Expression

SKETCHES

SHAKE

• Focus: Dynamic motion (shaking/trembling).

• Design direction: Broken/angled letterforms, overlapping strokes to imply vibration.

WALK

• Inspirations: Footstep rhythm, road textures, shadows, wind.

• Styles explored:

1. Stamped “footprint” letters with staggered spacing.

2. Linear, road-like horizontal lines in the baseline.

3. Shadowed letters to mimic walking posture.

4. Flowing strokes to represent wind during movement.

MELT

• Visual cues: Melting wax, dripping candles, lava, steam.

• Design elements: Soft, drooping letterforms, wavy edges, “liquid” pools under letters.

STRETCH

• Concepts: Elongation, flexibility, vine growth, diffusion.

• Design approach: Extended ascenders/descenders, curved/leaning letters, overlapping forms to suggest expansion.

week1

work

- To decide on my 4 words and chosen designs, I explored the different types of ways to express the meanings.

week2

work

Digital version：

Final digital version：

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

HEAD LINE

Typeface: ITC Garamond Std

Font/s: Ultra Condensed Italic

Type Size/s: 24pt

Leading: 36pt

Paragraph spacing: -

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: 20 mm top + left + right, 50 mm bottom

Columns: 2

Gutter: 5 mm

Text Formating - PDF, Week04

---

FEEDBACKS

Week 1

General Feedback

Mr. Max initiated the class by outlining the module's core content and meticulously clarifying the requirements of Task 1. He then introduced the feedback form, providing a detailed, step - by - step demonstration of its usage. To inspire us and enhance our understanding, he showcased several electronic portfolio works created by previous students. Subsequently, he guided the class through the process of building our own electronic portfolios on the Blogger platform. The class was well - organized, offering us a distinct roadmap for future tasks.

Week 2

General Feedback

We received valuable feedback and suggestions from the professor regarding our sketches and learned techniques for transforming them into digital designs.

Specific Feedback

During the critique, it was pointed out that my sketches required refinement. When creating the sketches, I failed to utilize the inherent communicative power of the font. Instead, I relied on additional elements to convey the font's description. Consequently, I made subsequent improvements.

Week 3

General Feedback

This week, I presented my refined sketch to Mr. Max. My focus was on ensuring that the font itself could effectively convey the intended information, eliminating the need for excessive decorative elements.

Specific Feedback

Mr. Max approved the "SHAKE""MELT"and"WAlK" design, but noted that the other designs still needed further enhancement.

Week 4

General Feedback

This project offered a delightful and unrestricted creative journey, enabling us to thoroughly delve into our concepts. Despite facing certain challenges as it was our initial attempt at creation, we ultimately managed to bring our work to fruition.

Specific Feedback

The final outcome is, on the whole, quite satisfactory. Nevertheless, to enhance the presentation and achieve an even better display effect, I still made several adjustments.

Week 5

General Feedback

This week, Mr. Max used the example brief shared by Mr. Vinod on Teams to walk us through best practices for formatting text in Adobe InDesign for Task 1.He also provided an initial introduction to Task 2, taking time to review the provided templates and clarify key points in the instructions for the new assignment.

Specific Feedback

Mr. Max reminded us that when working with English text, words should not be broken across lines in ways that disrupt readability — a habit that differs from how text might be handled in Chinese layout conventions.He also highlighted the importance of intentional white space: in a well-designed layout, empty space should contribute meaningfully to structure and flow, not simply exist as unused background.

---

REFLECTIONS

Experience

Initially, I delved into the fundamentals of typography. However, I soon discovered that it presented unique challenges, as I was tasked with creating fonts using software with which I had limited prior experience. Through consistent practice and repetition, I gradually acquired the skills to design various font styles and learned how to leverage Adobe Illustrator for digital creative exploration. The step - by - step instructional videos we watched were instrumental, guiding us through the process and making it more accessible.

Observation

During the learning journey, I came to realize that clearly conveying both the meaning of a word and my personal ideas was no easy feat. Crafting artistic typography with Adobe Illustrator proved far more arduous than sketching by hand. Different tools and commands within the software could yield vastly different results, and even seemingly similar features could produce contrasting outcomes. Mastering these functions required a significant investment of time and effort.

Findings

Upon completing the exercise, my comprehension of typography deepened substantially. I now recognize its crucial role in graphic design, advertising, and communication. I have transitioned from a state of digital inexperience to a more profound understanding of digital technologies, and the learning process has been incredibly rewarding, enabling me to amass a wealth of knowledge.

---

FURTHER READINGS

Typography Reflection: Typography Basics by David Creamer

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."

Visual Reference Examples:

Figure: Example from Typography Basics (Page 1)

 

Figure: Example from Typography Basics (Page 2)

 

Figure: Example from Typography Basics (Page 3)