Advanced Typography / Task 1 : Exercises

April 21, 2025

Advanced Typography / Task 1 : Exercises

22/4/2025 - 13/5/2025 (Week 1 - 4)

Rachel Ng Jie Ting/ 0378902

Bachelors of design (Honours) in creative media

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

Table of content

Lectures

Lecture 1: Typographic Systems

Lecture 2: Typographic Composition

Lecture 3: Context and Creativity

Lecture 4: Designing Type

Instructions

Exercise 1 : Typographic Systems

Exercise 2 : Type & Play

Part 1

Part 2

Feedback

Reflections

Further readings

Lectures

Lecture 1: Typographic Systems

All design is based on a structural system. (Elam, 2007)

There are 8 major variation with infinite number of permutations, the 8 major variations are:

Axial

Radial

Dilatational

Random

Grid

Modular

Transitional

Bilateral

Fig 1.1 - 8 major typographic system variation

1. Axial System

All elements are organized to the left or right of a single axis.

2. Radial System

All elements are extended from a point of focus.

3. Dilatational System

All elements expand from a central point in a circular fashion.

4. Random System

Elements appear to have no specific pattern or relationship.

5. Grid System

A system of vertical and horizontal divisions

6. Transitional System

An informal system of layered banding.

7. Modular System

A series of non-objective elements that are constructed as a standardized unit.

8. Bilateral System

All text is arranged symmetrically on a single axis.

Typography matters not just for reading, but for how things look too!

Lecture 2: Typographic Composition

(Some) Principles of Design Compositions

Emphasis

Isolation

Repetition

Symmetry and Asymmetry

Alignment

perspectives

The Rule of Thirds

A photographic guide to composition. It suggest that a frame (space) can be divided into 3 columns and rows. Intersecting lines are used as guides to place the points of interest.

Fig 1.2 - Rule of Thirds and example

Typographic systems

Out of the 8 major typographic systems, the most used system is the Grid System (or Raster System), derived from the grided compositional structure of Letter Press Printing.

Other models / Systems

Environmental Grid

Based of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight are formed, then organize the information around this structure.

Fig 1.2 - Environmental Grid

Form and Movement

Based on the exploration of an existing Grid Systems. The placement of a form (irrespective of what it is) on a page, over many pages creates movement.

Fig 1.3 - Form and Movement

Lecture 3: Context and Creativity

Handwriting

We study handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting. The shape and line of hand-drawn letterforms are influenced by the tools and materials used to make them.

Fig 1.4 - Evolution of the Latin Alphabet

Hieroglyphics

The Egyptian writing system fused with the art of craving. The system is mixed with both rebus and phonetic characters. Hieroglyphics images have the potential to be used in three different ways:

1. Ideograms: to represent the things they actually depict.

2. Phonograms: to represent sounds that "spell out" individual words.

3. Determinatives: to show that the signs preceding are meant as phonograms and to indicate the general idea of the word

Fig 1.5 - Ancient Egypt Hieroglyphics Chart

Eastern development in handwriting

Fig 1.6 - Evolution of Middle Eastern Alphabets

Fig 1.7 - Evolution of Chinese Script

Programmers and Type Design

More vernacular scripts are being produced by software giants to cater to situations where the written matter is communicated in the vernacular script or vernacular and Latin scripts.

(Multiscript is a script that combines English (Latin) letters and Vernacular letters.)

Fig 1.8 - Baloo, a multi-script typeface

Local Movement and Individuals

Examples of local movements:

1. murasu.com

Spear-headed by programmer and typographer Muthu Nedumaran, a programming language needed to encode the different types of vernacular writing systems.

2. Huruf

A local group of graphic designers interested in the localized lettering of latin and vernacular letters painted or inscribed on walls and signages.

3. Ek Type and Indian Type Foundry

Organizations that have done ground breaking work with the development of vernacular typefaces in India.

Creativity and originality are most often intertwined. It is important for designers to look inward and examine the histories, civilizations, and cultural communities and bring these past developments into the future.

Creativity and inspiration should begin by observing our surroundings and exploring of our collective histories.

"Looking behind gives you context. Looking forward gives you opportunities." — Mr Vinod

Lecture 4: Designing Type

Why design typeface?

2 reasons for designing a typeface by Xavier Dupre (2007):

Type design carries a social responsibility so one must continue to improve its legibility

Type design is a form of artistic expression

Exploring different typefaces: Purpose and Limitation

1. Frutiger by Adrian Frutiger

Fig 1.9 - Frutiger

Purpose: To create a clean, distinctive and legible typeface that is easy to see from both close up and far away.

Consideration / Limitations: Letterforms needed to be recognized even in poor lightings, or when the reader was moving quickly past the sign.

2. Verdana by Matthew Carter

Fig 1.10 - Verdana

Purpose: To be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.

Consideration / Limitations: Verdana exhibits characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i j l.

3. Johnston Sans by Edward Johnston

Fig 1.11 - Johnston Sans

Purpose: To be used as a new typeface in posters and signage on London's Underground Railway.

Consideration / Limitations: Johnston's remit was to unite the London Underground group, as all the advertising, signage was all completely different.

General Process of Type Design

1. Research

To understand type history, type anatomy, type conventions, terminologies, side bearing, metrics, hinting, etc.

It is important to determine the type's purpose or what it would be used for

We should examine existing fonts that are presently being used for inspiration/ ideas/ reference/ context/ usage patterns and more.

2. Sketching

Some designers sketch traditionally (brushes, pens, ink and paper) and proceed to digitization by scanning.

Some designers sketch using digital tool sets, however this can sometimes impede the natural movement of hand strokes.

Both method come with it's pros and cons

3. Digitization

In most times, FontLab and Glyphs software are used.

Adobe Illustrator are also used by some designers, however it is frowned upon by purist.

Attention should not only be given to the whole form but also to the counter form in this stage as the readability of the typeface is heavily dependent on it.

4. Testing

An important component in the design thinking process.

The results of the testing are part of the process of refining and correcting. Prototyping is one of those process.

Readability and legibility of the typeface become an important consideration depending on the typeface category ( display type/text type)

5. Deploy

There are always teething problems that do not come to the fore during the prototype and testing stages.

The rigour of the testing is important so that the teething issues remain minor.

Typeface Construction

Fig 1.12 - Construction of grid for the Roman Capital using 8*8 cells

The grid consists of a square with a circle inside that touches the lines of the square in four places. A rectangle with 3 quarters the size of the square is also included within the centre of the square.

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

Construction and considerations

Fig 1.13 - Classification according to form and construction

The 26 characters of the alphabet can be arranged into groups depending on their form and construction, whereby a distinction is made between a group for the capitals and a group for lowercase letters.

Many different forms and constructions must be taken into account when designing a new type. Important visual correction is the extrusion of curved forms past the baseline and cap line, which also applies to vertical alignment between curved and straight forms.

Fig 1.14 - Example of fitting

Context & Creativity

Most typefaces come about due to a need or demand. The need/ motivation of most typefaces can be intrinsic and extrinsic.

Intrinsic

The designer seeks out a form that comes close to fulfilling a desire.

Also possible that the designer identifies a gap/ problem and endeavours to solve it through the design of the typeface.

Extrinsic

When the designer has been commissioned or the student-designer was given a task to complete that involves designing a typeface.

For a designer to be successful, we need to be invested in the idea and understand the requirements, limitations, use, and stakeholders.

Instructions

Module Information Booklet

Task 1 — Exercise 1, 2 (20%)
Timeframe: Week 1 - Week 3 (Deadline Week 4)

-------------------------------------------------------------------------------

Exercise 1 — Typographic System

For this exercise, we were to explore the 8 major typographic systems using the following 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

The exercise task is to be done using Adobe InDesign only. Size 200 x 200 mm. In addition to black, one other colour is allowed. Graphical elements (line, dot, etc.) can be used but limitedly.

-------------------------------------------------------------------------------

Getting started

For the headline of my posters, I decided to go with "All Ripped Up: Punk Influences on Design".

After that, I opened up Adobe InDesign got to work.

1. Axial

Fig 2.1 - Axial system, Week 1

I created several variation of axial system.

First I tried a simple axial design (center), with information alternating left, right, left. The title sits alone on the right as its quite heavy, and the 2 lighter box of text sits on the left to balance it.

The piece on the left was inspired by a book cover, the texts follows 2 axis.

The piece on the right is similar to the previous one. but with more graphic decorations like the pink lines.

2. Radial

Fig 2.2 - Radial system, Week 1

The piece on the left was inspired by a piece in Typographic Systems by Kimberly Elam, 2007, using a square instead of of a circle as the center point to radiate from. The pink box around the title draws viewers attention to it. Pink and bold text were also used to highlight more important information.

The piece on the right is a a more common radial design, with a circle as the center point, and information radiating outwards. The title is highlighted in pink, and just like before, colour and bold were used to highlight information and segregate different information. (Look at the 4 rows below the title, bold text is information on June 24, pink text is information on June 25)

3. Dilatational

Fig 2.3 - Dilatational system, Week 1

Piece on the left - Title is placed within its own circle's, with colour to highlight for better readability. Lecture venue, lecturer name, and time is arranged in a 'S' like shape, with colour and bold to highlight some information.

Piece on the right - Got idea from record disks. The title is bolded and sits around the center of the piece, white text on black background, very eye catching. The other information sits on the gray circle, with colour to attract to viewers eye.

4. Random

Fig 2.4 - Random system, Week 1

Didn't have much idea for this one, I suddenly had an image of people playing javelin and arranged it accordingly. The two shapes on top are the javelin players, the title is the javelin. The important information such as the venue, time, date, and lecturer name is arranged in the big pile in front, while the not so important information sits in the small pile at the back.

5. Grid

Fig 2.5 - Grid system, Week 1

For this system, I used a 5x5 grid system to arrange the text. Again, colours to highlight information.

6. Transitional

Fig 2.6 - Transitional system, Week 1

Left - Inspired by sunset pictures. The title and University name are the clouds, the other texts are used to form the river.

Right - Inspired by shooting stars. This piece is more focused on movement.

7. Modular

Fig 2.7 - Modular system, Week 1

Left - Inspired by honey combs. The texts all fit inside a hexagon. The hexagon with the title is completely black to draw attention

Right - Inspired by stacks of books and Jenga. The pink circle is used to attract the viewers attention, and the rectangle boxes are arranged in a way that guides the viewers eyes down. The title and the dates are placed in slightly dark boxes to make them stand out, and it makes the overall composition not too flat.

8. Bilateral

Fig 2.8 - Bilateral system, Week 1

Left - Arranged like a formal invitation, lines were used to segregate information, and pink squares on the corners as highlight to attract viewers.

Right - Information in encased in pink box that is connected to the title box, makes for a sleek design.

Chosen works

Here are the 8 Typographic systems poster I have selected to show Mr Vinod.

Fig 2.9 - Chosen works, Week 2

After feedback editing

After showing my works, I was given feedback on some of my poster to edit.

Number 1 (Axial), Align to one axis only, increase leading on text

Fig 2.10 - Edited Axial poster, Week 2

Number 5 (Grid), the black square box is too eye catching, can be grayer

Fig 2.11 - Edited Grid poster, Week 2

Number 6 (Transitional), Transition it more

Fig 2.12 - Edited Transitional poster, Week 2

Number 8 (Bilateral), Heading need work, increase leading on text

Fig 2.13 - Edited Bilateral poster, Week 2

-------------------------------------------------------------------------------

Final : Typographic System

Fig 2.14 - Axial System Final, Week 2

Fig 2.15 - Radial System Final, Week 2

Fig 2.16 - Dilatational System Final, Week 2

Fig 2.17 - Random System Final, Week 2

Fig 2.18 - Grid System Final, Week 2

Fig 2.19 - Transitional System Final, Week 2

Fig 2.20 - Modular System Final, Week 2

Fig 2.21 - Bilateral System Final, Week 2

Fig 2.22 - Typographic System Final (PDF), Week 2 (29/4/2025)

Fig 2.23 - Typographic System Final with grids (PDF), Week 2 (29/4/2025)

--------------------------------------------------------------------------------

Exercise 2 : Type & Play Part 1

Getting started

For the second exercise, we were tasked to find type in anything around us. It can be man-made/ structure or nature. For this exercise, I choose the Yellow Morel mushroom, a highly prized type of wild mushroom known for their distinctive honeycomb-like appearance and rich, earthy flavor.

Fig 2.24 - Morel Mushroom

Fig 2.25 - 3 Morel Mushroom

Fig 2.26 - Morel Mushrooms (Credit: Kevin Miyazaki)

Considering the clarity of the picture, I decided to work with Fig - 2.26 Morel Mushrooms (Credit: Kevin Miyazaki).

Tracing the image

In Illustrator, I stared tracing types that I found in the image.

Fig 2.27 - Tracing letters, Week 3

Reference font

To assist me in designing the font, I have found a font (Cooper Black) to refer to.

Fig 2.28 - Reference font: Cooper Black, Week 3

Refining process

Below is the refinement process of my font. Using the direct selection tool, I adjusted the letters to mimic the reference font, but without losing too mush of the characteristic of the original extraction.

Fig 2.29 - Refining process, Week 3

This is the font that would be shown to Mr. Vinod for feedback.

Fig 2.30 - letterform design waiting for feedback, Week 3 (8/05/2024)

After feedback refinement

After getting feedback from Mr. Vinod, he mentioned that the proportion of the font is not quite the same, and the font itself is missing the core characteristic of the Morel mushroom, that is the branching out pattern on the mushroom. So, I made some adjustments.

The branching out pattern was achieved by image-tracing the original image of the Morel mushroom, expanding it, then removing some of the shapes leaving the hole shapes behind. After that, I used the pathfinder tool on the letters and presto! The letters have the branches of the Morel mushroom (somewhat).

The Morel mushroom branches are all interconnected, so using the brush tool, I connected the branches of the pattern to make it look more like the Morel mushroom.

Fig 2.31 - After feedback refinement, Week 3

This is the final font that would be submitted.

Fig 2.32 - Finalised letterform, Week 3 (8/05/2024)

-------------------------------------------------------------------------------

Final: Type and Play (Part 1)

Fig 2.33 - Tracing, Week 3 (8/05/2024)

Fig 2.34 - Reference font, Week 3 (8/05/2024)

Fig 2.35 - Refining process, Week 3 (8/05/2024)

Fig 2.36 - Final (Ver 1), Week 3 (8/05/2024)

Fig 2.37 - After feedback refinement, Week 3 (8/05/2024)

Fig 2.38 - Final letterform, Week 3 (8/05/2024)

Fig 2.39 - Exercise 2 Part 1 PDF Compilation, Week 3 (8/05/2024)

-------------------------------------------------------------------------------

Exercise 2 : Type & Play Part 2

In part 2 of this exercise, Mr Vinod instructed us to create a movie poster using the type designs we had made in the previous part. Size of poster is to be 1024px x 1024px (Export JPG 300ppi)

Collecting and choosing image for poster

First, I went and collected images that is suitable for poster making. After some thought, I decided to use the top left image (see fig 2.40) for the poster.

Fig 2.40 - Collected images for poster making

Fig 2.41 - Chosen image for poster

Arranging Poster layout

First, I tried out a few different poster layouts.

Fig 2.42 - Poster layouts, Week 4

After some thought, I decided that I liked number 3 better and chose that layout.

Fig 2.43 - Poster layout #3, Week 4

Some editing

With the layout confirmed, I did some adjustments to the poster, such as:

Adding a dark gradient at the bottom so that the text can be seen more clearly.

Bolded the text 'THE SECRETS OF THE MUSHROOMS' to increase visibility.

Changed the bottom text content.

Fig 2.44 - Some editing, Week 4

This is the poster that would be shown to Mr. Vinod for feedback.

Fig 2.45 - Finished poster for feedback, Week 4

After feedback refinement

After getting feedback from Mr. Vinod, he mentioned that the work was good, just some minor things like:

Add more movie logos
Can change the Title font colour to something similar to the mushroom
Make the bottom text smaller

So, I made some adjustments.

Fig 2.46 - Adjustments, Week 4

The final poster to be submitted should look like this:

Fig 2.47 - Finalised poster, Week 4 (13/05/2024)

-------------------------------------------------------------------------------

Final: Type and Play (Part 2)

Fig 2.48 - Final: Type and Play (Part 2), Week 4 (13/05/2024)

Fig 2.49 - Final: Type and Play (Part 2) PDF, Week 4 (13/05/2024)

Final: Type and Play Compilation

Fig 3.1 - Tracing, Week 3 (8/05/2024)

Fig 3.2 - Reference font, Week 3 (8/05/2024)

Fig 3.3 - Refining process, Week 3 (8/05/2024)

Fig 3.4 - Final (Ver 1), Week 3 (8/05/2024)

Fig 3.5 - After feedback refinement, Week 3 (8/05/2024)

Fig 3.6 - Final letterform, Week 3 (8/05/2024)

Fig 3.7 - Exercise 2 Part 1 PDF Compilation, Week 3 (8/05/2024)

Fig 3.8 - Final: Type and Play (Part 2), Week 4 (13/05/2024)

Fig 3.9 - Final: Type and Play (Part 2) PDF, Week 4 (13/05/2024)

Feedback

Week 1:

General feedback :

Make concise and precise explanations of your design process.
Make sure to indicate and label each work submission.
Familiarize yourself with the 10 typefaces provided.
Always take down notes so you don't forget anything.

Specific Feedback : -

Week 2:

General feedback :

Ensure information on the page first, then place graphical elements. The graphical element serves as a supporting cast for the information.
Avoid 45 degree and above angles when placing information (too steep of an angle makes information hard to read)
Random system – order within chaos
The text is the main point, don’t use too much graphical decorations

Specific Feedback :

Number 8 (Bilateral), Heading need work
Number 5 (Grid), can be grayer
Number 1 (Axial), Aline to one axis only
Number 6 (Transitional), Transition it more
Increase leading on text

Week 3:

General feedback :

Simplify without losing the characteristics.
Size of letter must be consistent
Remember to read instruction and brief to avoid mistakes

Specific Feedback :

Core characteristics missing (branching out pattern)
Proportion of the letters are a bit off, do adjust

Week 4:

General feedback :

Some colours like red are not very visible on black, it becomes harder to read when the text is small.
If it doesn’t look or feel like a movie poster, it is not a movie poster.
While having a decorative title typo, the regular text should not steal the attention away.

Specific Feedback :

Add more movie logos
Title font change colour to the mushroom
Bottom text smaller

Reflections

Experience :

Exercises 1 and 2 gave me the chance to apply lecture content through hands-on exploration. I created eight different poster styles and experimented with extracting letterforms from mushroom images. I enjoyed the process of combining visual elements to form cohesive designs. Although some parts of the exercise were frustrating, I still felt that the the process was fun.

Observations :

The feedback sessions in class were highly beneficial in guiding my progress. Mr. Vinod’s critiques helped me improve my work and stay on the right track, while his comments to my classmates offered new thoughts and different perspectives to my design.

Findings :

I noticed that doing some research and gathering references early on helped a lot with generating ideas. Other than that, I have learned that there is no need to overthink and try to make complicated designs, sometimes simple designs works great too.

Search This Blog

Rachel Ng Jie Ting (0378902)