Advanced Typography: Task 1 Exercises

21.04.2025 - 05.05.2025 ( Week 1 - Week 3)

WANG JINYI / 0374697

GCD61004 / Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 1 / Exercises: Typographic Systems

TABLE OF CONTENT

Lecture 02：Typographic Composition
1. What is Layout?
Layout means arranging text and pictures in a clear and nice-looking way. It helps people read and understand your design easily.
2. Basic Layout Principles
Emphasis – Make the important part stand out.
Isolation – Keep key elements apart so they don’t get lost.
Repetition – Repeat things (like colors or shapes) to create unity.
Symmetry / Asymmetry – Use balance, either evenly or creatively.
Alignment – Line things up neatly.
Transparency – Use overlapping or see-through layers to add depth.
3. Rule of Thirds
Divide your space into 3 rows and 3 columns. Put important stuff near the crossing points. It helps the design feel balanced — not a strict rule, but a helpful guide.
4. Layout Systems
Grid System – A classic method from print design. Still used a lot in web and app design.
Other ways:
Use inspiration from nature or real-world structure.
Mix info with layout to guide the viewer.
Add animation or movement to make it interactive.
5. Design Trends
Modernism – Clean, simple, organized.
Postmodernism – More fun, bold, and different.
Today’s style – Mix clarity with creativity.
6. How to Make Good Layouts
Use the right tools (like Adobe or Figma).
Make sure images, text, and space work well together.
Keep the look consistent across all pages.
7. Final Tips
Try new things.
Develop your own style.
Make sure your layout is easy to read, but also looks cool.

Lecture 03: Context and Creativity

1. Introduction
This lecture focuses on how handwriting and printing developed over time. It highlights how handwriting is key to creativity and expressing ideas in written form.

2. Importance of Handwriting
Handwriting is the foundation of typefaces we use today. It has influenced font designs, how text is spaced, and how written text is standardized.

3. Historical Background

The Latin alphabet comes from the Phoenician script, which dates back to around 1750 BCE.
The ancient Greeks developed their writing from the Phoenicians, creating the foundation for spelling and how we read from left to right.

4. Ancient Writing Systems

Cuneiform (around 3400 BCE): One of the earliest writing systems, used by several ancient languages.
Egyptian Hieroglyphs (around 2600–2160 BCE): Mixed symbols that represent both ideas and sounds.

5. Handwriting Development in the Middle East

The Phoenician alphabet influenced many modern writing systems.
The Egyptians also played a role in shaping writing systems through cultural exchange and integration.

6. Handwriting in India and Southeast Asia

Indus Valley Script (around 3500–2000 BCE): Not fully understood, but an important part of history.
Brahmi Script: A major influence on many writing systems in Asia.

7. Writing Systems in Southeast Asia

Mon Script: Based on the Brahmi script, this system spread through Southeast Asia.
Bengali Script: Unique and distinctive with its own features.

8. Modern Printing and Digitalization

Movable Type: Printing technology like Chinese woodblock and movable type helped spread texts far and wide.
Digital Writing Systems: As technology advanced, diverse scripts evolved and spread around the world.

9. Opportunities for Contemporary Designers

Modern designers can draw inspiration from history to create new typefaces.
Understanding the history of writing and printing can lead to better design choices today and in the future.

Lecture 04: Designing Type – Summary
Why Typeface Design Matters
This lecture focused on why designing typefaces is important. It’s not just about making letters look good—it’s about making text easier to read and helping people express ideas more clearly. A good typeface can even carry cultural or emotional meaning.
What Typefaces Are For
We looked at famous examples like Frutiger, Verdana, and the London Underground font to understand how fonts are designed for specific needs—like clarity on signs, or being readable on screens. Every typeface has a purpose and is shaped by where and how it will be used.
How Typefaces Are Made
The design process usually includes:
Research: Learn about type history and define what your font is for.
Sketching: Start drawing letters, by hand or digitally.
Digitizing: Use software to clean up your design and adjust details like spacing.
Testing: Try it out, get feedback, and make changes until it works well.
Building Letterforms
We also talked about how Roman capital letters are the basic structure behind many typefaces. Understanding type classifications and using grids can help keep your font design consistent and balanced.
INSTRUCTIONS

GCD 61004｜Advanced Typography Module Information Booklet

TASK 1:EXERCISES

EXERCISE 1: TYPOGRAPHIC SYSTEM

For the first exercise, we were tasked with designing 8 typographic posters (200 x 200 mm / 300 dpi), each representing one of the eight major typographic systems. The designs must explore and highlight each system individually, using the provided content. We were permitted to use black along with one additional colour, with minimal use of graphic elements such as lines and dots. All layouts must be created exclusively using Adobe InDesign.

For the content, we were required to select one of the following headlines:

All Ripped Up: Punk Influences on Design
The ABCs of Bauhaus Design Theory
Russian Constructivism and Graphic Design

Content Details:

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

Final Submission in JPEG file

1. Axial

Fonts Used:

Bembo Std

Serifa Std

Futara Std ( Regular, Bold)

Fig 1.1 Axial System, Week 1 （23/04/2025）

For the Axial system, I designed two versions of the poster with a vertical axis positioned slightly to the right. The main title is placed in the lower-left third of the frame, while the body text occupies the upper-right, covering two-thirds of the space. I also incorporated graphic elements to maintain visual balance, ensuring the composition feels dynamic and well-proportioned.

2. Radial

Fonts Used:

Gill Sans ( Bold, SemiBold, UltraBold, Light)

Fig 1.2 Radial System, Week 1（23/04/2025）

For the Radial system, I focused the composition in the lower-right corner and began dispersing the text outward from this point. I adjusted the size of the title and body text to create a sense of flow. To further guide the viewer’s gaze, I incorporated radial lines of varying thickness, drawing attention to the center and enhancing the sense of movement.

3. Dilatational

Fonts Used:

ITC Garamond Std

Fig 1.3 Dilatational System, Week 1（23/04/2025）

For the Dilational system, I created a central focal point in the lower-left area with a circular design. The text radiates outward in an arc pattern around this circle. I emphasized the color of the "P" in the title to create visual interest and carefully adjusted the font sizes and weights to ensure balanced distribution across the layout.

4. Random

Fonts Used:

Futura (Condensed Medium)

Serifa Std

Fig 1.4 Random System, Week 1（24/04/2025）

For the Random system, I aimed for a free-spirited approach while maintaining a sense of rhythm. I clustered the text together to create a feeling of interwoven and overlapping words. Despite the randomness, the main theme text remains prominent and stands out clearly.

5. Grid

Fonts Used:

ITC Garamond Std ( Ultra Narrow Italic, Book Narrow, Bold Narrow, Light Narrow, Book Italic)

Fig 1.5 Grid System, Week 1 （25/04/2025）

For the Grid system, I created two squares placed on the left and right, with different heights. The main title occupies a large area in the upper-left corner, while the remaining text is evenly distributed on the left side, following a structured and organized grid layout.

6. Modular

Fonts Used:

Bodoni Std (Book Italic, Poster Italic, Bold)

Gill Sans (Bold &Light Italic)

Fig 1.6 Modular System, Week 1 （25/04/2025）

For the Modular system, I created three circles and distributed the text within them. The layout is organized around these modular elements, with each section of text fitting into the circles. I emphasized the main theme text, ensuring it stands out within the structured design of the circles.

7. Transitional

Fonts Used:

Gill Sans Std (Bold Italic, Light, Extra Bold Display, Bold)

Fig 1.7 Transitional System, Week 1（24/04/2025）

For the Transitional system, I created a focal point and arranged the text to flow downward around it, resembling the movement of water. The main title text is bold and dominant, while the body text is lighter, creating a strong sense of rhythm and flow throughout the design.

8. Bilateral

Fonts Used:

Futura (Bold, Condensed Medium, Bold)

Fig 1.8 Bilateral System, Week 1 （27/04/2025）

For the Bilateral system, I aligned all the text consistently on the right side, emphasizing the color of the word "Punk." A central circular line was drawn in the upper-left corner to create balance. The overall design appears formal and well-balanced, with a sense of symmetry.

Fig 1.9 Typographic System Final PDF, Week 1 （27/04/2025）

Fig 1.10 Typographic System Final PDF（Grid/ Baseline），Week 1（27/04/2025）

Exercise 2: Type & Play Part 1/ Finding Type

Finding an Image

For Exercise 2, we had to pick an image with shapes that could be turned into letters. I chose a feather because its soft, flowing lines reminded me of the word DOVES. The curves and direction of the feather strands felt elegant and light, like the letters themselves.

Fig 2.1 Chosen Image, Week 2 (30/04/2025)

Extraction

Extraction of the letters D, O, V, E, S:

Fig 2.2 Letterform Extraction (D,O,V,E,S), Week 2 (30/04/2025)

Refinement Process

Fig 2.3 Before and After font reference, Week 2 (30/04/2025)

Fig 2.4 Process, Week 2 ( 03/05/2025)

Fig 2.5 Final Outcome JPG，Week 2 （03/05/2025）

Fig 2.6 Final Outcome PDF，Week 2 （03/05/2025）

Exercise 2 - Type & Play Part 2

For this poster, I chose doves as the central theme, representing peace. I used a black-and-white color scheme, with a red “V” as the focal point, to create a contrast between calm and tension. This design explores the idea of violence beneath peace.

Fig 3.1 Selected image, Week 3 (06/05/2025)

The main visual features a black-and-white photograph of two white doves. The background is kept minimal to draw attention to the birds and the central red “V”. This red “V” symbolizes both violence and victory, adding depth to the concept.

Fig 3.2 Process, Week 3 (06/05/2025)

For the typography, the title “DOVES” was created by extracting and modifying feather shapes from Exercise 1. The “V” is highlighted in red to create a strong visual contrast. The tagline, “When silence breaks, wings bleed.”, is placed below the title, with a white-to-red gradient that emphasizes the emotional intensity of the phrase. At the bottom of the poster, I included the necessary credits, such as Taylor’s University, The Design School, and the Advanced Typography course, in a movie poster style. The credits are arranged in a billing block using Helvetica Neue Condensed.

Fig 3.3 Finalized Poster JPG, Week 3 (06/05/2025)

Fig 3.4 Finalized Poster PDF, Week 3 ( 06/05/2025)

FEEDBACK

Week 1:

General Feedback:
We were introduced to the module, learned about advanced typography, and set up our Blogger. No specific design feedback was given this week.

Specific Feedback:
Not applicable — tasks were just assigned and no designs were reviewed yet.

Week 2：

General Feedback:
Mr. Vinod emphasized the importance of visual balance and hierarchy. Feedback from other students’ work helped deepen my understanding of common design issues.

Specific Feedback:

Some of my layouts lacked visual balance.
Certain elements were too dominant and distracted from the overall composition.
He pointed out where alignment and spacing could be improved for clarity.

Week 3:

General Feedback:
Maintaining consistency in font design is crucial. Mr. Vinod also reminded us of poster submission guidelines and common mistakes to avoid.

Specific Feedback:

My font captured the feather’s flow and texture well.
Letters D and O were too thick compared to V, E, and S.
Advised to unify stroke weight across all characters.

REFLECTION

In this module, I completed three main exercises: designing eight typographic systems, creating a typeface based on a feather, and using that typeface to design a poster with a cinematic feel.
Through these tasks, I learned how to apply layout systems like grid, radial, and axial, and how each affects the way content is read. When designing my typeface, I focused on the flow and texture of the feather, but had to adjust stroke weight after feedback to ensure visual consistency.
For the DOVES poster, I applied what I learned about composition, contrast, and typographic hierarchy. I used a black-and-white theme with a red “V” to create focus and tension. This project helped me understand how font, spacing, and color can shift the tone of a design.
Overall, I have enhanced my technical control over fonts and layouts, and learned how to better connect concepts with forms.

FURTHER READINGS

Week 1

Fig 4.1 ｜Typographic Systems by Kimberly Elam （2007） PDF

In the first week, I read Kimberly Elam's Typographic Systems to learn more about how texts can be arranged in different ways.

I discovered an interesting thing: How different systems change the feel of the design.

For example, the grid system makes things look neat and orderly, while the random system makes people feel more interesting and free. I also noticed that spacing and alignment can make the layout easier to read. Even very small changes, such as the position of the text or the way it is grouped, can affect people's perception of the design.

This book helped me understand that good typesetting is not only about choosing fonts, but also about how to place everything on the page.

Week 2：https://kreatifbeats.com/2023/08/06/finding-type-a-novel-typographic-exercise/

Fig 4.2 | Finding Type：A Novel Typographic Exercise

In the second week of this module, I read the article “Finding Type: A Novel Typographic Exercise” by Vinod Nair to learn more about how letterforms can be found and created from images.

Key points I learned:
The process starts by picking an image with strong and interesting features—this could be something from nature or something man-made.
By looking closely at the shapes and lines in the image, you can start to see parts that look like letters.
Once you find those shapes, you compare them to a real font to check if they’re clear and readable.
After that, you refine the letterforms to make them more consistent while still keeping the look and feel from the original image.

This exercise helped me see how everyday visuals can inspire creative typography and how design can come from unexpected places.

Search This Blog

WANG JINYI 0374697