Advanced Typography - Task 1: Typographic Systems and Type and Play

SHIMANLIN,（0375858)

Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 1: Typographic Systems and Type and Play

---

JUMP LINK

LECTURE

INSTRUCTIONS

TASK

FEEDBACK

REFLECTIONS

FURTHER READING

---

LECTURE

Lecture 1 - AdTypo_1_Typographic Systems

• Axial System

Elements organized around a single axis, which can be straight or curved.

• Radial System

All elements radiate outward from a central focal point.

• Dilatational System

Information expands in concentric circles, allowing for hierarchical placement.

• Random System

Appears chaotic but follows an underlying method, challenging organized minds.

• Grid System

A familiar framework seen in books and designs, offering structure and balance.

• Transition System

Information is arranged in layers to form a band structure.

• Modular System

Units are standardized and interchangeable, allowing flexibility in layout.

• Bilateral System

Symmetrical arrangements often used in formal invitations, with room for creative variations.

Fig.1.0 Lecture slide

Essentially, these tools empower designers to create compelling visual narratives. By mastering these frameworks, designers can unlock endless creative possibilities while maintaining clarity and purpose in their work.

Lecture 2 - AdTypo_2_Typographic Composition

• Design Principles

Abstract principles like emphasis and symmetry are easier to translate into print layouts than concepts like repetition or perspective that work against textual information.

• Rule of Thirds

While not commonly used in typography, this compositional rule helps determine the placement of important information within a given space.

• Grid System

The most practical and widely used typographic system, derived from letterpress printing, remains popular due to its versatility and adaptability.

• Postmodernism

Revolting against the strict order of modernist type design, embrace chaos, asymmetry, and randomness to create exciting and impactful designs.

• Environmental Grids

Taking inspiration from existing structures like architecture or interior design, simplifying them to basic lines to create unique and situational layouts.

• Formative Movement

Explore the dynamic potential of the grid to create movement across multiple pages, mimicking the frame-by-frame nature of animation.

• Experimentation

Encourage students to experiment with typographic elements, push boundaries, discover new possibilities, and potentially create innovative designs.

Fig.1.1 Lecture slide

Lecture 3 -  AdTypo_3_Context & Creativity

• Origin of handwriting

Handwriting was the model for the earliest mechanical printing fonts.

• Cultural fusion

The Phoenician alphabet may have been influenced by Egyptian hieroglyphics.

• Technological progress

Korea's bronze movable type technology was ahead of Europe.

• Artistic value

The seals of the Indus Valley Civilization show a high level of artistic achievement.

• Evolution of writing

Brahmi script is the ancestor of many modern Indian scripts.

• Impact of globalization

Southeast Asian scripts are deeply influenced by Indian culture.

• Digital opportunities

Young designers should use technology to preserve local scripts.

Fig.1.2 Lecture slide

Lecture 4 -  AdTypo_4_Designing Type

• The Art and Science of Font Design

Font design is both artistic and scientific, and requires both creativity and rigorous testing to ensure readability and functionality.

• The importance of historical perspective

Understanding the history of a font helps to understand its original design intention and provides inspiration and reference for new fonts.

• Design Tools and Methods

From hand-painted to digital, different tools have their own advantages and disadvantages, but they all need to pay attention to the balance between font and cavity to enhance readability.

• Letter Construction Skills

Constructing letters through a grid system can effectively improve design efficiency and maintain consistency.

• The importance of testing and feedback

Prototyping and user feedback are an integral part of font design, helping to identify potential problems and optimize the final result.

• Diversity of Motivation

The driving force of font design can come from internal interests or external needs, but successful projects often stem from the designer's deep understanding and investment in the goal.

Fig.1.3 Lecture slide

Lecture 5 -  AdTypo_5_PerceptionAndOrganisation

• Contrast Creation

Designers use contrast to differentiate information, using methods such as size, weight, and color to guide the reader's eye.

• Gestalt Principles

Laws such as similarity and proximity help to visually organize content, influencing how viewers perceive and interpret the design.

• Typographic Form

Typefaces help create visual impact and memorability through strategic placement and alignment, balancing form and function.

• Directional Contrast

Angles and directions within text create dynamic layouts, enhancing visual interest and engagement.

• Texture in Typography

Combining different sizes and weights can create texture, adding depth and visual appeal to typographic compositions.

• Social Responsibility

Properly organized typography ensures effective knowledge transfer, fulfilling the designer's responsibility to the author and the reader.

• Practice and Application

Understanding theoretical principles requires practical application and continuous learning to perfect design skills.

Fig.1.4 Lecture slide

---

INSTRUCTIONS

---

TASK

Task 1: Exercise 1 - Typographic Systems

For this exercise, we are to explore 8 systems which are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral in InDesign using the content given in the MIB. We were also instructed to watch the InDesign demonstration videos in the lecture playlist.

- Size 200 x 200 mm

- Colours: Black and additional colour

- Minor graphical elements

Week 1 Practical

Fig.1.0 Creation process (27/04/25)

Fig.1.1 Axial system attempts (27.04.25)

Fig.1.2 Dilatational system attempts (27.04.25)

Fig.1.3 Transitional system attempts (27.04.25)

Fig.1.4 Random system attempts (27.04.25)

Fig.1.5 Grid system attempts (27.04.25)

Fig.1.6 Radial system attempts (27.04.25)

Fig.1.7 Modular system attempts (27.04.25)

Fig.1.8 Bilateral system attempts (27.04.25)

Week 2 attempts - Revised and further exploration

In the second week, Mr. Vinod reviewed my assignment and I revised it according to his suggestions.

Fig. 2.0 Modification process (29/04/25)

---

Final Task 1 - Exercise 1: Typographic Systems

Fig. 2.1 Final Axial System - JPEG (29/04/25)

Fig. 2.2 Final Bilateral System - JPEG (29/04/25)

Fig. 2.3 Final Grid System - JPEG (29/04/25)

Fig. 2.4 Final Random System - JPEG (29/04/25)

Fig. 2.5 Final Dilatational System - JPEG (29/04/25)

Fig. 2.6 Final Radial System - JPEG (29/04/25)

Fig. 2.7 Final Transitional System - JPEG (29/04/25)

Fig. 2.8 Final Modular System - JPEG (29/04/25)

 

 Fig. 2.9 Final Task 1 - Exercise 1: Typographic Systems - PDF (30/04/25)

   

 

Fig. 2.10 Final Task 1 - Exercise 1: Typographic Systems Grids and Guides - PDF (30/04/25)

---

Task 1: Exercise 2 - Type and Play

Week 2 Attempt

For exercise 2, we are tasked to analyse, dissect and identify potential letterforms within a chosen image of a subject - organic or man-made.

- Uppercase or lowercase only

- Choose reference typeface from the 10 typefaces

Fig. 3.0 Chosen subject &Traced letters - plant (02/05/25)

I extracted the letters V, A, F, D, H from plants and used the ITC Garamond Std Ultra Narrow font as reference.

First, I adjusted the angle and height of the stroke, then the width, and finally the thickness of the stroke. I felt that the letter was too rough, so I started to refine it, making it look more like a letter, less abstract, but retaining the original dynamics.

Fig.3.1 Letterform Design Compilation - Attempt 1(03/05/25)

Fig.3.2 Extract letters - Attempt 1 (03/05/25)

Fig.3.3 Letterform - Attempt 1(03/05/25)

Week 3 Attempt

Mr. Vinod said that the A and F that I extracted from the image could not reflect the characteristics of the image that I had chosen, and circled a leaf at one spot on the right side and said that I could re-extract the letters from that spot and make modifications.

Fig.3.4 Letterform Design Compilation- Attempt 2(06/05/25)

Fig.3.5 Extract letters - Attempt 2 (06/05/25)

Fig.3.6 Letterform - Attempt 2 (06/05/25)

After modifying the font, I used the font to make a poster.

Fig.3.7 Poster - Attempt 1 (10/05/25)

Week 4 Attempt

Mr. Vinod said that my font was still not similar enough to the selected shape, so I modified my font again.

Fig.3.8 Letterform - Attempt 3(13/05/25)

Fig.3.9 Letterform Design Compilation - Attempt 3 (13/05/25)

Mr. Vinod said that the text at the bottom of my poster could be removed, so I modified the poster.

Fig.3.10 Poster - Attempt 2 (13/05/25)

---

Final Task 1 - Exercise 2: Type and Image

Fig.4.0 Image and Extraction (14/05/25)

Fig.4.1 Overall Process (14/05/25)

Fig.4.2 Extracted letterforms (14/05/25)

Fig.4.3 Reference font (14/05/25)

Fig.4.4 Final Letterform (14/05/25)

Fig.4.5 Original extraction (top) and final letterform (bottom) comparison (14/05/25)

Fig 4.6 Exercise 2 Part 1 PDF Compilation (14/05/25)

---

Final Outcome of Part 2

Fig 5.0 Finalized Poster  (15/05/25)

Fig 5.1 Finalized Poster - PDF  (15/05/25)

---

FEEDBACK

Week 1

• General feedback : In the first class, Mr. Vinod introduced the content of the course.

• Specific feedback : In the first class, Mr. Vinod introduced us to the content we need to learn about advanced typesetting. He showed us excellent blog templates for reference and learning. He also assigned us tasks to be completed in the first week.

Week 2

• General feedback : In the second week, Mr. Vinod reviewed our assignments.

• Specific feedback : Mr. Vinod told me that when using the Axial system, don't need to tilt it too much, as this will affect reading a little.  Just need to tilt it appropriately.

Week 3

• General feedback : In the third week, Mr. Vinod reviewed our assignments.

• Specific feedback : Mr. Vinod said that my final font was pretty good, but the letters extracted from the image could not reflect the characteristics of the image I chose, and said that I could re-extract the letters from somewhere else and make modifications.

Week 4

• General feedback : In this week, Mr. Vinod reviewed our assignments.

• Specific feedback : Mr. Vinod said that the final shape of my font was not very similar to the selected pattern, and asked me to revise it again. He also pointed out some problems with my poster, saying that there were too many words below and it could be reduced.

Week 5

• General feedback : In this week, Mr. Vinod reviewed our assignments.

• Specific feedback : Mr. Vinod said that I have done too little content and need to do more.

---

REFLECTIONS

Experience

In the subsequent exercises of this module, I continued to explore more aspects of typography and font design. This was a challenging but very rewarding process. I tried to apply what I learned before to new tasks, and this time I spent more time on the observation and thinking stage.

Observation

At this stage, I realized that fonts do not exist in isolation. They are closely related to elements such as composition, white space, and color. I constantly compared and modified between multiple versions, trying to understand the visual impact of small differences. This exercise trained my sensitivity to details and improved my ability to grasp the coordination of the overall design.

Discoverie

Through the lectures and readings in this stage, I broadened my understanding of font design, such as understanding some classic font design schools, font structure classification, and the cultural context of fonts. I especially liked a section on "visual rhythm", which made me understand how to guide readers' reading direction and emotions in typography.

---

FURTHER READING

(Fig.6.0) 'Typographic Systems' by Kimberly Elam (2007), Week 1

In order to better understand the typographic concepts involved in the class, I read Kimberly Elam's book 'Typographic Systems'.

This book made me realize that typography is not just about "lining up" words, but also about the art of information organization and visual guidance.

I am particularly interested in the modular system because it emphasizes consistency and repetitive rhythm between elements, which is very suitable for building layouts with unified visual language but diverse content.

Overall, this book not only deepened my understanding of typographic systems, but also made me pay more attention to the value of structural thinking in visual communication.