Advanced Typography - Task 1: Exercises

April 21, 2026

Advanced Typography - Task 1: Exercises

21/4/26 - 19/5/26 / Week 1 - Week 5

Janice Cheah Pei Ern / 0376497

Advanced Typography / BDCM / Taylor's University

Task 1

LIST / JUMP LINK

LECTURES

INSTRUCTIONS

TASK

FEEDBACKS

REFLECTIONS

FURTHER READING

LECTURES

Week 1: AdTypo_1_Typographic Systems

There are 8 major variations for typographic systems:

Axial: Elements are organised to the left or right of a single axis/line
Radial: Elements are extended and spread out from a point of focus (it can be multiple points)
Dilational: Elements expand outward from a central point in a circular form (it can be multiple circles)
Random: Elements are appeared to have no specific pattern or relationship (there is method in the chaos)
Grid: System of vertical and horizontal divisions
Transitional: Informal system of layered banding (segregating information within certain bands)
Modular: Non-objective elements are constructed in a standardised unit (units of space are standardised, it can be combined together)
Bilateral: All text is arranged symmetrically on a single axis

Fig. 1.1 8 Major Variations of Typographic Systems (23/4/26, Week 1)

(Extracted from Typographic Systems by Kimberly Elam)

Knowing these systems allows distinctiveness on the arrangement of information on a page, breaking free from just horizontal and vertical grids of letter press.

Week 2: AdTypo_2_Typographic Composition

The principles in design composition such as emphasis, isolation, repetition and more are usually used for visual imagery layouts rather than typographical layouts or composition but some of them are still translatable.

Rule of thirds is a photographic guide to composition where the frame is 3x3 and the intersecting points become the focal points.

Fig. 1.2 Rule of thirds (29/4/26, Week 2)

Environmental Grid is based on the exploration of an existing structure or numerous structures combined. (It can be architecture-related)

Fig. 1.3 Environmental Grid (29/4/26, Week 2)

An example is the images on the top left will be simplified into simple elements with a reductionist approach. The images will turn into lines and shapes before being discarded and reduced. Eventually, information will be placed into framework as non-objective elements but still informational.

Form and Movement is based on exploration of an existing Grid Systems. The placement of a form (can be images, text or colour) on a page, over multiple pages creates a connection of movement. (Somewhat looking like an animation)

Fig. 1.4 Form and Movement (29/4/26, Week 2)

Week 3: AdTypo_3_Context&Creativity

Handwriting is studied because the first mechanically produced letterforms imitates handwriting. The characteristics of hand drawn letterforms such as shape and line are influenced by the tools and materials used to make them.

In Europe

Fig. 1.5 Evolution of Writing system in Europe (6/5/26, Week 3)

Cuneiform: Earliest writing system and used in a number of languages. Its distinctive wedge form was the result of pressing the blunt end of a reed stylus into wet clay tablets.
Hieroglyphics: Fused with the art of relief carving. The images were used in 3 different ways, as ideograms (represent things), as determinatives (signs are meant as phonograms and general idea of the word) and as phonograms (sounds that spell out each words).
Early Greek: Adopted the Phoenicians systems. Its reading format was known as boustrophedon or "as the ox plows", switching between right and left. The letters were drawn without compasses and rule, and they had no serifs. The strokes gradually grew thicker, aperture lessened and serifs appeared.
Roman Uncials: Roman letters were becoming rounder and it was written faster.
English Half Uncials: Evolved into more slanted and condensed form.
Carolingian Minuscule: Emperor Charlemagne standardized the writing system. Capitals at start of a sentence, spaces between words and punctuation are introduced. It became the pattern for Humanistic writing.
Black Letter: Tight spacing and condensed lettering, with evenly spaced verticals. It reduced the cost of book production
Italian Renaissance: Humanist admired the Carolingian script and named the rediscovered letterforms Antica, resulting in a more perfect or rationalised letter.

In Asia

Movable Type

Fig. 1.6 Movable Type in Han'gul (6/5/26, Week 3)

Printing (wood block) had been practiced in China, Korea and Japan (known as Dharani Sutra).
China attempted to use movable type but was unsuccessful due to the number of characters.
Korea succeeded to cast movable type in bronze, allowing the dismantling and resetting of text especially when they created a new script called Han'gul.
These events happened before the earliest printing, Guttenberg's bible in Europe.

Fig. 1.7 Writing system in India (6/5/26, Week 3)

Indus Valley Civilisation (IVC) script: Oldest writing found in 'Indian' subcontinent, is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.
The Brahmi script: Earliest writing system developed in India after Indus script.

Fig. 1.8 Writing systems in Southeast Asia (6/5/26, Week 3)

Pallava: Basis for writing systems across Southeast Asia, a South Indian script originally used for writing Sanskrit and Tamil.
Pra-nagari: Early form of Nagari script used in India for writing Sanskrit
Kawi: Basis of other scripts in Indonesia and Philippines. Based on Nagari, but indigenous to Java
Jawi: Introduced with Islam, taught to lower classes and spread in trading ports.

Fig. 1.9 Vernacular script (6/5/26, Week 3)

Vernacular scripts are being produced by software giants such as Google. More vernacular and "multi-script" typefaces are being produced to cater situations where written matter is communicated in the vernacular script or vernacular and Latin scripts.

Young designers should look inward and examine their histories, civilisation, culture and communities for creativity, originality and inspiration.

Week 4: AdTypo_4_Designing Type

Why design another typeface? According to 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

Fig. 1.10 Frutiger (15/5/26, Week 4)

Adrian Frutiger is considered responsible for the advancement of typography into digital typography. He contributed two typefaces: Univers and Frutiger.

Frutiger is a sans-serif typeface
The purpose was to create a clean, distinctive and legible typeface easily seen from both close up and far away
Considerations/Limitations: Letterforms needed to be recognized in poor light conditions or when the reader was moving quickly past the sign, he tested unfocused letterforms for readability

Fig. 1.11 Verdana (15/5/26, Week 4)

Matthew Carter created Verdana (for Microsoft)

The purpose was to be extremely legible even at small size on the screen due to the popularity of the Internet and electronic devices
Considerations/Limitations: Verdana exhibits characteristics derived from the pixel rather than the pen, the brush or the chisel, commonly confused characters such as lowercase i, j, l.

Fig. 1.12 London's Underground Typeface / Johnston Sans (15/5/26, Week 4)

Edward Johnson created London's Underground Typeface (also known as Johnston Sans).

The purpose was to create typeface with "bold simplicity" and to be used for posters and signage at London's Underground railway.
Consideration/Limitation: He applied proportions of Roman capital letters to his typeface (removed serif points and add boldness), rooted in traditional calligraphy but with elegance and simplicity fitted for modern age.

Fig. 1.13 Gill Sans (15/5/26, Week 4)

Gill Sans was inspired by Johnston's work, which was designed by his former student, Eric Gill.

General Process of Type Design:

1. Research

Understand type history, anatomy, conventions, terminologies, side-bearing, metrics etc.
Determine type's purpose
Examine existing fonts being used for inspiration/ideas/reference etc.

2. Sketching

Some designers sketch traditionally using brushes/pens, ink and paper then scan them for digitization
Some designers sketch digitally but this may impede natural movement of hand strokes

3. Digitization

FontLab and Glyphs are usually used in digitization
Some use Adobe Illustrator before moving it into specialized font apps
Other than the whole form, counter form should also be considered as readability of typeface is dependent on it

4. Testing

Part of process of refining and correcting aspects of typeface
Readability and legibility of typeface is importantly considered unless if it's a display type for expression of the form.

5. Deploy

There are always teething problems that did not come to the fore during prototyping and testing
Revision doesn't end upon deployment to make sure teething issue remain minor

Typeface Construction

Fig. 1.14 Construction of Grid for the Roman Capital using 8x8 squares (15/5/26, Week 4)

Roman Capital

Used grid consists of a square with a circle inside that just touches the lines of the square in four places
A rectangle 3 quarters of the size of the square is positioned in the centre of the square
Use grids with circular forms can facilitate letterform construction and a method to build letterforms

Construction and Consideration

Fig. 1.15 Classification according to form and construction (15/5/26, Week 4)

The 26 alphabets can be arranged into groups depending on their form and construction, distinction is made between a group for capitals and a group for lowercase.

Fig. 1.16 'Fitting' the type (15/5/26, Week 4)

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.

Visual correction is also needed for distance between letters, it is not possible for equal spacing between letters. Letters must be altered to a uniform 'visual' white space, called 'fitting' the type.

Context & Creativity
Motivation for designing typefaces can be intrinsic and extrinsic

Intrinsic: Designer seeks out a form that comes close to fulfilling a desire or identifies a problem thus endeavors to solve it through designing a typeface

Extrinsic: Designer has been commissioned or student-designer has a designing a typeface task to complete

INSTRUCTIONS

TASK

Task 1: Exercise 1 - Typographic Systems

In this exercise, we have to explore on how we can arrange the text given into the 8 typographic systems:

The Design School, Taylor’s University

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

Before starting in Indesign, I tried to sketch out different arrangements of the typographic systems.

Fig. 2.1 Sketch #1 (22/4/26, Week 1)

Fig. 2.2 Sketch #2 (23/4/26, Week 1)

Afterwards, I tried digitising from the sketches I have drawn.

Axial System

1st attempt (Before feedback)

Fig. 2.3 Axial System 1st Attempt (24/4/26, Week 1)

After the feedback, Mr. Vinod mentioned it doesn't fulfill the Axial System so I tried to adjust to make the thick line into thinner lines and connect with each other while making sure the text follows the axial line.

Changes (After feedback)

Fig. 2.4 Axial System Changes (30/4/26, Week 2)

Font used:

Futura Std (Bold Oblique)

Univers LT Std (47 Light Condensed)

Radial System

1st attempt (Before feedback)

Fig. 2.5 Radial System 1st Attempt (24/4/26, Week 1)

After the feedback, the arrangement is okay, but try to change the triangles into something else as it reduces the readability of the text. So, I change it to outlines instead.

Changes (After feedback)

Fig. 2.6 Radial System Changes (30/4/26, Week 2)

Font used:

Futura Std (Heavy, Medium)

Univers LT Std (47 Light Condensed)

Dilatational System

1st attempt (Before feedback)

Fig. 2.7 Dilatational System 1st Attempt (24/4/26, Week 1)

After the feedback, the arrangement is okay, but the text are too close to each other, so I tried to spread them out.

Changes (After feedback)

Fig. 2.8 Dilatational System Changes (30/4/26, Week 2)

Font used:

Gill Sans Std (Condensed)

Univers LT Std (47 Light Condensed)

Random System

1st attempt (Before feedback)

Fig. 2.9 Random System 1st Attempt (25/4/26, Week 1)

After the feedback, random system could have been better. So, I redid another version instead.

2nd attempt (After feedback)

Fig. 2.10 Random System 2nd Attempt (30/4/26, Week 2)

Font used:

Bodoni Std (Bold Condensed)

Futura Std (Bold, Medium)

ITC Garamond Std (Bold, Bold Condensed Italic, Book Narrow Italic)

ITC New Baskerville Std (Italic)

Grid System

1st attempt (Before feedback)

Fig. 2.11 Grid System 1st Attempt (25/4/26, Week 1)

After the feedback, the text shouldn't be on the space margins. He also mentioned to remove the justified format for the text as it creates rivers and a huge gap between the text.

Changes (After feedback)

Fig. 2.12 Grid System Changes (30/4/26, Week 2)

Font used:

ITC Garamond Std (Light Narrow)

Univers LT Std 47 (Light Condensed)

Modular System

1st attempt (Before feedback)

Fig. 2.13 Modular System 1st Attempt (26/4/26, Week 1)

After the feedbacks, he mentioned to make sure the units are all equal when submission. He mentioned about how the colour-filled shapes might reduce readability on text, so I tried to adjust it.

Changes (After feedback)

Fig. 2.14 Modular System 2nd Changes (30/4/26, Week 2)

Font used:

Futura Std (Bold)

Univers LT Std (47 Light Condensed)

Transitional System

1st attempt (Before feedback)

Fig. 2.15 Transitional System 1st Attempt (26/4/26, Week 1)

After the feedback, the arrangement is okay, but make 'Open Public Lectures:' the same angle as the other text.

Changes (After feedback)

Fig. 2.16 Transitional System Changes (30/4/26, Week 2)

Font used:

Bodoni Std (Poster Compressed)

Univers LT Std (47 Light Condensed)

Bilateral System

1st attempt (Before feedback)

Fig. 2.17 Bilateral System 1st Attempt (26/4/26, Week 1)

Bilateral system is alright after feedback.

Font used:

Futura Std (Bold)

Univers LT Std (47 Light Condensed)

Final Submission: Exercise 1 - Typographic System

Fig. 3.1 Final Axial System (30/4/26, Week 2)

Fig. 3.2 Final Radial System (30/4/26, Week 2)

Fig. 3.3 Final Dilatational System (30/4/26, Week 2)

Fig. 3.4 Final Random System (30/4/26, Week 2)

Fig. 3.5 Final Grid System (30/4/26, Week 2)

Fig. 3.6 Final Transitional System (30/4/26, Week 2)

Fig. 3.7 Final Modular System (30/4/26, Week 2)

Fig. 3.8 Final Bilateral System (30/4/26, Week 2)

Final Exercise 1 PDF

Fig. 3.9 Final Typographic Systems PDF (30/4/26, Week 2)

Final Exercise 1 with Grids and Margins PDF

Fig. 3.10 Final Typographic Systems with Grids and Margins PDF (30/4/26, Week 2)

Exercise 2 - Type & Play

In this exercise, we have to extract out letterforms from a man-made object, structures or something from nature.

I looked through different pattern images and decided to try Malay wood carving as I think it is quite interesting. I chose the picture below:

Fig. 4.1 Extracted letterforms from original picture (29/4/26, Week 2)

Picture taken from: https://www.pinterest.com/pin/776448792052255859/

I moved the extracted letterforms into Illustrator and try adjusting to the reference font I used, which is Gill Sans Std Regular as this font has thick strokes.

Fig. 4.2 Adjusting Extracted Letterforms (2/5/26, Week 2)

Afterwards, I try to add and remove elements on the letterforms to make all of them look similar, especially on the pointy leaf elements. I also decided to change the arrangement of my letterforms to make them look balance.

Fig. 4.3 Transformation of letterforms (3/5/26, Week 2)

I also tried to bring out the carving effect by adding lines to the letters as it was kind of difficult to put it on the leaves.

Fig. 4.4 Carved lines on letterforms (4/5/26, Week 2)

After letting Mr. Vinod to review my work, he suggested to change some of my straighter strokes into more curvy strokes like from my extraction 'A' to better represent the object I have chosen.

Fig. 4.5 Curving strokes on letters (7/5/26, Week 3)

Fig. 4.6 Final Extracted Letterforms (7/5/26, Week 3)

Poster Design

Afterwards, we moved on to creating a movie poster. I looked up on references on how I can approach my poster.

Fig. 4.7 Poster References (7/5/26, Week 3)

First, I edit my extraction picture to look more like in the forest in Photoshop. I made my main text yellow to stand out against the dark green background.

Fig. 4.8 Background and Main Text (7/5/26, Week 3)

I also created secondary elements such as the credits, logos, caption and casts:

Fig. 4.9 Secondary Elements (7/5/26, Week 3)

Afterwards, I arranged them in Illustrator.

Fig. 4.10 1st Version Movie Poster (8/5/26, Week 3)

After the feedback, Mr. Vinod mentioned to play with the opacity of the letters using the eraser tool in Photoshop to make it less flat.

Fig. 4.11 Changing opacity in Photoshop (14/5/26, Week 4)

Afterwards, I also make some adjustments to some of the secondary elements according to the feedback.

Fig. 4.12 Final Poster (14/5/26, Week 4)

Final Submission: Exercise 2 - Type & Play

Fig. 5.1 Image and Extraction (14/5/26, Week 4)

Fig. 5.2 Overall Process (14/5/26, Week 4)

Fig. 5.3 Reference font (14/5/26, Week 4)

Fig. 5.4 Original Extraction (top) and Final Letterform (bottom) Comparison (14/5/26, Week 4)

Fig. 5.5 Final Letterform (14/5/26, Week 4)

Final Exercise 2 Part 1 PDF

Fig. 5.6 Exercise 2 Part 1 PDF (14/5/26, Week 4)

Fig. 5.7 Final Movie Poster (8/5/26, Week 3)

Final Movie Poster PDF

Fig. 5.8 Final Movie Poster PDF (14/5/26, Week 4)

FEEDBACKS

Week 1

General Feedback: Blog is set up in the correct format.

Week 2

General Feedback: Feedbacks are given to everyone and learn from to improve own work.

Specific Feedback: Axial doesn't match the requirements. Radial is okay but the red triangles need to be fixed to improve readability. Dilatational's texts are a bit too close. Grid's text for lecturers and time shouldn't be in justified form as rivers will show up and text too far apart, there shouldn't be text on the space margins. Random could be better especially for the text and when against the dark background. Modular to make sure the units are the same when submission. Transitional is okay but 'Open Public Lectures' needs to be angled like the others. Bilateral is okay.

Week 3

General Feedback: Overall letterforms look fine

Specific Feedback: Make some of the straighter strokes to look more curvy like the extraction 'A'

Week 4

Specific Feedback: Make all elements balance in the middle. The font for the casts should be neutral. The main letterforms look flat, try to use tools like the eraser in Photoshop to control the opacity.

REFLECTIONS

Experience

Personally, I find Exercise 1 to be difficult as it required me to make sure my text arrangements are aligned with each system's requirements while trying to put in creativity. Exercise 2 was quite fun for me as I got to try and spot letters from objects. I was kind of worried at first as I realised halfway through Exercise 2, the extraction picture I chose was tough but I managed to finish making the letterforms and re-reading the Finding Type article helped a lot on what I need to edit for the letterforms.

Observations

Throughout the exercises, having some sketches and reference really helped me to visualise my ideas better, especially for Exercise 1. Observing from other students' work in class also gave me some knowledge on how I can improve my own work and try to avoid problems mentioned during reviews when making changes.

Findings

Overall, I definitely feel a little braver on trial and error in these 2 exercises, it really pushed me out of my comfort zone. Attention to small details whether it's text or some parts of a letter is quite important to make everything looked more visually balanced and consistent. I found that Week 3's Lecture is particularly interesting as I didn't really know much about the wide variety of writing systems and scripts used across Asia.

Search This Blog

Janice Cheah Pei Ern (0376497)

Advanced Typography - Task 1: Exercises

Comments

Post a Comment

Popular Posts

Typography - Task 1: Exercises