Advanced Typography - Task 1 : Exercises

The arrangement of textual information within a given space (e.g. print, screen, tactile surfaces). It focuses on how large amounts of text are visually structured and organized.

Common design principles in composition include: emphasis, isolation, repetition, symmetry, asymmetry, alignment, perspective

Some are easily translatable into typography (e.g. emphasis, symmetry)
Others are less practical in typographic layouts (e.g. repetition, perspective)

The Rule of Thirds :

Figure 1.2.1 ; The Rule of Thirds

A photographic composition guide (3 columns × 3 rows)
Intersecting points suggest ideal placements for important info
Rarely used directly in typography, but can aid in visual decision-making

1. Grid System (Raster System):

Originated from letterpress printing
Further developed by Swiss Modernists (e.g. Josef Müller-Brockmann)
Offers clarity, order, and flexibility
Modular structure allows diverse yet consistent layouts
Readers prefer ordered text layout – improves readability

2. Postmodernist Reaction:

Designers challenged modernist order
Explored chaos, asymmetry, and random arrangements
Prioritized visual excitement over legibility
Still required careful planning and intuition
Notable designers: David Carson, Paula Scher

3. Environmental Grid:

Figure 1.2.2 ; Environmental Grid

Based on real-world structures (architecture, interiors, artwork)
Lines/curves extracted from environments form layout structure
Provides contextual relevance and unique identity
Layouts are structured but also visually engaging

4. Form & Movement:

Based on grid system, but introduces dynamic visual flow across pages
Treats sequential spreads like frames in a slow-motion animation
Non-objective forms placed to create surprise and connection
Eventually replaced with actual text/images
Encourages visual engagement and variation across layouts
Useful for book design, digital layout, or sequential viewing formats

Week 3 // AdTypo_3_Context&Creativity

Handwriting is important in the study of type/typography because handwriting influenced the design of mechanical typefaces

Figure 1.3.1 ; Evolution of the Latin Alphabet

Typography and letterforms in Asia have largely followed Western systems (e.g., letterpress, Linotype, Unicode), neglecting local scripts due to historical limitations like lack of resources and technical capabilities.
Today, with increased development and access to tools, there’s an opportunity to revive and digitize indigenous scripts.
Context creates opportunity for creativity and originality.

The Digital Renaissance in Asia

Growth in computer programming especially in India, China has led to more support for indigenous scripts in digital platforms (phones, tablets, computers).
Example: Previously, most mobile text input was only in Latin characters. Now, vernacular input is possible.
Software giants (e.g., Google) support this trend, developing multi-script typefaces—fonts that contain both Latin and local scripts.

Multi-Script Typefaces

These are designed to cater to bilingual or multilingual settings (e.g., signage or apps using both English and a local language).
Term coined by Moutaminet Tétraman (Malaysian type designer).
He created Mooresum.com, a platform for digitizing local scripts (Tamil, Southern Indian languages, etc.).
He played a key role in allowing local languages to be typed digitally.

Local Movements & Efforts

Malaysia:

Programming language BU developed to encode vernacular systems.
Huruf: An organization studying hand-painted Malaysian signs to inspire local Latin-based typefaces with a unique Malaysian look.

India:

Companies like Ek Type and Indian Type Foundry work with Google Fonts to develop high-quality multi-script fonts.
Indonesia and Southeast Asia: Still in early stages, but growing awareness and activity.
Reflection on Originality
Asian designers should look inward, examine their own culture, history, and scripts, to develop original works instead of imitating Western aesthetics.

Anecdote: An Indian artist went to Germany with modern work resembling Western styles. Locals asked what was “Indian” about his work, leading to a realization about the importance of cultural identity in design.

Week 4 // AdTypo_4_Designing Type

Introduction: Why Design a New Typeface?
Despite thousands of existing typefaces, new designs continue to emerge due to:
Social Responsibility: Designers must improve legibility and accessibility.
Artistic Expression: Type design is a form of creative expression contributing to visual culture.
Key Historical Type Designers & Their Contributions
Max Miedinger – Designed Helvetica, known for clarity and neutrality.
Stanley Morison – Designed Times New Roman for legibility in newspapers.
Adrian Frutiger – Known for Frutiger, Univers, Avenir; emphasized functional, legible design.
Case Study: Adrian Frutiger & Frutiger Typeface
Commissioned for signage at Charles de Gaulle Airport (1968).
Objective: High legibility from various distances and under poor conditions.
Method: Tested blurred forms for recognizability.
Legacy: Balanced humanist and geometric qualities; widely used globally.
Art vs. Science in Type Design
Type design combines artistic intuition with scientific testing for readability and function.
Why Design New Typefaces?
Practical Question: Thousands exist—but unique typefaces build identity, recognition, and trust.
Long-Term Value: Custom fonts can become iconic.
Historical Context: Custom fonts were standard before digital typography.
Case Study: Frutiger & Devanagari Typeface (1964)
Commissioned by NID, India.
Goal: Adapt Devanagari for modern printing without losing sacred aesthetics.
Approved by religious scholars—showed cultural sensitivity and design adaptability.
Case Study: Matthew Carter & Verdana (1996)
Designed for Microsoft for screen legibility.
Features: Pixel-based logic, wide spacing, large x-height.
Used by IKEA for multilingual clarity.
Related fonts: Tahoma, Calibri, Cambria.
Other Key Typefaces
Bell Centennial (Carter): Designed for phone directories with ink traps.
Johnston Sans (Edward Johnston): Created for London Underground, basis for Gill Sans.
Gill Sans (Eric Gill): Inspired by Johnston Sans; widely used despite Gill's personal controversies.
Typeface Design Process
Research
Sketching (traditional/digital)
Digitization (FontLab, Glyphs App)
Testing
Deployment (ongoing refinement)
Design Considerations
Know your typeface’s purpose (e.g., body text, signage).
Understand type history, anatomy, conventions, terminology.
Analyze patterns in similar fonts.
Typeface Construction
Built using geometric forms (squares, circles).
Overshoot: Curved forms must slightly exceed baseline/cap height.
Group letters by structural traits (round, diagonal, rectangular).
Spacing and Fitting
Optical spacing is more important than equal physical spacing.
Counterforms affect legibility significantly.
Display vs. Text Type
Text type: Prioritizes legibility and long reading.
Display type: Focuses on style and expression.
Prototyping and Testing
Involves screen/print testing and feedback.
Revisions may still be needed after release.
Intrinsic vs. Extrinsic Motivation
Intrinsic: Personal curiosity/exploration.
Extrinsic: Solving specific problems or meeting a brief.

INSTRUCTIONS

TASK 1 : EXERCISE 1

TYPOGRAPHIC SYSTEMS

Week 1

For the first exercise, we were tasked with creating 8 typographic posters, each representing one of the 8 typographic systems. We have to design one poster per system using the below provided content :

The Design School,

Taylor’s University

All Ripped Up: Punk Influences on Design

The ABCs of Bauhaus Design Theory

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

Unlike our previous Typography class, this exercise allows us to use more than just black and white, we can now incorporate an additional color, along with a limited number of graphic elements . All posters must be created primarily in Adobe InDesign, with some assistance from Adobe Illustrator where necessary.

RESEARCH & INSPIRATION :

Figure 2.1.1 ; Research & Inspiration ; Week 1 (24/4/2025)

These are the examples of the 8 typographic systems from Typographic Systems by Kimberly Elam, as recommended by Mr Vinod.

*Please refer to FURTHER READING section for more detailed content*

Figure 2.1.2 ; Research & Inspiration ; Week 1 (24/4/2025)

In addition to the examples from the book, I also refer to Mrs. Seckler as a reference.

Figure 2.2.1 ; Axial ; Week 1 (24/4/2025)

Typeface used: Gill Sans

Font used: SemiBold Italic, Light Italic, Bold, Bold Condensed

Figure 2.2.2 ; Radial ; Week 1 (24/4/2025)

Typeface used: Univers LT Std

Font used: 85 Extra Black, 75 Black, 55 Oblique, 55 Roman, 65 Bold Oblique, 57 Condensed

Figure 2.2.3 ; Dilatational ; Week 1 (24/4/2025)

Typeface used: Bodoni

Font used: Bold, Book

Figure 2.2.4 ; Random ; Week 1 (26/4/2025)
Font used: Most of the 10 Typefaces

Figure 2.2.5 ; Grid ; Week 1 (27/4/2025)

Typeface used: Futura Std

Font used: Heavy, Light, Bold, Medium, Regular, Medium Oblique

Figure 2.2.6 ; Modular ; Week 1 (27/4/2025)

Font used: Bodoni Std

Figure 2.2.7 ; Transitional ; Week 1 (28/4/2025)

Font used: ITC Garamond Std

Figure 2.2.8 ; Bilateral ; Week 1 (28/4/2025)

Typeface used: Janson Text LT Std

Font used: 55 Roman, 56 Italic, 75 Bold, 76 Bold Italic

Figure 2.3 ; Compilation of 8 Typographic Systems (1st attempt) ; Week 1 (30/4/2025)

Week 2

SECOND ATTEMPT:

This week, Mr. Vinod gave feedback on my first attempt, which helped me gain a clearer understanding of the typographic systems. I made several adjustments accordingly:

Figure 3.1.1 ; Axial System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

For the Axial system, Mr. Vinod mentioned that the bold text used for "Open Public Lectures" was too distracting. In response, I changed it to a light condensed font to reduce its visual weight.

Figure 3.1.2 ; Radial System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

I rearranged the text for my second attempt of Radial system, especially at the top section, as the original sequence and hierarchy felt awkward. Additionally, both "Open Public Lectures" and "The Design School" were previously centered, I aligned them to form a slanted straight line, creating a more harmonious layout.

Figure 3.1.3 ; Dilatational System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

For the Dilatational system, I didn’t make many changes except for shifting the entire layout to the center, as the previous version leaned slightly to the left.

Figure 3.1.4 ; Random System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

The Random system remained unchanged, as I was satisfied with the outcome from the first attempt.

Figure 3.1.5 ; Grid System(Second attempy) ; JPEG ; Week 2 (30/4/2025)

For the Grid system, I rearranged the text placement based on the feedback to eliminate awkward spacing and improve overall composition.

Figure 3.1.6 ; Modular System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

I re

did the Modular system entirely. I initially struggled with this layout, but after rewatching Mr. Vinod’s tutorial and studying the reference examples more closely, I managed to create a new poster.

Figure 3.1.7 ; Transitional System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

The Transitional system also remained unchanged from the first attempt.

Figure 3.1.8 ; Bilateral System(Second attempt) ; JPEG ; Week 2 (30/4/2025)

I slightly adjusted the two texts on the side of the Bilateral system, bringing them closer to the center for better balance.

Figure 3.2 ; Compilation of 8 Typographic Systems(Second attempt) ; JPEG ; Week 2 (30/4/2025)

FINAL RESULT OF TYPOGRAPHIC SYSTEMS :

Figure 4.1 ; FINAL Axial System ; JPEG ; Week 2 (30/4/2025)

Figure 4.2 ; FINAL Radial System ; Week 2 (30/4/2025)

Figure 4.3 ; Dilatational System ; Week 2 (30/4/2025)

Figure 4.4 ; Random System ; Week 2 (30/4/2025)

Figure 4.5 ; Grid System ; Week 2 (30/4/2025)

Figure 4.6 ; Modular System ; Week 2 (30/4/2025)

Figure 4.7 ; Transitional System ; Week 2 (30/4/2025)

Figure 4.8 ; Bilateral System ; Week 2 (30/4/2025)

Figure 3.3 ; FINAL typographic systems (without grids) ; PDF ; Week 2 (30/4/2025)

Figure 3.4 ; FINAL typographic systems (with grids) ; PDF ; Week 2 (30/4/2025)

TASK 1 : EXERCISE 2

TYPE & PLAY

PART 1

Week 2

For the second exercise, we need to choose an image, it needs to have strong characteristics. Then explore its shapes to find parts that look like letters. After that, turn those shapes into a full set of letters and make sure they work well together as an alphabet. We're allowed to use an existing typeface as a reference to help guide the style and make the letters more consistent, while still keeping some of the image’s original character.

FINDING AN IMAGE :

Figure 4.1 ; Chosen Image ; Week 2 (1/5/2025)

Chosen Image by Pixabay from Pexels

EXTRACTION :

My extraction letters are J, A, E, H, Y, U, N

Figure 4.2 ; Letterform Extraction (J,A,E,H,Y,U,N); Week 2 (1/5/2025)

PROCESS OF REFINEMENT (1st attempt) :

Figure 4.3 ; Reference Typeface ; Week 2 (1/5/2025)

My chosen reference typeface is Bembo Std, and Bold Italic font. I felt that the slightly slanted form of this font resembles the flowing, organic movement of smoke. Additionally, its clean and simple structure makes it easier for me to modify and create custom letterforms without dealing with unnecessary elements like extra strokes or complex details.

Figure 4.4 ; 1st Refinement ; Week 2 (3/5/2025)

Above is the initial extraction and the first refinement. In the first refinement, I made slight adjustments to the shapes because the initial extraction was too abstract. I modified them to appear more letter-like.

Figure 4.5 ; 2nd Refinement ; Week 2 (5/5/2025)

After that, I refined it to look closer to the reference font.

Week 3

Below is the compilation of my first attempt :

Figure 4.6 ; First Attempt Compilation ; Week 3 (7/5/2025)

After getting feedback from Mr. Vinod, I found that my outcome of the first attempt reliant too much to my reference typeface.

PROCESS OF REFINEMENT (2nd attempt) :

So I started my second attempt with the same reference typeface and same deconstruction as the first attempt.

Figure 5.2 ; Deconstruction & Reference Typeface ; Week 3 (9/5/2025)

Typeface: Bembo Std

Font: Bold Italic

Figure 5.3 ; First Refinement ; Week 3 (9/5/2025)

For the first refinement of my second attempt, I took a similar approach as in my first. I adjusted the shapes to make them more letter-like because the deconstructed forms were still too abstract. I also did the weight adjustment referring the reference font.

Figure 5.4 ; Second Refinement ; Week 4 (11/5/2025)

On this step, I added consistency to all the letters by using the letter 'E' as a reference letter. I also included some key details inspired by the visual qualities of smoke and applied them to the letterforms.

Figure 5.5 ; Initial Extraction & Final Outcome ; Week 4 (13/5/2025)

To better capture the flow and softness of smoke, I used the Brush Tool (B) to add strokes that mimic its original form as suggested by Mr. Vinod.

Below is the refinement process of the extracted letterforms:

Figure 5.6 ; Process ; Week 4 (13/5/2025)

FINAL OUTCOME OF PART 1 :

Figure 6.1 ; Image & Extraction ; PNG ; Week 4 (15/5/2025)

Figure 6.2 ; Overall Process ; PNG ; Week 4 (15/5/2025)

Figure 6.3 ; Extracted letterforms (baseline) ; PNG ; Week 4 (15/5/2025)

Figure 6.4 ; Reference Font ; PNG ; Week 4 (15/5/2025)

Figure 6.5 ; Final Letterform ; PNG ; Week 4 (15/5/2025)

Figure 6.6 ; Original Extraction(top) & Final Letterforms (bottom) comparison ; Week 4 (15/5/2025)

Figure 6.7 ; Compilation of Exercise 2 Part 1 ; PDF ; Week 4 (16/5/2025)

TASK 1 : EXERCISE 2

TYPE & PLAY

PART 2

For part 2 of exercise 2, we are tasked to create a movie poster using the letters we created in part 1.

RESEARCH & INSPIRATION :

Figure 7.1 ; Research & Inspiration ; Week 4 (16/5/2025)

I began by searching for several existing movie posters and used them as references for inspiration.

Figure 7.2 ; Movie poster background images ; Week 4 (16/5/2025)

All the images above were sourced from pexels.com

I experimented with a few different background options and ultimately chose the one I used in Part 1.

Figure 7.3 ; Chosen poster background ; Week 4 (16/5/2025)

PROCESS :

Figure 7.4 ; Refined Poster Background ; Week 4 (16/5/2025)

I used Photoshop to darken the brightness of the background image for a more dramatic effect. I also added a black vignette at the top to enhance text visibility.

Figure 7.5 ; process(gradient&intertwine) ; Week 4 (16/5/2025)

Next, I applied a gradient to the typeface and intertwined the strokes so they blended smoothly together.

Figure 7.6 ; Process(applying shadow) ; Week 4 (16/5/2025)

I added a drop shadow effect—but instead of the usual black, I used a white shadow. Since the background is very dark, the white glow effect helped the text stand out and improved legibility.

Figure 7.7 ; Movie Poster (1st attempt) ; Week 4(16/5/2025)

For the credit list, I selected the typefaces "against Regular (Regular Font)" & "Amarante Regular (Regular Font)"

PROCESS (Second Attempt):

After reviewing my first attempt, I noticed a few areas that could be improved, so I began a second round of adjustments.

Figure 8.1; Process(clipping mask) ; Week 4(16/5/2025)

I used a clipping mask on the text below the main title to create a more refined visual effect.

Figure 8.2; Process(credit listings) ; Week 4(16/5/2025)

I referred to the movie poster "ALIEN" to create the credit listings.

Figure 8.3 ; Process ; Week 4(16/5/2025)

In the first version, the letters didn’t blend well with the background. To fix this, I changed the stroke color while keeping the same fill gradient. However, I realized that to modify the stroke color, I had to release the intertwining and shadow effects first. So I repeated the same steps as before, with updated adjustments.

FINAL OUTCOME OF MOVIE POSTER:

Figure 9.1 ; FINAL Movie Poster ; JPEG ; Week 5 (19/5/2025)

Figure 9.2; FINAL Movie Poster ; PDF ; Week 5 (20/5/2025)

FEEDBACK

Week 1

General feedback

-Mr. Vinod briefed to us the MIB and gave us a detailed explanation of Task 1 to ensure everyone fully understood the requirements. Afterwards, we were given time to watch the lecture video and update our portfolios.

Specific feedback

-No specific feedback

Week 2

General feedback

-Mr Vinod gave feedback on each of our works.

-Mr Vinod mentioned that margin space is critical for a better readability.

-He also told us to always do research and sketch before we start designing.

-Avoid using 45 degrees for any layouts

-Also, contrast is key.

Specific feedback

For my exercise 1, Mr Vinod gave feedback on each of the typographic systems.

-Axial, the “open public lectures” on the top with bold font distracted the main focus which is the title

-Radial, okay

-Dilatational, the red circle that is at the bottom of the title can keep viewer’s attention focused there.

-Random, good

-Grid, can adjust the placement of the bottom part, it's a bit too far from the other texts.

-Modular, not modular, redo.

-Transitional, okay.

-Bilateral, okay.

Week 3

General Feedback

In this week, Mr Vinod provided feedback on our works. Mr Vinod also demostrates the way of using the tools in ai like the compound path, brush, & etc to help us with our work.

-we are allowed to use image trace for the logo of the movie poster.

Specific Feedback

My outcome looking too similar to the reference, which shouldn’t have been the main focus. Instead, Mr Vinod shows me an example using brush tool to create strokes on the typeface to better capture the smoky feel of the original image.

Week 4

General Feedback

Submission (EXERCISE 1)

1024x1024px, 300dpi, list the week (date), in JPEG, if blog background is white, make it off white. Also in pdf (without grids)& (with grids)

Submission (EXERCISE 2)

Original image, dissection(abstraction), Refinement process by itself, Reference, Final refined in JPEG&PDF

Specific Feedback

No Specific feedback

REFLECTION

Experience
Through these exercises, I’ve gained more knowledge and practical skills compared to the previous typography class. Advanced Typography pushed me to think more critically about layout, hierarchy, and visual rhythm. While I found the projects fun and creatively stimulating, they also challenged me with tight deadlines and the need for consistent refinement. This experience has been my closest glimpse into the real demands of being a designer — managing time, meeting expectations, and producing meaningful work under pressure.

Observation
I observed that typographic composition isn’t just about making things look visually appealing; it’s about creating communication with purpose. Small details like tracking, alignment, and grid systems can greatly influence how a message is perceived. I also noticed how different typefaces carry different emotional tones, and how combining them thoughtfully can enhance a design's impact.

Findings
I discovered that successful typographic design relies heavily on planning and iteration. Rushing the process usually leads to weak results, while taking time to test layouts and refine choices leads to stronger outcomes. I also found that feedback — whether from peers or instructors — plays a crucial role in helping me see my blind spots and improve. Overall, this journey has deepened my appreciation for type as both a functional and expressive tool.

Search This Blog

Racheal Tan Tze Rou (0381005)