Advanced Typography | Task 1: Exercises
23/04/25 - 14/05/25 [ Week 1 - Week 4 ]
Nicco Chew Jin Xun (0366563)
Advanced Typography | Bachelor of Design (Hons) In Creative Media | Taylor's University
Tutor: Mr. Vinod
Table of contents
Task 1: Exercises [ Typographic Systems & Type & Play ] (20%)
2. Lectures
5. Reflection
Instructions
Lectures
- More vernacular scripts are being produced by software giants (Google)
- In their employment a great many Asian programmers and designers
- More and more vernacular and "multi-script" typefaces - a term coined by Muthu Nedumaran are being produced to cater to situations where the written matter is communicated in the vernacular script / vernacular & Latin scripts.
- In Malaysia, murasu.com spear-headed by programmer and typographer Muthu Nedumaran.
- Different types of vernacular writing systems was cracked by Muthu.
- The system is now used in mobile phones and desktops.
- Huruf a local group of graphic designers interested in the localized lettering of latin & vernacular letters painted / inscribed on walls & signages are amongst the more prominent organizations digitizing & revitalizing typefaces in Malaysia.
- Ek Type and Indian Type Foundry are organizations that have done ground breaking work with the development of vernacular typefaces in India.
2. Type design is a form of artistic expression.
- A renowned twentieth century Swiss graphic designer
- Typeface designer & considered responsible for the advancement of typography into digital typography
- His valued contribution to typography includes the typefaces; [ Univers & Frutiger ]
- Frutiger is a sans serif typeface designed in 1968
- Purpose: The goal of this new typeface was create a clean, distinctive & legible typeface that easy to see from both close up and far away.
- Considerations / Limitations: letterforms needed to be recognized even in poor light conditions / when the reader was moving quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified.
- The son of Harry Carter, Royal Designer for Industry, contemporary British type designer & ultimate craftsman.
- Many of Carter's fonts were created to address specific technical challenges.
- Purpose: the font was tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.
- Considerations / limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i, j, l.
Johnston Sans by Edward Johnston
- The creator of the London "Underground" typeface, which known as "Johnston Sans" (1916).
- He was asked to create a typeface with "bold simplicity".
- Purpose: London's Underground railway ordered a new typeface for its posters and signage from the calligrapher Edward Johnston. He handed over details and examples of letter shapes that would set the tone for printed text until the present day.
- Consideration / limitations: Johnston’s goal was to bring unity to the London Underground Group, where different companies shared the same rails & tunnels but used completely different signage & advertising. The result was a chaotic mix of typefaces. To solve this, Johnston designed a typeface based on the proportions of Roman capital letters, grounding it in history and traditional calligraphy. At the same time, it had a simple, elegant style that suited the modern age perfectly.
General Process of Type Design
1. Research
- We should understand type history, type anatomy, type conventions, terminologies, side-bearing, metrics & hinting while creating type.
- It is important to determine the type's purpose &what it would be used for
[ whether the typeface is for school busses / airport signages, etc. ]
2. Sketching
- Some designers sketch their typeface using traditional tool set [ brushes pens, ink & paper ]
- Some using digital tool sets [ Wacom ] directly into a font design software ( quicker, persistent & consistent ) but this sometimes impede the natural movement of hand strokes.
3. Digitization
- Professional software that used in the digitization of typefaces are: FontLab and Glyphs App.
- There are designers that use Adobe Illustrator to design / craft the letterforms then introduce it into the specialized font apps. However, this is frowned upon by purists.
- Attention should be given not only to the overall form but also to the counterform, as it plays a crucial role in the readability of the typeface.
4. Testing
- An important component in the design thinking process.
- The results of the testing is part of the process of refining and correcting aspects of the typeface.
- Prototyping is also part of the testing process & leads to important feedback.
- Depending on the typeface category ( display type / text typ ) the readability & legibility of the typeface becomes an important consideration.
5. Deploy
- There are always teething problems that did not come to the fore during prototyping & testing phases.
- Thus, the 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
- The grid is made up of a square with a circle inside it, touching the lines of the square in four places. - Within this square, there’s also a rectangle which is three-quarters the size of the square and positioned in the centre of the square.
- Using grids ( with circular forms ) can help guide the construction of letterforms and serves as a useful method to build / create / design your letterform.
Constructions & Considerations
- 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals & a group for lowercase letters.
- Many different forms & constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved forms past the baseline and cap line. This also applies to vertical alignment between curved & straight forms.
- A visual correction is also needed for the distance between letters. It is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform
'visual' white space. This means that the white space between the letters should appear the same which is called 'fitting' the type.
Why Typefaces Are Designed: Motivation & Meaning
Most typefaces are created due to a need / demand.
The need / motivation can be intrinsic and extrinsic.
- Intrinsic: The designer driven by personal desire to design a typeface. It is also possible that the designer identifies a problem and thus endeavors to solve it through design of typeface.
- Extrinsic: The designer's motivation arises from external demands [ commissions / assignment ] to complete that involves designing a typeface.
- For a design to be successful, the designer needs to be invested in the idea & understand the requirement / limitations / use / stakeholder.
Task 1 / Exercises [ 20%]
The exercises are as follows:
1. 8 Typographic Systems ( 1 week )
- Axial, Radial, Dilatational, Random, Grid, Modular, Transitional & Bilateral
-
- For this task, we had to design 8 typographic systems poster layout in Adobe InDesign only[ 200 x 200mm ]
- Select an image of a man-made object (chair, glass, etc.) or structures (buildings), or something from nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc).
- Analyse, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. Minimum 5 different letterforms need to be extracted from the image.
- Upon completing the letterforms, combine the letterforms with an image that is the basis of the extracted letters which is a square movie poster
Exercise 1: Typographic System
- For this task, we had to design 8 typographic
systems poster layout in Adobe InDesign
only
[ 200 x 200mm ]
- In addition to black, we can use other colour.
Limited graphical elements (line, dot, etc.) can be
used.
The Design School,
Taylor’s University
All Ripped Up:
Punk Influences on Design
/
The ABCs of Bauhaus
Design Theory [ I choose this ]
/
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
Exploration of Axial System:
I began with the Axial System, placing elements along a
single central axis. Text is aligned to either side of this
line, creating a structured but flexible layout. This system
gave the page a clear direction and movement.
Font used: Bodoni 72
Fig 5.1 - Axial System progress screenshot, week 1
Exploration of Radial System:
For the Radial System, I arranged the text to radiate from
a central point. I experimented with curve direction and
word flow to create a sense of movement. The result felt
more dynamic and energetic compared to the Grid layout,
guiding the viewer’s eye outward in a circular motion.
Font used: Futura
Fig 5.2 - Radial System progress screenshot, week 1
Exploration of Transitional System:
For the Transitional System, I allowed the text to flow
more freely across the page, creating visual bridges from
one area to another. The alignment shifts gradually, which
creates a natural reading flow while maintaining balance.
This layout felt expressive and narrative, guiding the
viewer without rigid structure.
Font Used: ITC New Baskerville Std
Fig 5.3 - Transitional System progress screenshot, week
1
Exploration of Dilatational System:
In the Dilatational System, I arranged text along expanding
circular paths. This approach adds a sense of expansion and
openness. It took some time to balance spacing and
legibility while maintaining the circular growth, but it
helped me understand how type can express tension and
release through motion.
Font Used: ITC New Baskerville Std & Futura
Fig 5.4 - Dilatational System progress screenshot, week
1
Exploration of Random System:
This system was the most playful and experimental. I
scattered text across the canvas in seemingly unstructured
ways, while still maintaining a sense of visual logic.
Overlapping, rotation, and varying type sizes were used to
create tension and energy. It was fun to break the rules and
discover visual interest in chaos.
Font Used: Univers LT Std, Impact, ITC New Baskerville Std, Bodoni 72, Futura, Gill Sans
Std
Fig 5.5 - Random System progress screenshot, week 1
Exploration of Grid System:
For the Grid System, I establish a strong foundation in
alignment and hierarchy. I used a clear column structure and
aligned all text elements consistently. This approach gave
the layout a formal and professional look. The content feels
organized and easy to follow, with balanced use of white
space.
Font Used: Bodoni
72
Fig 5.6 - Grid System progress screenshot, week 1
Exploration of Modular System:
Using the Modular System, I created square/rectangular
blocks for each piece of information. The layout was based
on repeating units, which gave the design a strict,
systematic appearance. It was challenging to fit everything
into modules without breaking the visual consistency, but it
taught me to work within strict limitations.
Font Used:
Futura
Fig 5.7 - Modular System progress screenshot, week
1
Exploration of Bilateral System:
I used the Bilateral System to create symmetry along a
central vertical axis. This resulted in a formal, balanced
composition. The challenge was to keep both sides visually
equal without feeling static. Adjusting type sizes and line
lengths helped me maintain harmony.
Font Used: ITC New Baskerville Std
Fig 5.8 - Bilateral System progress screenshot, week
1
Final Outcome
Exercise 2: Type & Play [ Part 1 ]
- For this task, we will be asked to select an image of a man-made object (chair, glass,
etc.) or structures (buildings), or something from
nature (Human, landscape, leaf, plant, bush, clouds,
hill, river, etc).
- Then, we had to analyse, dissect and identify
potential letterforms within the dissected image. The
forms would be explored and ultimately digitized.
Minimum 5 different letterforms need to be extracted
from the image.
Reference images from Pinterest
Fig 6.1, 6.2, 6.,3 - Reference images of tree
branches, Week 3
Final type & play image taken by me in Penang
Fig 6.4 - Type & Play image of tree branches,
Week 3
Tracing & Extracting letterforms in Adobe
Illustrator
Fig 6.5 - Tracing letterforms of tree branches,
Week 3
Fig 6.6 - Tracing letterforms of tree branches,
Week 3
Fig 6.7 - Initial extracted letterforms of tree
branches (JPEG), Week 3
Fig 6.8 - Final extracted letterforms of tree
branches (JPEG), Week 3
Fig 6.9 - Reference Font - Oriya MN (JPEG), Week 3
Fig 6.11 - Compiled Process board (JPEG), Week
3
.jpg)
Fig 6.11 - Overall Refining Process (JPEG), Week
3
.jpg)
Final Outcome
Fig 6.12 - Final type & play letter compilation
(PDF), Week 3 (05/05/2025)
Fig 6.13 - Final type & play letter compilation
(PDF), Week 3 (05/05/2025)
Exercise 2: Type & Play [ Part 2 ]
Inspirations
Chosen Background
Whenever I observe movie posters, I often find myself deeply drawn to the way the text is arranged as the typography always catches my eye. However, I often struggle with how to design an attractive layout myself, and I'm also unsure about what kind of content to include in the poster.
To tackle this, I started researching on Google and collected several movie posters with typography styles that I personally like. These references serve as my visual inspiration and help guide me in understanding different ways text can complement a movie poster’s overall design.
Fig 7.3 - Visual inspiration of typography layout from google, Week 3 (10/05/2025)
After gathering references, I decided to try creating my own layout using the inspiration I had collected as a guide. I started playing around with font size, spacing, alignment, and placement to see what kind of composition would work best for a movie poster。 It was a trial-and-error process, but it helped me better understand how typography can create mood, hierarchy, and visual balance in a design.
Final Outcome
Fig 7.7 -Final Movie Poster (JPEG), Week 3
(08/05/2025)
Fig 7.8 - Final Movie Poster (PDF), Week 3
(08/05/2025)
Feedback
Week 1 [ 23/04/25 ]
General Feedback:
I was unable to join week 1 class physically due to
urgent matters.
Specific Feedback:
I was unable to join week 1 class physically due to urgent
matters.
Week 2 [ 30/04/25 ]
General Feedback:
Mr Vinod gave feedback to our works and mentioned about
margins space is critical, we should focus on text,
don't make it too graphic. Besides, text informations
has to be visible.
Specific Feedback:
-
Week 3 [ 07/05/25 ]
General Feedback:
Mr Vinod gave feedbacks to our works and
teach us several key techniques for design
work: using Shift to delete
unnecessary points without altering the
shape, and using the Brush Tool to add detailed strokes. Once a
pattern is formed, we can use Object > Path > Outline Stroke followed by Compound Path to overlay it. For movie posters,
logos should be Image Traced (with optional color adjustments),
and big titles can be designed
in Photoshop, while the overall
layout should be completed in Adobe Illustrator.
Specific Feedback:
Mr Vinod said overall is ok but have to make
sure that all the letters should be in the
same thickness so letters F, A & Y should
make changes and move on to make movie
poster.
Week 1 [ 23/04/25 ]
General Feedback:
I was unable to join week 1 class physically due to urgent matters.
Week 2 [ 30/04/25 ]
Week 3 [ 07/05/25 ]
Mr Vinod gave feedbacks to our works and teach us several key techniques for design work: using Shift to delete unnecessary points without altering the shape, and using the Brush Tool to add detailed strokes. Once a pattern is formed, we can use Object > Path > Outline Stroke followed by Compound Path to overlay it. For movie posters, logos should be Image Traced (with optional color adjustments), and big titles can be designed in Photoshop, while the overall layout should be completed in Adobe Illustrator.
Week 4 [ 14/05/25 ]
General Feedback:
Mr Vinod gave feedback to our movie poster works and told us that the title
should interact / play with the background,
making the text feel integrated with the
imagery.
Specific Feedback:
He is fine with the overall composition &
colours however he did mentions that the text and
the background feel like separated. It would be
great if try to have some form of subtle effects [
transparency / blending mode / multiply effects
(fx) ]
Week 4 [ 14/05/25 ]
General Feedback:
Mr Vinod gave feedback to our movie poster works and told us that the title should interact / play with the background, making the text feel integrated with the imagery.
Specific Feedback:
He is fine with the overall composition & colours however he did mentions that the text and the background feel like separated. It would be great if try to have some form of subtle effects [ transparency / blending mode / multiply effects (fx) ]
Reflection
Observation
Working on this project pushed me to explore a more instinctive
and expressive side of typography. Inspired by raw
natural elements like branches, bones, and shadows, I shaped the
letter “F, A, N, C, Y" to feel untamed and organic. At first, the
composition felt flat, even though I liked the contrast between
the sharp form and the textured background. The effect created
depth, suggesting cracks of light between jagged edges, and gave
the design a more immersive, atmospheric feel. It reinforced how
powerful small, intentional tweaks can be in amplifying both
meaning and mood.
Findings
This task allowed me to explore type design in a way that felt
deeply personal and expressive. I began by deconstructing
the letter "N" into something more raw and organic by taking
inspiration from natural forms like twisted branches, bones, and
sharp shadows. The process wasn’t just about shaping a letter;
it was about creating a mood and personality through form.
Initially, I struggled with making the design feel integrated
into the overall composition. While the contrast between
the type and the background worked visually, something still
felt detached. It wasn’t until I applied Mr. Vinod’s suggestion,
thaN everything started to connect.
Experiences
Through this project, I discovered how subtle refinements like
light, shadow, and texture can completely shift the tone of a
design. More importantly, I learned that typography can carry
emotion, tension, and storytelling, even through a single
letterform. It taught me to trust experimentation and to pay
attention to the smaller visual decisions that make a big impact in
the final outcome.
Further Reading
- Systems help designers build clarity and coherence in layouts.
- Even the most expressive or chaotic-looking designs often rely on an underlying structure.
3. Hierarchy & Emphasis
-
Systems create visual hierarchy, guiding how a reader navigates content.
-
Use scale, weight, alignment, and contrast to emphasize information.
- Systems create visual hierarchy, guiding how a reader navigates content.
- Use scale, weight, alignment, and contrast to emphasize information.
4. Form & Counterform
-
Positive (form) and negative space (counterform) are equally important.
-
Good typographic systems maintain a balance between type and space.
2. Kreatif Beats - Finding Type: A Novel Typographic Exercise
Comments
Post a Comment