Advanced Typography: Task 1 Exercises

April 21, 2025

Advanced Typography: Task 1 Exercises

✩ 21/4/25 - 11/5/24 (Week 1 - Week 3)

✩ WONG MEI YEE 0367857

✩ Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

✩ Task 1 - Typography Systems & Type & Play

TABLE OF CONTENTS

Lectures
Instructions
Task 1

EXERCISE 1 - Typography Systems
EXERCISE 2 - Type and Play

Feedback
Reflections
Further Reading

Lectures

✩ WEEK 1- Typographic Systems

Why Use Typography Systems?

Helps with hierarchy, legibility, contrast.
Like rules in architecture—guide choices.
Structure builds design intuition over time.

The 8 Systems:

Axial – Text along a line (straight or curved).
Radial – Text radiates from a central point.
Dilatational – Circular layout from a center; creates visual hierarchy.
Random – No clear structure, looks chaotic but allows freedom.
Grid – Common system; uses columns/rows for clean alignment.
Transitional – Info in horizontal bands or layers.
Modular – Uses same-size units, easy to move around.
Bilateral – Symmetrical text along a vertical axis (e.g., invites).

✩ WEEK 2- Typographic Composition

Typography = Letter design + Text arrangement

Typographic composition = Placing text within space (print, screen, etc.)

Design Principles:

✦ Use: Emphasis, alignment, symmetry, hierarchy

✦ Optional: Repetition, perspective

Rule of Thirds:

✦ Divide space in 3×3 grid

✦ Place key elements at intersections

Typographic Systems:

✦ Grid System (most common): clarity, order, balance

✦ Postmodern systems: chaos, intuition, expression

✦ Environmental Grid: use surroundings (architecture, artwork) to guide layout

Core Idea:

✦ Balance structure and creativity — know when to follow rules, when to break them.

✩ WEEK 3- Context & Creativity

Handwriting & Typography
Handwriting is foundational to typography. Early mechanical type was designed to imitate hand-drawn letters. The shapes and strokes of letterforms were influenced by the tools and materials used, setting the standards for form, spacing, and conventions in type.

Historical Evolution of Writing Systems

Cuneiform – The earliest true writing system, evolving from pictograms; written left to right.
Hieroglyphs – Egyptian ideograms representing objects, ideas, and sounds.
Early Greek – Boustrophedon style (left to right, then right to left), drawn freehand with no serifs.
Roman Uncials – Rounded letterforms for faster writing.
English Half-Uncials – More slanted and condensed forms.
Carolingian Minuscule – Influential style that became the basis of lowercase Roman type.
Blackletter – Dense, vertical letterforms designed to save space and materials.
Movable Type – Originating in Asia (China, Korea, Japan); Korea advanced it by casting bronze type.

Evolution of Scripts by Region

Middle Eastern Scripts – Influenced by Egyptian writing; letters represented sounds.
Chinese Script – Evolved from Oracle Bone to Seal, Clerical, Traditional, and Simplified forms.
Indus Valley Script – Ancient and undeciphered; likely logo-syllabic.
Brahmi Script – Originated in India; the root of many South, Southeast, and East Asian writing systems.

Multiscript Design & Cultural Context

Multiscript Typography – Combines Latin and vernacular scripts in a unified design system.
Local Movements – Designers are encouraged to study their own cultural histories and communities for inspiration.
Creative Insight – Begin by observing one’s surroundings and drawing from collective heritage.

✩ WEEK 4- Designing Type

Why Design Typefaces?
According to Xavier Dupre (2007), there are two key reasons:

Social Responsibility – Type must be legible and constantly improved.
Artistic Expression – Type design is also a creative form of art.

Notable Typefaces & Their Purpose

Frutiger (Adrian Frutiger, 1968)
Designed for French airports—legible from various distances and under poor lighting.
Verdana (Matthew Carter)
Made for screen use—high legibility at small sizes; designed around pixel constraints.
Johnston Sans (Edward Johnston, 1916)
Created for London’s Underground signage—simple, bold, and functional.

The Type Design Process

Research – Understand type history, anatomy, terminology, and purpose.
Sketching – Can be traditional (pen/ink) or digital (e.g., Wacom).
Digitisation – Use tools like FontLab, Glyphs, or Illustrator; focus on counterforms.
Testing – Refine through prototyping; check for legibility/readability.
Deploy – Address any remaining issues post-launch.

Typeface Construction

Based on grid systems (e.g., Roman capitals in 8×8 cells with circular guides).
Letters must be visually corrected for spacing (fitting) and alignment, especially between curved and straight strokes.
Alphabet characters can be grouped by form and structure (capitals vs. lowercase).

Context & Creativity in Type Design

Intrinsic Motivation – Personal drive or problem-solving through design.
Extrinsic Motivation – Commissioned or assigned work.

Understanding the purpose, audience, and limitations is crucial to successful typeface design.

Instructions

Figure 2.1, MIB, Week 1 (21/4/2025).

Task 1

EXERCISE 1 - Typography Systems

ⓘ Content Details:

The Design School,

Taylor’s University

All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or

Russian Constructivism and Graphic Design

Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM

Suzy Sulaiman, 11AM-12PM

June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
Manish Acharia, 11AM-12PM

Lecture Theatre 12

I decided to choose The ABCs of Bauhaus Design Theory for the title.

3.1 Research:

Figure 3.1.1, reading on Typographic Systems by Kimberly Elam, Week 1(21/4/2025).

Figure 3.1.1 presents a reference from Kimberley Elam’s Typographic Systems. The visual and structural examples in the book provided me with clarity on how each system is organised. This was further supported by insights shared during the lecture, which helped me connect theory to practical application.

3.2 Process Work:

1. Grid System

Font Used: Univers Lt Std

Figure 3.2.1, Process of Grid System, Week 1(21/4/2025).

I started by setting up a consistent grid system with equal column widths and gutters to create a clear structure. All elements, including the headline, speaker names, and time details, were aligned to the grid lines. I paid attention to visual hierarchy by placing the headline at the top and ensuring balanced white space across the layout. This system focuses on legibility and clarity, with a formal and rational appearance.

2. Transitional System

Font Used: Gill Sans Std

Figure 3.2.2, Process of Transitional System, Week 1(21/4/2025).

I experimented with shifting alignments across the layout to create a sense of movement. The placement of each text block gradually transitions from left to right, or from top to bottom, while still maintaining logical flow. I focused on preserving clarity even as the eye is guided along a changing path.

3. Bilateral System

Font Used: Futura Std, Univers Lt Std

Figure 3.2.3, Process of Bilateral System, Week 1(21/4/2025).

Using vertical symmetry as the foundation, I designed half of the composition using aligned rectangles and mirrored it to create balance. Text elements were placed inside these shapes carefully, ensuring legibility and maintaining equilibrium on both sides of the central axis. I adjusted font sizes to make sure the hierarchy was still clear despite the symmetry.

4. Dilatational System

Font Used: Bodoni Std, Univers Lt Std

Figure 3.2.4, Process of Dilatational System, Week 1(21/4/2025).

I drew multiple circular paths to guide the text placement. The headline and key information were arranged to follow these concentric curves, radiating outwards. I tested different curvatures and spacing to ensure readability while giving a sense of expansion from a central point.

5. Random System

Font Used: Bodoni Std, Univers Lt Std

Figure 3.2.5, Process of Random System, Week 1(21/4/2025).

To explore organised chaos, I broke away from grids and alignment rules. Text blocks were scattered across the canvas in a seemingly unpredictable way, but still with attention to hierarchy and balance. I varied text size and direction to maintain contrast while avoiding confusion.

6. Radial System

Font Used: Gill Sans Std, Univers Lt Std

Figure 3.2.6, Process of Radial System, Week 1(21/4/2025).

A central point was chosen from which visual ‘rays’ extended outward. I used these lines to guide the placement of text segments along the rays. The design mimics the structure of a sunburst, pulling the viewer's eye outward from the centre while retaining legibility.

7. Modular System

Font Used: Univers Lt Std

Figure 3.2.7, Process of Modular System, Week 1(21/4/2025).

8. Axial System

Font Used: Bodoni Std, Univers Lt Std

Figure 3.2.8, Process of Axial System, Week 1(21/4/2025).

I established a strong central axis that runs vertically across the composition. Text elements were arranged to the left and right of this axis, maintaining a sense of flow along it. I paid attention to hierarchy by using different text weights and sizes to guide the reader’s eye from top to bottom.

3.3 Final Outcome:

EXERCISE 1 FINAL JPEG

Figure 3.3.1, Grid System, Week 1(21/4/2025).

Figure 3.3.2, Transitional System, Week 1(21/4/2025).

Figure 3.3.3, Bilateral System, Week 1(21/4/2025).

Figure 3.3.4, Dilatational System, Week 1(21/4/2025).

Figure 3.3.5, Random System, Week 1(21/4/2025).

Figure 3.3.6, Radial System, Week 1(21/4/2025).

Figure 3.3.7, Modular System, Week 1(21/4/2025).

Figure 3.3.8, Axial System, Week 1(21/4/2025).

EXERCISE 1 FINAL PDF (WITHOUT GRID)

Figure 3.3.9, Final PDF without grid, Week 1(21/4/2025).

EXERCISE 1 FINAL PDF (GRID)

Figure 3.3.10, Final PDF with grid, Week 1(21/4/2025).

EXERCISE 2 - Type and Play

4.1.1 Part 1:

I chose this photograph of a modern architectural structure in Singapore because of its strong geometric composition and the way it plays with light and shadow. The image features sharp angles, layered forms, and a rhythmic use of concrete surfaces that convey a sense of modernity and control. Its abstract and minimal appearance allows for multiple interpretations while still grounding the design in a real, physical space.

The building's unique perspective and repetition of forms felt visually compelling and aligned with the conceptual direction I wanted to explore in my design work.

Figure 4.1.1, reference image, Week 2 (29/4/2025) image's link.

4.1.2 Process Work:

I started the project by importing the selected architectural image into Adobe Illustrator. Using the Pen Tool, I began identifying and tracing shapes from the structure that resembled parts of letterforms—paying close attention to negative space, angular cuts, and repeated geometric features.

Figure 4.1.2.1, Process Work, Week 2 (29/4/2025) .

Once I had extracted a few initial forms, I experimented with how these could be abstracted or combined to create recognisable letterforms while still retaining the architectural essence of the source image. I kept the process iterative, refining the weight, balance, and spacing of each letter as the typeface developed.

Figure 4.1.2.2, Process, Week 2 (29/4/2025) .

Figure 4.1.2.3, Process, Week 2 (29/4/2025) .

I referenced the Bonido font during refinement, using it as a guide for proportion and alignment—particularly for setting the x-height, cap height, ascenders, and descenders. This helped me ensure consistency while still keeping the experimental, structural feel of the design.

Figure 4.1.2.4, Process Work, Week 2 (29/4/2025) .

4.1.3 Final Outcome of Part 1:

Figure 4.1.3.1, Process Work, Week 2 (29/4/2025) .

Figure 4.1.3.2, RefinIng Process , Week 2 (29/4/2025) .

Figure 4.1.3.3, Final Outcome , Week 2 (29/4/2025) .

Figure 4.1.3.4, Final Outcome , Week 2 (29/4/2025) .

4.2.1 Part 2:

For Part 2, I searched for a suitable background image on Pexels. Mr. Vinod advised that the background should visually connect with the typeface, meaning that the letterforms should clearly look like they were extracted or inspired from the chosen image.

Figure 4.2.1, Reference image , image's link, Week 3 (6/5/2025) .

4.2.2 Process Work:

I eventually selected an image of a modern "honeycomb facade"-like architectural structure because of its strong, repeating geometric pattern and bold structural lines. After downloading the photo, I brought it into Photoshop where I applied some filters and added noise to enhance the cinematic texture.

Figure 4.2.2.1, Process Work, Week 3 (6/5/2025) .

Figure 4.2.2.2, Process Work, Week 3 (6/5/2025) .

To complete the poster feel, I also searched online for film-related logos (such as DVD Video, and Apple TV), and used image trace in Illustrator so they would match the overall visual style of the project.

Figure 4.2.2.3, Process Work, Week 3 (6/5/2025) .

Figure 4.2.2.4, Outcome, Week 3 (6/5/2025) .

4.2.3 Final Outcome of Part 2:

Exercise 2 Final JPEG

Figure 4.2.3.1, Final Outcome JPG, Week 4 (13/5/2025) .

Exercise 2 Final PDF

Figure 4.2.3.4, Final Outcome PDF , Week 4 (13/5/2025) .

Feedback

✩ WEEK 1

General Feedback

Mr. Vinod introduced Task 1 and outlined the expectations for the subject. He also asked us to complete all eight versions of the typography systems by the following week.

✩ WEEK 2

General Feedback

During the week, Mr. Vinod reviewed our first exercise for Task 1 and provided personalised feedback. He encouraged us to listen not only to our own critiques but also to others’, as the advice could be relevant across the board. He reminded us to keep our blog posts up to date to prevent last-minute submissions. We were also given an overview of what to expect in Exercise 2.

Specific Feedback

Mr. Vinod pointed out that when using grid systems, the layout should hold its structure even without visual elements like lines or images. If a composition feels off-balance or draws the eye out of frame, it likely lacks strong fundamentals. He reminded us to prioritise key content and to review our layouts within full context. He also noted that my dilatational layouts were not compositionally effective.

✩ WEEK 3

General Feedback

Mr. Vinod reminded us of the importance of updating our blog entries each week. Failing to do so may result in a deduction of marks.

Specific Feedback

My initial design featured text in lowercase. However, Mr. Vinod advised me to switch it to uppercase for better impact.

✩ WEEK 4

General Feedback

Mr. Vinod reviewed our Exercise 2 this week. He noted that some of the reference images didn’t clearly tie in with the letterforms, which made the overall concept less convincing. He also observed that many posters lacked interaction between the typography and imagery, resulting in a disconnected feel. He encouraged us to explore more dynamic, engaging ways to integrate type and visuals. Following the feedback session, he briefed us on Task 2. We’ll begin by creating a personal mind map to help generate ideas for a wordmark, which should be simple, elegant, and purposeful.

Specific Feedback

For my work, Mr. Vinod pointed out that the background image I used in Exercise 2 didn’t relate well to the letterform design. He advised me to ensure there’s a stronger connection between the two. Additionally, he mentioned that my type was too thin and needed to be made bolder for better visibility.

Reflections

Experience

The Type & Play task in particular challenged me to view man-made structures in a completely different light—not just as buildings, but as sources of letterforms. I selected a modern architectural image of a honeycomb-style facade from Singapore, which became the foundation for my type design. In Illustrator, I extracted crude shapes from the structure and iteratively refined them into a custom letterform set, using the Bonido font as a reference. At the same time, working on typographic composition taught me how to balance structure and expression. Using InDesign, I explored layout systems such as the grid and experimented with alignment, contrast, and hierarchy. Translating abstract principles into visual logic took patience, but with the guidance of Mr.Vinod and valuable classroom feedback, I gained confidence in trusting my instincts while grounding my designs in strong compositional choices.

Observations

One of the most inspiring aspects of this project was observing the creativity and diversity in my classmates’ approaches. Some extracted type from organic sources like leaves or noodles, while others—like me—used architectural elements. It showed me that typography could come from almost anywhere, and that its potential for storytelling is limitless. I also noticed how compositional choices greatly affect a viewer’s reading experience. Even small adjustments—like shifting text slightly off-center or varying weight and spacing—can transform the emotional tone of a design. Watching others use postmodern layouts or asymmetrical balance encouraged me to be more experimental, while still respecting clarity and communication.

Findings

This task helped me realise that typography is not just about arranging letters—it’s about visual storytelling with intention. Extracting type from an image pushed me to think analytically, while the iterative design process taught me how much detail matters. I learned to consider elements like x-height, cap height, ascenders and descenders, and how consistency across these areas builds coherence in a typeface. On the composition side, I came to appreciate how grid systems provide a logical framework for creativity. At the same time, exposure to more expressive, postmodern styles reminded me that breaking the rules—when done purposefully—can be just as powerful. Most importantly, I found that successful typography demands both technical precision and creative freedom. Every decision, from spacing to alignment, must serve the story I want to tell.