Advanced Typography - Task 1 Exercises

|| 21/4/2025 - //2025 (Week 1 - Week 5)

|| Te Li Wen, 0367811

|| Advanced Typography

|| Exercises

1. LECTURES

WEEK 1: TYPOGRAPHIC SYSTEMS

"All design is based on a structural system." – Elam, 2007

Typography operates within systems—structures that guide how visual elements interact. These systems are crucial for effective communication, functioning similarly to shape grammars in architecture. They offer a unique set of rules that give designs purpose, focus, and clarity in decision-making. When used appropriately, they serve as valuable guidelines.

The Eight Major Typographic Systems
(With infinite possible permutations)

Axial

Elements are organized along a single axis (left/right).

The axis may be straight or curved.

Radial

All elements extend from a central focal point.

Text often follows the radius outward from the center.

Dilatational

Elements radiate in circular patterns from a central point.

Text follows the circumference, allowing for hierarchy inside-out or outside-in.

Random

No clear pattern or consistent relationship between elements.

Appears chaotic but can be intentional.

Grid

Structured through vertical and horizontal divisions.

Enables precise alignment and consistency.

Modular

Uses standardized units or “modules,” similar to uniform blocks.

Content can shift within the system as long as it fits within a unit.

Transitional

Informal layout using layered “bands” of information.

Think of stylized wind currents—text flows along implied lines.

Bilateral

All elements are arranged symmetrically on an axis.

WEEK 2: TYPOGRAPHIC COMPOSITION

What is a good composition?

By organising textual content and create visually attractive and interactive compositions.

Design Composition

Rule of Thirds

Layout divided into three vertical and horizontal sections
Key elements positioned at line intersections
Not ideal for structuring typographic systems

Grid System

Also known as Raster Systeme, originally from letterpress printing frameworks
Evolved into what is now recognised as the Swiss (Modernist) typography style
Offers endless possibilities for customisation

Environmental Grid

Created by analysing and referencing real-world structures (e.g., architecture, artworks)
Can incorporate both linear and organic shapes
Embeds contextual relevance into design by connecting visuals to specific environments

Form and Movement

Builds upon established grid frameworks
Investigates the various creative directions grids can provide
Aims to break rigid perceptions of grid-based design

WEEK 3: CONTEXT AND CREATIVITY

Handwriting

Handwriting is studied because the earliest mechanically produced letterforms were deliberately designed to imitate it. This imitation established handwriting as the foundational standard in terms of form, spacing, and conventions—elements that mechanical type sought to replicate.

Figure 1.0 Evolutions of Alphabets (Week 3, 17/5/2025)

Programmers and Type Design

An increasing number of vernacular scripts are being developed by major technology companies, such as Google. This trend reflects a growing emphasis on the production of vernacular and multiscript typefaces, designed to address contexts in which written communication occurs in both vernacular and Latin scripts, or exclusively in the vernacular. These efforts contribute to greater linguistic inclusivity and accessibility in digital typography.

Cuneiform (c. 3000 BCE)

The earliest system of actual writing, known as cuneiform, was used across a number of languages in ancient Mesopotamia. Its distinctive form resulted from the technique of pressing the blunt end of a reed stylus into wet clay tablets, producing wedge-shaped marks that gradually evolved into a complex script. This method of inscription not only shaped the visual character of the script but also influenced the development of writing systems that followed.

Hieroglyphics (2613–2160 BCE)

Hieroglyphics, the writing system of ancient Egypt, developed during the period 2613–2160 BCE, was closely integrated with the art of relief carving. This visually rich script combined both rebus symbols—where images represent words or syllables—and phonetic characters that conveyed specific sounds. Hieroglyphics were used in three primary ways: as logograms representing entire words, phonograms for individual sounds, and determinatives to clarify meaning, particularly in religious, monumental, and ceremonial inscriptions.

Ideograms: Symbols that represent the literal meaning of an object or concept through direct visual depiction.
Determinatives: Non-phonetic signs used to indicate the general category or idea of a word, helping to clarify its meaning.
Phonograms: Characters that represent specific sounds, used to spell out individual words phonetically.

WEEK 4: DESIGNING TYPE

In 2007, Xavier Dupré explained that type design serves both a functional and artistic purpose. He believed it carries a social responsibility to maintain and improve legibility, ensuring clear communication. At the same time, he saw it as a form of artistic expression, allowing designers to showcase creativity and personal style through letterforms.

Frutiger by Adrian Frutiger

Figure 1.1 Frutiger (Week 3, 17/5/2025)

Designed by Swiss type designer Adrian Frutiger in 1968.

Created specifically for signage at a French airport.

Purpose: To develop a clean, distinctive, and highly legible typeface.

Easily readable from both close up and far away.

Considerations / Limitations:

Letterforms needed to remain clear in poor lighting conditions.

Needed to be legible while the viewer was moving quickly past the signs.

Verdana by Matthew Carter

Designed by Matthew Carter to solve specific technical challenges.

Purpose: To ensure high legibility at very small sizes on digital screens.

Developed in response to the rise of the internet and electronic devices.

Considerations / Limitations:

Verdana’s design is influenced by the pixel grid, not traditional tools like the pen, brush, or chisel.

Optimized for on-screen clarity, especially at low resolutions.

General Process of Type Design:

1. Research

2. Sketching

3. Digitization

4. Testing

5. Deploy

Research

Understand the fundamentals: type history, anatomy, conventions, terminology, sidebearing, metrics, hinting, etc.
Determine the purpose of the typeface and its intended usage.
Study existing fonts for inspiration, reference, context, and usage patterns.

Sketching

Some designers start with traditional tools (e.g. pens, brushes, ink, paper), then digitize their sketches by scanning.
Others begin directly with digital tools, though this can sometimes limit the natural flow of hand-drawn strokes.

Digitization

Tools like FontLab and Glyphs are commonly used.
Equal attention must be given to both letterforms and counterforms, as readability depends heavily on the negative space.

Testing

A critical part of the design thinking process.
Includes prototyping, refining, and correcting based on results.

Focus on readability and legibility, especially depending on whether the typeface is for display or text use.

Week 5: Advanced Typography Perception & Organisation

Perception is defined as how something is regarded, understood, or interpreted. In the context of typography, it prompts the question: is perception simply what we see and therefore understand, or is it something we are guided or even manipulated into seeing and understanding?

Contrast

Typography uses various methods to create visual contrast, including:

Light / Bold
Condensed / Extended
Organic / Machined
Roman / Italic
Small / Large
Negative / Positive
Serif /Sans Serif
Ornate / Simple
Red / Blue

Key Type of Contrast

Size: Larger elements naturally draw attention before smaller ones.

Weight: Bold text stands out among lighter styles, even within the same typeface.

Form: Variations such as uppercase vs lowercase, roman vs italic, or condensed vs expanded type.

Structure: The distinct letterforms between different typefaces.

Texture: Created by combining contrasts of size, weight, form, and structure within blocks of text.

Direction: Contrast can also be generated through opposing orientations such as vertical, horizontal, or diagonal.

Colour: A secondary colour is often less dominant than black or white, so choosing text and background colours carefully is essential.

Organisation & Gestalt Principles

Gestalt, a German word, refers to the way elements are "placed" or "put together" to form a unified whole. In design, Gestalt principles explain how we visually perceive and organize information. These principles help designers create compositions that feel coherent, intentional, and easy to understand.

The key Gestalt principles include the Law of Similarity, Law of Proximity, Law of Closure, Law of Continuation, Law of Symmetry, and the Law of Simplicity (also known as Prägnanz).

Similarity

The human eye tends to group similar elements—such as those with the same shape, color, size, or orientation—into a cohesive unit, even if they are spaced apart. Our brain instinctively creates a connection between elements that share common characteristics.

Continuation

We naturally follow lines, curves, or sequences in a design. This principle describes how the eye prefers a continuous flow, guiding the viewer along a visual path without interruption.

Closure

Our mind tends to complete incomplete shapes or visuals. When parts of a design are missing or obscured, the viewer fills in the gaps to perceive a whole, unified form.

Proximity

Elements that are placed close to each other are perceived as related or part of a group. Conversely, elements that are spaced further apart are seen as unrelated. Proper use of proximity strengthens visual hierarchy and clarity.

2. INSTRUCTIONS

Module Information Booklet below

https://drive.google.com/file/d/1nd3fZ8PxqWPcVXoOJb25KxRR7eZu1qTb/preview

3. Process Work

CONTENT

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

Mohd., 10AM-11AM

Suzy Sulaiman, 11AM-12PM

June 25, 2021

Lim Whay Yin, 9AM-10AM

Reza, 10AM-11AM

Manish Acharia, 11AM-12PM

Lecture Theatre 12

Ideation:

I created sketches for each of the designs we were tasked to make.

Sketches

Axial

Figure 1.2 Axial Sketch (Week 3, 17/5/2025)

Axial was the easiest since I just needed to follow a line and make sure it is neatly placed.

Radial

Figure 1.3 Radial Sketch (Week 3, 17/5/2025)

As for radial, it was quite tedious to make multiple individual lines on each dots and align it properly without colliding with the other words.

Dilatational

Figure 1.4 Dilatational Sketch (Week 3, 17/5/2025)

When I started dilatational, I imagine it to be difficult to make but I was wrong. It was pretty simple, I needed to create circles and add texts onto the lines.

Grid

Figure 1.5 Grid Sketch (Week 3, 17/5/2025)

For grids, I wanted it to look clean and simple so I made lines above and below the title to hint that the title has its own box.

Modular

Figure 1.6 Modular Sketch (Week 3, 17/5/2025)

I was quite confused on what modular was and had to look up multiple references from previous seniors to understand how modular works. After understanding, I went ahead and followed the sketch I did and adding some minor changes to the placement of the title.

Transitional

Figure 1.7 Transitional Sketch (Week 3, 17/5/2025)

It was smooth sailing as I moved on to transitional. I made the text look like a flowing gust of wind moving to the right.

Bilateral

Figure 1.8 Bilateral Sketch (Week 3, 17/5/2025)

Bilateral was pretty simple as everything just had to be symmetrical and balanced. So I decided to place it in the center and have a few words above the title to look like it is a weighing instrument.

However, the first design was wrong so I had to change the placements slightly and made it equal.

Random

Figure 1.8 Random Sketch (Week 3, 17/5/2025)

Random was the most hardest and the easiest compared the others. I wanted to make the words all jumbled up yet still comprehensible to the viewers eye. I had the most fun while making this design.

Final Typographic System Outcome:

Figure 1.9 Axial System Final (Week 3, 17/5/2025)

Figure 1.9 Radial System Final (Week 3, 17/5/2025)

Figure 2.0 Dilatational System Final (Week 3, 17/5/2025)

Figure 2.1 Transitional System Final (Week 3, 17/5/2025)

Figure 2.2 Random System Final (Week 3, 17/5/2025)

Figure 2.3 Bilateral System Final (Week 3, 17/5/2025)

Figure 2.4 Grid System Final (Week 3, 17/5/2025)

Figure 2.5 Modular System Final (Week 3, 17/5/2025)

Figure 2.6 Typographic System Final (JPEG) (Week 3, 17/5/2025)

Figure 2.7 Typographic System Final (Grid / Baseline) (Week 3, 17/5/2025)

Type & Play

Chosen photo:

Figure 2.8 Chosen Extraction Picture (Week 3, 17/5/2025)

I tried taking various pictures in my house but was not satisfied with how they looked and I finally stumbled on a dying plant in a pot and decided to take a picture of it.

Letters Extracted:

Figure 2.9 Letters Extraction (Week 3, 17/5/2025)

I reduced the image opacity to 50% so I could see the lines I drew while extracting elements from it.

Figure 3.0 Process Transitions (Week 3, 17/5/2025)

I overlayed the Typeface I chose that resembles the extracted letters and slowly transitioned all my design until it became balanced.

Exploration:

Figure 3.1 Letters Exploration (Week 3, 17/5/2025)

I followed our previous seniors method of process on how they transitioned the letters from the extracted to fusing the extracted version with the referenced text I chose.

Figure 3.2 Fixed Design (Week 3, 17/5/2025)

My tutor said I should balanced out the thickness. I followed his advice and made the "I, V and Y" slightly more thicker so it matches well with the other designs.

After my design was approved, I moved on to making the poster.

Figure 3.3 Two Composition Ideas (Week 3, 17/5/2025)

I ended up creating two compositions since I couldn't settle on just one image that I preferred.

Figure 3.4 Intertwining (Week 3, 17/5/2025)

I used the Pen Tool to create a separate shape, and then applied the Intertwine Tool to make it appear as though the shape was weaving in and out of the letters, giving the impression that the letters were in front.

Figure 3.5 Final Two Poster Designs (Week 3, 17/5/2025)

These are the final composition of the posters. I made an extra after the black and white for back-up incase my tutor did not accept the design. After he accepted it, I chose the one that he gave the approval of.

Final Type and Play Outcome:

Figure 3.6 Image & Extraction (JPEG) (Week 4, 14/5/2025)

Figure 3.7 Extracted Letters (JPEG) (Week 4, 14/5/2025)

Figure 3.8 Reshaping (JPEG) (Week 4, 14/5/2025)

Figure 3.9 Refining (JPEG) (Week 4, 14/5/2025)

Figure 4.0 Final Alterations (JPEG) (Week 4, 14/5/2025)

Figure 4.1 Finalized Type and Play Letters (PDF) (Week 4, 14/5/2025)

Figure 4.2 Finalized Poster (Week 4, 14/5/2025)

Figure 4.3 Finalized Poster (PDF) (Week 4, 14/5/2025)

4. Feedback

Week 1

General Feedback

My tutor gave us briefing on what we had to do throughout the whole semester.

Week 2

Specific Feedback

My tutor said that my dilatational had too much graphics, my bilateral was wrong and my grid could use a small improvement.

General Feedback

My tutor gave us a briefing on the task 2 and that we must complete it by week 3 to show our progress.

Week 3

Specific Feedback

My tutor advised me to be more consistent on my letters and that I could improve and develop the letters more.

General Feedback

This week, my tutor said to complete our poster and that we should finish our exercise blog by week 4.

Week 4:

General Feedback

This week my tutor briefed us on the next assignment and let us choose our task 1 deadline.

Specific Feedback

My tutor said that my design was good however, I could make it look more balanced by adding a logo on the bottom right corner. He also told me to refrain from using italic fonts for my quote and make it simple.

5. Reflections

Experience

My prior experience with InDesign and Illustrator made this task more approachable and efficient. Being comfortable with the software allowed me to concentrate on the creative direction rather than getting caught up in technical details. Although I didn’t run into major technical issues, I did find the conceptual phase challenging. Coming up with fresh, visually compelling layout ideas took time and experimentation. Finding the right balance between functionality and visual appeal required careful thought, but the process helped me sharpen my creative approach and problem-solving skills.

Observation

I frequently supported my peers by giving constructive feedback and suggesting ways to enhance their work. This collaborative process was both rewarding and insightful, as it allowed me to observe their growth while also gaining new perspectives on my own projects. I gradually saw noticeable improvement in my designs, especially as I made it a habit to revisit and refine them based on feedback. With each passing week, my confidence grew, and I continued to develop and adapt my design process through ongoing learning and reflection.

Findings

Over the past two weeks, I’ve been reminded that the creative process cannot be rushed. Whenever I’ve tried to generate ideas under pressure, the outcomes tend to feel forced or lack depth. This reaffirmed the value of stepping back when ideas are not flowing naturally. Rather than pushing through creative blocks, I’ve found it more effective to pause, reset, and return with a fresh perspective. Giving myself that space, whether it is taking a short break or revisiting the work the next day, has consistently led to stronger and more thoughtful results. This mindset reinforces a principle I’ve come to appreciate: creativity often benefits more from patience and reflection than from urgency.

6. Further Readings

Book Chosen:

Figure 4.4 Chosen Book (IDEAS) and Page 7 (Week 4, 14/5/2025)

I've read page 5 to 7 which is about not all fonts are designed with true bold or italic versions. When designers apply bold or italic styles to a font that doesn’t support those variations (using software shortcuts like the "B" or "I" buttons), the computer fakes the style, often resulting in distorted or unprofessional-looking text. Older software like Microsoft Word lets users apply these fake styles regardless of whether the font supports them, while newer design programs like Adobe InDesign or Illustrator only allow you to use font styles that are actually installed. To ensure proper appearance and print quality, users should choose specific font weights or styles from the font menu—not rely on formatting buttons.

Advanced Typography - Task 1 Exercises

TABLE OF CONTENTS