ADVANCED TYPOGRAPHY / TASK 1: EXERCISES

September 23, 2025

ADVANCED TYPOGRAPHY / TASK 1: EXERCISES - TYPOGRAPHIC SYSTEM & FINDING TYPE

-

22.9.2025 -19.10.2025 (week 1 - week 4) 
Low Xin Er / 0374596 / Bachelor of creative media

Advance Typography / Exercises - Typographic system & Finding Type

---

• Lecture 1: Typographic systems
• Lecture 2: Typographic composition
• Lecture 3: Context & Creativity 
• Lecture 4: Designing Typeface
• Exercise 1_Typographic System
• Exercise 2_Typo & Play
• Feedback
• Reflection
• Futher Reading

---

LECTURE NOTES

week 1 (24.9.2025)

Lecture 1: Typographic systems

All design is based on a structural system as according to Elam. There are 8 major variations :

• Axial
• Radial 
• Dilatational
• Random
• Grid 
• Modular
• Transitional 
• Bilateral

Typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria: hierarchy, order of reading, legibility and contras. The typographic systems has a sets of rules that provide a sense of purpose that focuses and direct the decision making. They are similar to what architect term shape grammars as it provide a solid frame work for the learners to be guided in their exploration. 

Fig 1.1 Typographic systems (23/9/2025, week 1)

Axial system: All the elements are organized to the left or right of a single axis, can be bent.

Radial system: All elements are extended from a point of focus. 

Dilatational system: All elements expand from a central point in a circular fashion,can be overlapping.

Random system: Elements appear to have no specific pattern or relationship. 

Grid system: A system of vertical and horizontal divisions. 

Transition system: An informal system of layered banding. Weight, color and size could be play to create composition. 

Modular system: A series of non-objective elements that are constructed in as a standardized units. The unit can be randomly shifl as without larger grid. 

Bilateral system: All text is arranged symmetrically on a single axis. 

"Typography is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art." (James Felici, The complete Manual of Typography)

week 2 (30.9.2025)

• 
  

Lecture 2: Typographic composition

Principles of Design Composition

• Emphasis, isolation, repetition ,symmetry and asymmetry, alignment, perspective are the key concepts of compositions. 
• More relevant to imagery than complex units of information that consist different elements.

Fig 1.2.1 Emphasis (30/9/2025, week 2)

The Rule of thirds

• Photographic guide to composition
• A frame divide to 3 columns and rows.

Grid system (raster system)

• The most used system 
• Has a strong versatility
• Swiss style of typography

Chaos, Randomness and symmetry

• explore during the past-modernist era in Typographic system. 
• bests to combine Legibility and readability seamlessly
• examples: Davi Carson, Paula Soher, Jonathan Barnbrook

Fig 1.2.2 Designs by Paula Scher, Jonathan Barnbook, David Carson (30/9/2025, week 2)

Environment Grid 

• Exploration of an existing structure or numerous structures combined. 
• An extraction of crucial lines both curved and straight are formed. 
• The designer organizes his information around the super- structure, which includes non objective elements to create a unique mixture of texture and visual. 

Form and Movement

• Exploraton on an existing Grid Systems.
• Placement of a form on page creates movement, whether the page is paper or screen. 
• Could be represent images, text and color.

'There is a fine line between genius and insanity, just as there is a fine line between legibility-readlity & memorability.'

Lecture 3: Context & Creativity 

Handwriting 

• The first mechanically produced letterforms were designed to directly imitate handwriting. 
• The basis or standard for form, spacing and conventions mechanical type would try and mimic. 

Cuneiform (3000BCE)

• Earliest system of actual writing 
• Was used in a number of languages between the 34C.B.E through the 1st century C.E
• Result of pressing the blunt end of a reed stylus into wet clay tablets.

Fig 1.3.1 cuneiform (6/10/2025,week3)

Hieroglyphics (2613-2160 B.C.E)

• Fused with the art of relief carving
• Mixture of both rebus and phonetic characters
• Potential to be used in ideograms (things actually depict), determinatives (indicate the general idea od the word) and phonograms (represent sounds that spell out individual words).

Fig.Ancient Egypt hieroglyphics chart (6/10/2025,week3)

Early Greek (5th C. B.C.E)

• Was often read in a format known as boustrophedon or "as the ox plows." One row would read left to right and then switch from right to left.
• Drawn freehand, not constructed with compasses and rules, and they had no serifs.
• In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

Roman Uncials (4th C)

• By the 4th century Roman letters were becoming more rounded
• The curved form allowed for fewer strokes and could be written faster.

English Half Uncials (8th C.)

• The uncial evolved into a more slanted and condensed form in England

Carolingian Minuscule

• Capitals at the start of a sentence, spaces between words and punctuation.
• Became the pattern for the Humanistic writing of the fifteenth century
• The basis of lower-case roman type.

Black Letter (12-15 C. CE)

• Tight spacing and condensed lettering. 
• Evenly spaced verticals dominated the letterform
• Condensing line spacing and letter spacing reduced the amount of costly materials in book production. 

The Italian Renaissance

• Humanist named the newly rediscovered letterforms Antica. 
• Being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalised letter.

Movable Type (11C.-14 C.)

• Printing (wood block) had already been practiced in China, Korea and Japan.
• Earliest known printed book is the Diamond Sutra by Koreans.
• In late 14 C., the Koreans established a foundry to cast movable type in bronze, it allow the dismantling and resetting of text.

Fig 1.3.2 Letterform through the ages (6/10/2025,week3)

With the digital revolution, the west would begin to digitize many of it's historical creations and type foundries would create, market and sell of license them.

Evolution of Middle Eastern Alphabet

• The script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.

Evolution of the Chinese script

• Oracle bone > seal script > clerical script
• Traditional and simplified scripts

Fig1.3.3 Evolution of Middle Eastern Alphabet & chinese script (6/10/2025,week3)

Indus Valley Civilization (IVC) script (3500-2000 BCE)

• The oldest writing found in the ‘Indian’ 
• Yet undeciphered and seems to have been somewhat logo-syllabic in nature. 

Fig1.3.4 Indus Valley civilization script (6/10/2025,week3)

Brahmi script (450-350 B.C.E)

• The earliest writing system developed in India after the Indus script. 
• It is one of the most influential writing systems
• All modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Fig1.3.5 Brahmi script (6/10/2025,week3)

Pallava (or Pallawa in Malay)

a South Indian script originally used for writing Sanskrit and Tamil

Fig1.3.6 sountheast asia script (6/10/2025,week3)

Local Movements and individuals

• murasu.com spear-headed by programmer and typographer Muthu Nedumaran.
• Huruf= a local group of graphic designers interested in the localized lettering of latin and vernacular letters painted or inscribed on walls
• Ek Type and Indian Type Foundry= organizations that have done ground breaking work with the development of vernacular typefaces in India.

'Looking behind gives you context. Looking foward gives you opportunities.' - Mr. Vinod

Lecture 4: Designing Type

Reason for designing typeface:

• Type design carries a social responsibility so one must continue to improves its legibility
• Type design is a form of artistic expression

Frutiger
Create a clean, distinctive and legible typeface that is easy to see from both close up and far away. Extremely functional.

Verdana

Extremely legible even at very small sizes on the screen due in part to the popurlarity of the internet and electronic devices.

Johnston Sans
Created by Edward Johnsatsn. He was asked to create a typeface with “bold simplicity”. It is used in the posters and signage of London's Underground railway.

Fig 1.4.1 Typefaces of Frutiger/Verdana/Johnston Sans (13/10/2025,week4)

General Process of Type Design

1. Research
2. Sketching
3. Digitization
4. Testing
5. Deploy

1) Research

• Understand type history, type anatomy and type conventions before designing a type.
• Determine the type’s purpose or what it would be used for and what is the difference in application. 
• Examine existing fonts as references.

2) Sketching

• Sketch the typeface using the traditional tool set (brushes/ pens, ink and paper) then scan them for the purpose of digitization. 
• Using digital tool sets(wacom) , but this can sometimes impede the natural movement of hand strokes.

3) Digitazation

• Professionals software that are used in digitization of  typefacetools: FontLab and Glyphs App or Adobe Illustrator for crafting letterforms, which is often criticized by purists who prefer specialized font apps.
• Attention shouldbe directed towards the overall form and the counter form, as readability heavily dependent on it.

4) Testing

• Important component in the design thinking process, 
• Part of the process of refining and correcting aspects of the typeface. 
• Prototyping plays an important role in this phase, generating valuable insights.
• The readability and legibility of a typeface are important considerations,
• Form expression holds more precedence, readability and legibility are comparatively less critical.

5) Deploy

• Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases. 
• He task of revision doesn’t end upon deployment.
• The rigour of the testing is important in so that the teething issue remain minor.

Typeface Construction

Using grids (with circular forms) can facilitate the construction of letterforms and is a possible method to build/create/design your letterform.

Fig 1.4.2 Roman Capital in construction grid (13/10/2025,week4)

Fig 1.4.3 Classification according to form and construction (13/10/2025,week4)

Many different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved (and protruding) forms past the baseline and cap line. This also applies to vertical alignment between curved and straight forms.

A visual correction is also needed for the distance between letters. 

• Must be altered to a uniform visual white space
• The white space between the letters should appear the same.

Fig 1.4.4 Letters "C" and "E" (13/10/2025,week4)

'The mindset of a type designer - if clinically studied - might be construed as sick; plagued by an unusual obsession to detail.' -- Mr. Vinod

---

INSTRUCTIONS

fig 2.1 Module Information Booklet (23.9.2025)

---

TASK 1

Exercise 1_Typographic System

Research

Progress & feedback

Final submission

Exercise 2_Typo & Play

Research

Progress & feedback

Final submission

Exercise 1_Typographic System

Copywriting

The Design School,
Taylor’s University

The ABCs of Bauhaus Design Theory
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

Fig 2.1 Atempt

Research 

First, I searched online for references to the typographic systems mentioned above. I chose a copywritting related to Bauhaus-style so I also do some research the history and features of Bauhaus as a foundation for my design.

Fig 2.1.1 Design elements / decorations (24/9/2025, week 1)

Bauhaus style:

Bauhaus is a modernist design movement born in Germany, emphasizing function, simplicity, and harmony between art, craft, and technology. Its style is defined by clean geometry, minimal ornament, balanced compositions, and the motto “form follows function.” Designers favored primary colors, black, white, and neutral tones, combined with bold lines and asymmetry. 

Fig 2.1.2 Design elements / decorations (24/9/2025, week 1)

Progress

I also prepared some graphic elements that can further highlight the features of Bauhaus in my layout design. They are mainly simple shapes such as circles, squares, triangles, and lines.

Fig 2.1.3 Design elements / decorations (24/9/2025, week 1)

1. Axial System

Fig 2.1.4 Axial System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• For the first axial line, the date copy below could be moved inwards to better align with the date.
• Self-evaluation: The bottom copy of the second line doesn't align closely with the axial line.

2. Radial System

Fig 2.1.5 Radial System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• In the first design, the line next to the date can be extended

3. Dilatational System

Fig 2.1.6 Dilatational System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• Acceptable, the line can be thinner 0.5

4. Random System

Fig 2.1.7 Random System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• Not random enough

5. Grid System

Fig 2.1.8 Grid System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• It is acceptable, but the copy needs more design changes, such as bolding the font or changing the color.

6. Transitional System

Fig 2.1.9 Trasitional System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• Acceptable

7. Modular System

Fig 2.1.10 Modular System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• Not compatible with modular systems
• Each copy has a hierarchy, and you can change the thickness or color of the copy font to make changes.

8. Bilateral System

Fig 2.1.11 Bilateral System first attempt (25/9/2024, week 2)

Week 2 feedback (1/10/2025):

• The first bottom line can be changed to a straight line.

Final Submission: Exercise 1_Typographic System

Fig 2.1.12 Final Axial System (JPEG) (3/10/2025, week 3)

Fig 2.1.13 Final Radial System (JPEG) (3/10/2025, week 3)

Fig 2.1.14 Final Dilatational System (JPEG) (3/10/2025, week 3)

Fig 2.1.15 Final Random System (JPEG) (3/10/2025, week 3)

Fig 2.1.16 Final Grid System (JPEG) (3/10/2025, week 3)

Fig 2.1.17 Final Transitional System (JPEG) (3/10/2025, week 3)

Fig 2.1.18 Final Modular System (JPEG) (3/10/2025, week 3)

Fig 2.1.19 Final Bilateral System (JPEG) (3/10/2025, week 3)

Fig 2.1.20 Final Submission_Exercise 1_Typographic System (PDF) (3/10/2025, week 3)

Fig 2.1.21 Final Submission_Exercise 1_Typographic System with Grid (PDF) (3/10/2025, week 3)

---

Exercise 2_Type & Play

More reference work for this exercise: Finding Type: A Novel Typographic Exercise

Fig 2.2.1 Photo references (27/9/2025, week 2)

Fig 2.2.2 Photo tracing (27/9/2025, week 2)

Fig 2.2.3 Original letter extraction (27/9/2025, week 2)

Fig 2.2.5 Font as reference: ITC Garamond Std Ultra (2/10/2025, week 3)

Fig 2.2.5 Letters on guides (27/9/2025, week 2)

Fig 2.2.5 Letter evolution (2/10/2025, week 3)

First Attempt

Fig 2.2.5 Draft 1 (2/10/2025, week 3)

Feedback

• Smooth out the letter b, a, and e, and then refine the remaining letters c and c accordingly. 
• Adjust the weight and enlarge the features, and then modify the rest of the text accordingly.

Fig 2.2.5 Refinement (2/10/2025, week 3)

Fig 2.2.5 Final font outcome (2/10/2025, week 3)

Poster Design

Size of poster is 1024px x 1024px (Export JPG 300ppi)

Fig 2.2.5 Images that used for poster  (6/10/2025, week 3)

Fig 2.2.5 Grain effect  (6/10/2025, week 3)

Fig 2.2.5 Adding texture  (6/10/2025, week 3)

Fig 2.2.5 Movie credit  (6/10/2025, week 3)

Fig 2.2.5 Final Draft  (6/10/2025, week 3)

Feedback（15/10/2025,week4）

• The bottom copy can be improved by adding a gradient effect to improve the readability of the words, the opacity can lower to 80% to avoid blocking the background image. The rest of the elements are good.

Fig 2.2.6 Final Poster in JPEG  (15/10/2025, week 4)

Fig 2.2.7 Final Poster in PDF  (15/10/2025, week 4)

---

FEEDBACK

Week 2:

General Feedback

Mr. Vinod publicly reviewed other people's work. 

• Too many graphic elements distract from the message and oversaturate the image. Simpler designs are better. 
• Place graphics where they need attention, not where they distract, unless the design is intended to be loud. 
• A modular system allows for movement between units without overlapping. Many people confuse it with a grid system, but it's not affected by the grid.
• Content in a random system is still readable, just not as easy to read at first glance. 
• Don't use text outlines, especially when the font size is very small. 
• Learning typography from text and then adding color and graphics is both free and challenging. Adding images after this process is the correct learning sequence to ensure mastery of typography. 
• Try to avoid drop shadows on text, as they're prone to errors and can make the image look cluttered. 
• Be mindful of your presentation, for example, by providing ample space and avoiding overlying irrelevant information. 
• Avoid 45-degree tilts, as these cut the image in half rather than creating a dynamic effect. 
• Given the ample space, placing text too close together will make it appear even more congested and difficult to read. 
• Dark color on black text will lack contrast.

Specific Feedback

• For the first axial design, the D text below could be tucked in further and aligned with the date text for better alignment. 
• For the first radial design, the line next to the date could extend beyond the frame. 
• For the first dilatational design, the line could be thinner. The line design in the 0.5mm layout could be set to 0.5mm.
•  The random system isn't random enough. 
• For the first grid design, the text could be more varied, perhaps with bolder fonts or a different color. The transitional design is acceptable. 
• For the first modular design, there's a misunderstanding regarding the layout. Similarly, it's recommended that each piece of text be organized hierarchically. 
• For the first bilateral design, the bottom line could be made vertical.

Week 3: 

General Feedback

• The final refinement should not only amplify the features but also maintain a certain degree of separation from the original letterforms.
• For bold black fonts, you can invert the features and print them in white.
• When extracting the original letterforms from the image, avoid excessive elements or embellishments.
• Extract the letterforms based on the characteristics seen in the image, such as holes, to ensure that the letterforms retain the characteristics of the image.
• Don't be influenced by the reference font; it's only for reference, not to be applied directly.
• Extracting fonts requires some imagination.

Specific Feedback

• Smooth out the letter b, a, and e, and then refine the remaining letters c and c accordingly. 
• Adjust the weight and enlarge the features, and then modify the rest of the text accordingly.

Week 4: 

General Feedback

• If poster space is quite empty, add some logo elements (related to movie posters).
• Consider readability when choosing font colors.
• Reference and study real movie posters when designing.
• Consider rich and harmonious colors in your poster; a single color palette can be dull.
• The font design should naturally harmonize with the meaning, using relevant textures or special effects to avoid any inconsistency.
• If the font design itself is already interesting (irregular), avoid excessive typographical changes.
• Remove shadow effects from fonts, especially at small sizes, as they can affect readability and aesthetics.
• For titles, ensure that each letter size is visually consistent and on the same baseline.
• For titles about water, use a 30% eraser to smooth out the edges of the letters to create a sense of gradient and flow.
• For e-portfolios, refer to the excellent example links in the guide to ensure all information is complete.

Specific Feedback

• The bottom copy can be improved by adding a gradient effect to improve the readability of the words, the opacity can lower to 80% to avoid blocking the background image.
• The rest of the elements are good.

---

REFLECTION

Experience

Exercise 1: Although the course was well explained, I still made some mistakes, such as with the modular system. Initially, I constantly reviewed my work, especially when my design style differed significantly from others. However, after receiving feedback in class, I realized that there's no end to this process. The only way to progress is to learn from others' strengths, correct my own shortcomings, and avoid their mistakes.

Exercise 2: The entire process felt refreshing and gave me a lot of room for creativity. Since I was extracting letters from a textured image, I was focused on preserving as many features and textures as possible. However, the professor reminded me that a good typeface is more about unity. As long as the features are clear, the other lines should focus on flow.

Observations

For exercise 1, I discovered that others shared a mistake I had made before: treating design as a subject that needed embellishment to enhance its aesthetic. Perhaps because I was an art student, I subconsciously wanted to embellish my work. Now I understand that design is far more than just aesthetics; it also requires convenience and efficiency. Good design is about clearly expressing content while also balancing aesthetics. 

Exercise 2: I found the second exe particularly interesting because it challenged students to notice various patterns in daily life that they might not otherwise observe. I've only just now realized that the patterns in the cabbage I cut every day can also serve as inspiration for typefaces. I think this is what it means when inspiration comes from life.

Findings

I've come to realize that my design experience is unconsciously stored in my mind. While I may not recall it clearly, it's a great help whenever inspiration is needed. I used to be limited by a lack of inspiration and a limited "style." This was because the fields I covered were too limited, and my mental inventory was too limited. So now I'm practicing more and learning more possibilities, enriching and diversifying my inventory to inform my design ideas. Moreover, I got a very interesting comment from lecture. People who are too orderly find it difficult to create randomness. This perfectly describes my situation. Therefore, I want to learn to change and become a designer who does not stick to any style before laying a solid foundation.

---

FUTHER READING

Fig 3.1 Typography Referenced (9/10/2025,week 3)

This book provides a comprehensive account of the development of writing, including the characteristics of typefaces throughout each century. Especially helpful for beginners, there are special topics dedicated to distinctive typefaces, explaining the patterns underlying these characteristics. Initially, I had no idea where to find distinctive typefaces, nor could I clearly distinguish the differences between them. This information provided a great foundation for type design. The epilogue also discusses some principles of type design, and the numerous images provided for reference are very helpful.

< Back To Top >