Advanced Typography - Task 1 / Exercises: Typographic Systems & Type & Play

The first lecture introduced typographic systems as frameworks that not only guide beginner designers in establishing visual hierarchy and structure but also open up creative avenues for dynamic text composition. The typographic systems consist of:

1. Axial System: All elements are organised to the left or right of a single axis.

Figure 1.1 Axial System

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

Figure 1.2 Radial System

3. Dilatational System: All elements expand from a central point in a circular fashion.

Figure 1.3 Dilational System

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

Figure 1.4 Random System

5. Grid System: A system of vertical and horizontal divisions.

Figure 1.5 Grid System

6. Transitional System: An informal system of layered banding.

Figure 1.6 Transitional System

7. Modular System: A series of non-objective elements that are constructed in as a standardised units. The units can be rearranged in various configurations to create flexible and structured compositions.

Figure 1.7 Modular System

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

Figure 1.8 Bilateral System

Week 2

AdTypo_2_Typographic Composition

Principles of Design Composition

1. Emphasis

2. The Rule of Thirds

3. Isolation

4. Repetition

5, Symmetry

6.Asymmetry

7. Alignment

8. Perspective

These abstract design principles can feel ambiguous when applied to typographic layouts, as they often seem more suited to imagery than to complex compositions involving text, images, and colour. While their application may feel disparate at times, some principles are still more easily adaptable than others in practice such as Emphasis

Figure 1.9 Emphasis

Realistically, The Rule of Thirds is rarely used when theres other more effective compositional strategies.

Figure 1.10 The Rule of Thirds

Typographic Systems

1. The 8 Typographic Systems

- Most practical and widely used: Grid System (Raster Systeme)

- The Grid System originates from letterpress printing’s gridded compositional structure and further developed into Swiss (Modernist) Typography style

-Key figures: Josef Müller-Brockmann, Jan Tschichold, Max Bill

Figure 1.11 The Grid Systems

- As a reaction against the rigid order of modernist design, post-modernist typography emerged as younger designers question and challenge this notion of order

- Emphasised chaos, randomness, and asymmetry over strict legibility and readability.

- Key figures: David Carson, Paula Scher, Jonathan Barnbrook

- Reflected the rebellious spirit of punk culture and anti-establishment movements

Figure 1.12 Left to Right: Work of Paula Scher, Jonathan Barnbrook, David Carson

2. Environmental Grid

- Built by studying real spaces or combining parts of different structures

- Key lines (curved and straight) are taken to form a layout base, designer then arranges content around this structure

- Results in a unique, textured, and visually interesting layout and gives meaning to the design because it’s shaped by the environment linked to the message or audience

Figure 1.13 Example of Environmental Grid

3. Form and Movement

Based on exploration of existing Grid Systems, this model is created to help:

- Explore the grid’s versatility and break the rigidity often linked to grid usage Explore the grid’s versatility

- View page-turning as slowed-down animation

- Movement is created by repeating form placement across multiple pages

- Uses image, text, and color to guide visual flow

Figure 1.14 Static page layouts

Figure 1.15 Visualisation of page-turning as animation

Week 3

AdTypo_3_Context & Creativity

Historical context is crucial for understanding typography deeply. Focus on handwriting as the foundation of typography.

Development of Writing Systems

1. Handwriting and Early Letter Forms

- Tools/materials influenced letter shapes: bones, charcoal, brushes, pens, etc.

- Writing surfaces: clay, papyrus, animal skins, paper

2. Evolution of the Latin Alphabet

Proto-Sinaitic → Pictographic → Phoenician (sound-based) → Greek → Latin → Roman alphabet

Figure 1.16 Evolution of Latin Alphabet

- Cuneiform (3000 B.C.E.): Pressed reed on clay, left-to-right writing

- Egyptian hieroglyphs (2613–2160 B.C.E.): Mixed rebus + phonetic characters

4. Greek and Roman Contributions

- Greeks adapted Phoenician script, added vowels, and wrote in boustrophedon (alternating directions)

- Romans refined letters with flat brushes/chisels, influencing calligraphy for 2000+ years

5. Medieval Standardisation

- Charlemagne’s Carolingian Minuscule (8th century): Standardised spaces, punctuation, and lowercase letters

- Basis for modern lowercase type

Figure 1.17 Charlemagne’s Carolingian Minuscule

6. Movable Type: East vs. West

- China / Korea's movable type innovation came before Europe

- Woodblock printing (Dharani Sutra, AD 750)

- China attempted movable type printing but struggled due to many characters and clay material

- Korea’s creation of the Hangul script helped them succeed where China had difficulties

- Korea (Late 1300-1399 C.E.): First successful bronze movable type

- Gutenberg (1450s): Often credited, but preceded by Eastern innovations

Figure 1.18 China and Korea's movable type innovation

7. Colonial Bias in Typography

- Western academia often ignored African / Middle Eastern / Asian contributions (e.g., Egyptian influence on Greece).

- Max Müller’s Aryan theory: Flawed colonial narratives distorted non-Western histories

8. Eastern Scripts and Heritage

- Middle East: Arabic evolved from Phoenician /Aramaic

- China: Oracle bone → Seal → Clerical → Modern script

- Indus Valley (3500-2000 B.C.E.): Undeciphered script, advanced urban culture

- Brahmi (450-350 B.C.E.): Parent script of most Indian/Southeast Asian scripts (e.g., Thai, Javanese)

9. Southeast Asian Writing Systems

- Pallava script (South India) → influenced Malay, Thai, Khmer

- Kawi script (Java): Basis for scripts across Indonesia / Philippines

- Jawi (Arabic-based): Spread with Islam but coexisted with local scripts

10. Lost Scripts and Revival

- Many indigenous scripts (e.g., Rencong, Batak) are fading due to colonisation/digital neglect

- Modern digitisation efforts: Malaysia's MooType (vernacular fonts) and WargaType (hand-painted lettering); India's Ek Type and Indian Type Foundry (multi-script fonts); Google / Microsoft supporting vernacular Unicode fonts

Closing: "Looking behind gives you context. Looking forward gives you opportunities."

- Vinod J. Nair

It’s important to study handwriting because it helps us understand our roots. For local designers, having a strong grasp of our own culture and history is essential in creating original typefaces. As Mr. Vinod shared, one of his friends once presented his work in Germany, but people questioned it, asking: “What’s Indian about this?" because the work appeared heavily Westernised. This shows why it’s important to draw inspiration from our own scripts and traditions instead of mimicking others' styles. By digitising forgotten scripts, we not only preserve cultural heritage but also open doors for future innovation in type design.

Week 4

AdTypo_4_Designing Type

Designers continues to design new typefaces because they carry a responsibility to improve how people read and interact with text, while also pushing typography as a form of creative expression.

Purpose and Considerations of Typefaces

1. Frutiger by Adrian Frutiger

- A sans serif typeface designed by a Swiss type designer, Adrian Frutiger in 1968

- Designed for the Charles de Gaulle International Airport, France

- Needs to be clean, distinctive and legible, easy to see from both close up and far away

- Needs to be recognisable in poor lighting or when people are moving fast, highly practical for signage

Figure 1.19 Frutiger by Adrian Frutiger

2. Verdana by Matthew Carter

- Created by Matthew Carter for Microsoft

- Needs to be extremely legible even at very small sizes on the screen

- Considerations: Characteristics based on pixel precision rather than traditional handwriting tools like brushes / chisels. Commonly confused characters: lowercase i j l

- IKEA faced backlash when switching from Futura to Verdana as the screen font designed for digital readability, Verdana was seen as less distinctive and less fitting for a major global brand’s printed materials, IKEA was critiqued for sacrificing brand identity for practicality

Figure 1.20 Verdana by Matthew Carter

3. Bell Centennial by Matthew Carter

-Designed in 1976 for AT&T, specifically for their telephone directories

- Created to tackle technical and visual challenges of Bell Gothic, the previous typeface used in phonebooks. Bell Gothic struggled with legibility at very small sizes, especially on low-quality newsprint paper prone to ink spread and blurring

- Bell Centennial has heavier ink traps to prevent ink bleed and open letterforms to maintain distinct shapes

- Named Bell Centennial to celebrate AT&T’s 100th anniversary

Figure 1.21 Bell Centennial by Matthew Carter

4. Underground by Edward Johnston

- Created in 1916 by Edward Johnston, known as “Johnston Sans”

- Commissioned by London Underground for a new typeface for posters and signage

- Designed with "bold simplicity," blending modern style with classical Roman proportions and humanist warmth

- Aimed to unify signage across different companies within the London Underground system, replacing inconsistent lettering styles

- Rooted in calligraphy but clean and elegant for the modern age

Figure 1.22 Underground by Edward Johnston

General Process of Type Design

1. Research

- Understand the history, anatomy, terminologies and conventions of type

- Determine type's purpose

- Examine current type in use for inspiration, context, usage pattern and etc.

Figure 1.23 Ink traps. Vinod J. Nair explains that ink traps were designed for fast printing on cheap, absorbent paper to keep corners sharp, but today it is most used as a design flair.

2. Sketching

- Sketch typefaces traditionally using brushes / pens / ink / paper then scan for digitisation offers better hand control

-Or sketch digitally using tools like Wacom directly into font design software; faster, more consistent, but may limit natural hand movement

-Both approaches have pros and cons

Figure 1.24 Sketch of Johnston Sans designed by Edward Johnston, sketch by Eiichi Kono

3. Digitisation

- Professional typeface digitisation software: Fontlab & Glyphs

- Another way: Use Adobe Illustrator to craft letterforms first then introduce into the specialised font apps

- Whole form and counter form of typeface should be given attention at this stage to ensure readability of the typeface

Figure 1.25 Fontlab & Glyphs

4. Testing

- Refining and correct aspects of the typeface

- Prototyping leads to important feedbacks

Figure 1.26 Prototype Stencil (Stenz), developed and designed by Vinod J. Nair.

5. Deploy

- Task of revision comes to play because there are always problems that did not come to fore during testing stages

- Rigorous testing helps minimise teething issues

Figure 1.27 Deploy

Typeface Construction

1. Roman Capital

- Uses a square grid, circle inside the square touches all four sides

- A central rectangle (¾ the size of the square) is placed within the square

- Grid system (with circular forms) aids in designing letterform

Figure 1.28 Construction grid for the Roman Capital using 8 × 8 cells.

2. Classification by Form and Construction

- The 26 alphabet characters can be grouped based on their form and construction

- Two main groups: capitals and lowercase letters

Figure 1.29 Character groups

3. Visual Correction

- Curved / protruding forms often extend slightly beyond the baseline and cap line as a visual correction, applies to vertical alignment between curved and straight forms

- Letter spacing requires adjustment for consistent visual white space (equal spacing is almost not possible)

- This process is called "fitting" the type

Figure 1.30 Visual correction

INSTRUCTIONS

Task 1 - Exercise 1: Typographic Systems

Typographic Systems: Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilateral. The 8 typographic systems (Axial, Radial, Dilatational, Random, Grid, Modular, Transitional, and Bilatera) are to be explored using the content provided. This exercise must be done using Adobe InDesign only, within a 200 x 200 mm artboard. In addition to black, one other colour may be used. Graphical elements (line, dot, etc.) are allowed but should be used minimally.

Content provided:

"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"

Task 1 - Exercise 2: Type & Play

Select a simple image of a man-made object or natural element and analyse it to identify potential letterforms. These letterforms are then dissected, explored, and refined from their initial crude forms to more polished, digitised versions while maintaining core features of their origin. Using a reference font as a guide, further refine the letterforms and, once completed, integrate them with image to create a composition (movie poster) where the text and visual elements forms a cohesive symbiotic relationship.

PROCESS WORK

Task 1 - Exercise 1: Typographic Systems

Understanding Title

Given the title of contents: "The ABCs of Bauhaus Design Theory", I first read the materials provided by Mr. Vinod to better understand the meaning of the title. According to Miller (2000) in figure 2.1, The Bauhaus has come to be seen as a defining moment for the avant-garde, a time when artists stripped away old traditions to uncover the basic building blocks of visual design. This new visual language embraces basic forms such as the triangles, squares and circles, the trio that kept showing up in the work of Bauhaus teachers and students. This emphasis on basic forms highlights Bauhaus' focus on the essentials.

Figure 2.1 The ABCs of ▲■⭘: The Bauhaus and Design Theory

edited by Ellen Lupton and J. Abbott Miller

Figure 2.2 Symbol design for Bauhaus Press

by Lasslo Moholy-Nagy, 1923

Recognising Bauhaus design’s strong association with the basic forms, I incorporated graphical elements centered around triangles, squares, and circles in my designs later on to reinforce the core principles of simplicity, clarity, and functionality that Bauhaus advocates.

Sketches

I started by coming up with sketches to explore and visualise different compositions.

Figure 2.3 Sketches (25/04/25)

Drafts To Final (Process)

1. Axial System

Firstly, I created a typographic scale in the Typescale website (Figure 2.4), I decided to use this scale as reference to make quicker decision in font sizing and ensure (to some extent) that the text sizes are proportionate and aesthetically balanced. I opted for the minor-third scale because I wanted noticeable variation between big titles and smaller body text, but with subtler jumps between body text and subheadings for a smoother hierarchy.

Figure 2.4 Typographic scale created in https://typescale.com/ (25/04/25)

I began by arranging the text on both sides of a slanted 11.5° axis, ensuring that the gutters between the text blocks and the axis were consistently aligned. To draw attention, I highlighted key informations such as the organising school, the title, and the date in red (as one of the primary colour, a reflection to Bauhaus' design philosophy and closely associated with Taylor's University's brand colour). Additionally, the phrase "Open Public Lectures:" is set vertically along the axis to add visual variation and interest to the composition (Figure 2.5).

Figure 2.5 Axial system (Draft designs) (25/04/25)

I decided to go with a non-slanted axis because it offered more practical spacing, which helped me simplify the design by reducing unnecessary lines from the previous drafts. This adjustment allowed the layout to naturally form circular, cubic, and triangular shapes, which I think align well with Bauhaus’ design philosophy (Figure 2.6).

Fonts used:

Futura Std (Medium, Medium Oblique, Bold)

Figure 2.6 Axial System (Final design) (05/05/25)

2. Radial System

I aligned the text along guide lines extending from the centre point of circles. Experimented with different compositions to find the one with the strongest hierarchy (Figure 2.7). I used varying fonts to distinguish information categories. I also bolded key details like the title, date, and venue to emphasise their importance.

Figure 2.7 Radial system (Draft designs) (25/04/25)

I introduced colour to add vibrancy to the design, using red to highlight key details and bold fonts to emphasise important information categories. Each circle serves as a visual focal point, their sizes range from large to small to establish sense of hierarchy from essential to less important details, the eye is guided from the largest circle at the top right to the smallest circle at the bottom. The text is aligned along a curved path (Figure 2.8) to create a dynamic reading flow that breaks away from conventional linear reading. The final design is in Figure 2.9.

Fonts used:

Futura Std (Medium, Medium Oblique, Heavy, Bold)

Figure 2.8 Curved path (Final Design) (05/05/25)

Figure 2.9 Radial System (Final design) (05/05/25)

3. Dilatational System

I arranged the text around a circle, it serves as a focal point to direct attention to the title first. I increased the line spacing between different information categories to make each section more distinguishable and to create a more structured reading flow (Figure 2.10).

Figure 2.10 Dilatational system (Draft designs) (26/04/25)

I adjusted the sizes of the text and visual element to introduce more breathing space within the composition. The title in the previous drafts felt too tight compared to other informations, so I increased its line spacing to create a more balanced look within the composition. The reading flow starts from the bottom right circle and moves to the upper right, guiding the viewer from the most important information to the least important ones (Figure 2.11).

Fonts used:

Futura Std (Medium, Bold)

Univers LT Std (73 Black Extended)

Figure 2.11 Dilatational System (Final design) (05/05/25)

4. Random System

I used a wide variety of fonts and font sizes to emphasise a sense of randomness (Figure 2.12). Visually, the text appears scattered across the layout, yet I grouped information from the same category closer together to help readers differentiate between them more easily.

Fonts used:
Futura (Bold, Medium)
Univers LT Std (49 Light Ultra Condensed, 59 Ultra Condensed)

Figure 2.12 Random system (Draft designs) (27/04/25)

I chose this version (Figure 2.13) as the final design because it demonstrates a stronger hierarchy of information. The large, bold title immediately captures the viewer’s attention and ensures readability. Most text is placed in separate text boxes, I added one text along a small circular path to balance and soften the composition’s geometry. Additionally, I like how the negative space provides sufficient breathing room to the overall composition despite the closely arranged text.

Figure 2.13 Random System (Final design) (05/05/25)

5. Grid System

I explored different text compositions following a 10×10 grid (Figure 2.14).

Fonts used in draft designs:

Univers LT Std (fsfgs

Futura Std (Medium, Medium Oblique, Bold)

Figure 2.14 Grid system (Draft designs) (28/04/25)

I reduced the amount of visual elements in the final design (Figure 2.15) to place greater emphasis on the typography itself.

Fonts used in final design:

Futura Std (Medium, Medium Oblique)

Figure 2.15 Grid System (Final design) (05/05/25)

6. Transitional System

I explored compositions with text arranged in both linear and curved bands, positioned at various angles, slanted and vertical (Figure 2.16). I wanted to include all three primary shapes to reflect the Bauhaus principles while emphasising movement and flow.

Figure 2.16 Transitional system (Draft designs) (01/05/25)

I chose version in Figure 2.17 as the final design. The text itself remains straight and upright, arranged in organised bands that create a clear and easy to read layout while the slanted triangle introduces contrast by creating emphasis on the title and adds playfulness to the overall composition. I added the cuboid lines to separate information categories and guide the eye from top to bottom.

Fonts used:

Futura Std (Medium, Medium Oblique, Heavy, Bold)

Figure 2.17 Transitional System (Final design) (05/05/25)

7. Modular System

I structured the text within proportionate blocks based on a grid to reinforce the modular system’s focus on order and consistency (Figure 2.18).

Figure 2.18 Modular system (Draft designs) (01/05/25)

Once the grid layout was established, I adjusted and combined some of the blocks to introduce variation while maintaining the modular framework. This approach preserves the system’s structure while creating a more dynamic and engaging composition (Figure 2.19).

Fonts used:

Futura Std (Medium, Heavy)

Figure 2.19 Modular System (Final design) (05/05/25)

8. Bilateral System

I arranged the texts symmetrically on a single central axis. Explored different text compositions with the three primary shapes in Figure 2.20.

Figure 2.20 Bilateral system (Draft designs) (02/05/25)

I removed the triangle and square as they seemed to pull some attention away from the typography, subtly disrupting the intended focus on the text.

Fonts used:

Univers LT Std (59 Ultra Condensed)

Futura Std (Medium, Heavy, Bold)

Figure 2.21 Bilateral System (Final design) (05/05/25)

Final Outcome

Figure 2.22 8 Typographic Systems (Final designs) (JPEG) (05/05/25)

Figure 2.23 Axial System (Final design) (JPEG) (05/05/25)

Figure 2.24 Radial System (Final design) (JPEG) (05/05/25)

Figure 2.25 Dilatational System (Final design) (JPEG) (05/05/25)

Figure 2.26 Random System (Final design) (JPEG) (05/05/25)

Figure 2.27 Grid System (Final design) (JPEG) (05/05/25)

Figure 2.28 Transitional System (Final design) (JPEG) (05/05/25)

Figure 2.29 Modular System (Final design) (JPEG) (05/05/25)

Figure 2.30 Bilateral System (Final design) (JPEG) (05/05/25)

Figure 2.31 Final designs (PDF) (Without guide) (05/05/25)

Figure 2.32 Final designs (PDF) (With guide) (05/05/25)

PROCESS WORK

Task 1 - Exercise 2: Type & Play

Process

Sometime I find myself being drawn to the textures found in cells/particles (studied biology back then), I thought it’d be fun to explore that beauty of nature, so I chose an image of body nerve cell (Figure 3.1).

Figure 3.1 Body nerve cells, image retrieved from
https://www.kenhub.com/en/library/anatomy/nervous-tissue-histology (05/05/25)

I identified stroke-like elements within the image and extracted them as the foundational structure for developing the letterforms (Figure 3.2).

Figure 3.2 Letterform Extraction (05/05/25)

I wanted the look of my typeface to feel intelligent and intricate, much like the structure of nerve cells. I chose Cormorant Garamond (Regular) as my reference font for its elegant, refined strokes and organic curves (Figure 3.3).

Figure 3.3 Reference font (Cormorant Garamond Regular) (05/05/25)

The design in Figure 3.4 shows the initial development stage. The idea was to have each stroke stop at the nerve cell’s nuclear membrane, without extending into dendrites, to give the letterform a more reserved and stable feel (Figure 3.5).

Figure 3.4 First design (05/05/25)

Figure 3.5 Nerve cell diagram, taken from

https://docjana.com/neuron-or-nerve-cell/

After receiving feedback of Mr. Vinod to show more of the branching qualities of the nerve cells in the image, I refined the letterforms as shown in Figure 3.6.

Figure 3.6 Font refinement/development (07/05/25)

Figure 3.7 Final design (07/05/25)

For the second part of exercise 2, I searched for some movie posters to reference on.

Figure 3.8 Movie poster references (09/05/25)

I added credit texts, director’s name and sponsor logos, to give the poster an authentic movie feel. I kept the original image (Figure 3.1) as the background but enhanced it in Photoshop by adjusting the contrast and colour to help the typography stand out. I picked turquoise as the accent colour because I went for a sci-fi and futuristic look for the poster.

Figure 3.9 Process in Photoshop (09/05/25)

The initial title felt too abruptly placed on the poster, so I added some white overlay with a textured brush to help it blend the title more naturally into the background.

Figure 3.10 Adding white overlay on typography in Photoshop (13/05/25)

Figure 3.11 Movie Poster (Final design) (PNG) (13/05/25)

Final Outcome

Figure 3.12 Task 1: Exercise 2 Compilation (PDF) (13/05/25)

Figure 3.13 Movie Poster (Final design) (PNG) (13/05/25)

Figure 3.14 Movie Poster (Final design) (PDF) (13/05/25)

FEEDBACK

Task 1 - Exercise 1: Typographic Systems

Week 1 (22/04/2025)

General Feedback: Each image must include a figure number, description, and date beneath it. It's recommended to add a small label indicating which typographic system was used for each JPG (the compilation of jpg for feedback).

Week 2 (29/04/2025)

General Feedback: Graphical elements are just assisting visuals, it shouldn't overpower the informations itselves. Symmetry is what matters in bilateral system. Set margins first. Body text: 8-12pt. Avoid 45 degrees for axis because it's a bit extreme. Do bilateral instead of multilateral. Transitional needs to show some sort of fluidity.

Specific Feedback: Good to go. Complete the rest.

Task 1 - Exercise 2: Type & Play

Week 3 (06/05/2025)

General feedback: Highlight the extraction on image, decide which aspect (form/texture/pattern) to develop into typeface.

Specific feedback: Maintain the "stretch" looking across the typography, letter "N" and "V" is okay already.

Week 4 (13/05/2025)

General feedback: Strengthen interaction and relatability between typography and image, ensure contrast of typography with image, avoid choosing decorative typeface for body text because the title is already decorative

Specific feedback: Good already, would be good if could introduce a a bit of nerve cell's texture in the typography.

REFLECTION

Experience

When doing exercise 1, brainstorming different compositions for the 8 typographic systems felt overwhelming, but using these systems as a guide has helped me to generate more ideas than I expected. The process was exciting because it pushed me to break free from conventional text arrangements, I also became more familiar with the full workflow of text formatting, including font choice, size, alignment, kerning, and colour adjustments. For the second exercise, extracting letterforms from an image and recreating them with a reference typeface has helped me to understand the importance of adding deeper meaning to typography and connect type design with the other visual contexts. I appreciate Mr. Vinod's feedback session, it was brutal but receiving straightforward critiques truly helped me to see my designs from new perspectives and realise the weaknesses.

Observation

Exploring the 8 typographic systems revealed how each system offers unique ways to organise and structure text. The grid and modular systems provide rigid clarity and order; transitional, radial, and dilatational systems establishes more dynamic text flows; bilateral system creates aesthetically balanced and symmetrical compositions; random system allows chaos and axial system fosters cohesion and direction. Exercise 2 demonstrated how visual elements can be deconstructed into letterforms that convey meaning beyond literal content, highlighting typography’s potential to integrate seamlessly with visuals and create concept-driven and unified designs.

Findings

Exercise 1 reshaped how I approach text composition by showing me how foundational typographic systems can guide experimentation without losing hierarchy or readability and I will definitely apply these insights in my future work. Exercise 2 revealed that typography is more than just communication, it could also serves as a meaningful visual element that, when paired with imagery, creates stronger and more expressive designs. Refining letterforms taught me that even subtle tweaks in shape can change the tone and expression, proving how important detail is in type design.

FURTHER READING

1. Finding Type: A Novel Typographic Exercise by Vinod Nair, 2023

Figure 4.1 Finding Type: A Novel Typographic by Vinod Nair, 2023.

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

Finding Type: A Novel Typographic Exercise is a post publicated on Kreatif Beats by Vinod J. Nair. It explains the thought process of a lecturer designing a module task to develop students’ ability to design custom letterforms that embed the characteristics of a movie or game. The post walks through the conceptual framework, the challenges faced during the process, and the eventual outcomes of the exercise.

The idea is to follow a structured steps of capturing letter-like forms from real-world environments and digitising them into a typeface that tells story as well through shapes.

Steps of the Exercise

1. Find an Image: Choose an image, preferably with strong, repetitive characteristics, so to be developed on with consistency on later stages.

Figure 4.2 Fence by Calvin Ma; leaves by Brat Zimny; building with windows by Ján Jakub Naništa; pool by Wesley Tingey. Source: Kreatif Beats, Vinod. J. Nair.

2. Deconstruct It: Outline and analyse the shapes and forms present in the image.

Figure 4.3 Samle deconstruction of image by Piyaphon Inthavong (left), Azmina Fathima Haris (centre) and Rausha Aminath (right). Source: Kreatif Beats, Vinod. J. Nair.

3. Identify Letterforms: Locate shapes resembling letterforms.

Figure 4.4 Deconstruction and identification by Rausha Aminath, 2019.

Source: Kreatif Beats, Vinod. J. Nair.

4. Extract Letterforms: Extract shapes out and arrange them on a baseline.

Figure 4.5 Extracted letterforms placed on a baseline by Tamara Audrey Saputra, 2019.

Source: Kreatif Beats, Vinod. J. Nair.

5. Identify a Reference Typeface (added later): Use an existing typeface as a guide to help adjust the proportions, stroke weight, spacing and etc. of the extracted shapes.

Figure 4.6 Extracted letterforms placed against a reference typeface (ITC Garamond Std. Book)

by Jessica Chan Qian Hui, 2019. Source: Kreatif Beats, Vinod. J. Nair.

5. Refine the Letterforms: Iteratively refine the letterforms to achieve a balance between the raw character of the original extraction and the structural logic of the reference typeface. The aim isn’t to fully transform one into the other, but to land somewhere in between where both identity and readability coexist.

Figure 4.7 Extracted letterform and refined letterform by Piyaphon Inthavong, 2019.

Source: Kreatif Beats, Vinod. J. Nair.

Overall, Mr. Vinod’s breakdown helped me understand the point of this exercise, not just to make a typeface, but to think critically about how visuals around us can influence design. It’s about learning to look at form more intentionally, and translating that into something functional but expressive.

After trying it myself, I see how this process could help in visualising meaning through type, especially in projects that need storytelling, like branding, games, or posters. It’s a thoughtful way to give letterforms more soul, context, and individuality.

Search This Blog

Chang Wing (0367807)

Advanced Typography - Task 1 / Exercises: Typographic Systems & Type & Play

Comments

Post a Comment

Popular Posts

Advanced Typography - Task 3 / Type Exploration and Application