Advanced Typography - Task 3: Type Exploration and Application
Advanced Typography - Task 3: Type Exploration & Application
17.11.2025 - 2025 / Week 9 - Week 13
Dave Christian Moniaga / 0385630
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 3: Type Exploration & Application
Table of Contents
- Instructions
- Task 3
- Research & Observations
- Design & Digitization
- Font Generation
- Font Presentation & Application
- Final Compilation
- Feedback
- Reflection
- Further Reading
Instructions
Back to top
Task 3: Type Exploration & Application
In this next task, we are prompted to create a complete font using all
of the knowledge and experience that we have gained throughout our
study.
As the brief suggests, we may make a font in 3 types of
approach:
Create a font that is intended to solve a larger problem or meant to
be part of a solution in the area of your interest be it graphic
design, animation, new media or entertainment design or any other
related area not necessarily reflecting your specialisation. End
result: a complete generated font (.ttf) with applications.
or
Explore the use of an existing letterform in an area of interest,
understand its existing relationship, identify areas that could be
improved upon, explore possible solutions or combinations that may add
value to the existing letterform / lettering. End result: a complete
generated font (.ttf) with applications.
or
Experiment. For your idea to qualify as an experiment it must be novel
and unique — working with material that might be 3-dimensional,
digitally augmented, edible, unusual, typographic music video or fine
art. End result: defined by student.
For week 8, I started to do research and explore some of the ideas
that I would to do for this task. All of my ideas are listed in my
slides:
Fig 1.1 Task 3: Type Exploration & Application Proposal
by Dave Moniaga (18/11/2025, week 9)
After an extensive and detailed feedback from the lecturer regarding
my choices, I decided instead to explore a topic that was brought up
by Mr. Vinod regarding Malaysia's lack of an official and original
icons for their road signs.
Research & Observations
LLM (Lembaga Lebuhraya Malaysia) Lettering is Malaysia's official lettering used in their traffic signs.
This lettering consists of LLM Normal and LLM Narrow.
As per my observation, it seems that LLM Narrow is used less
frequently when compared to LLM Normal that can be found in every
highway signage. At the same time, LLM Narrow seems to be less legible
compared to LLM Normal due to the nature of a condensed font.
This creates an opportunity for me to create a new redesigned LLM
Narrow from LLM Normal while at the same time fixing some of the
issues that I will find along the way.
When compared to Singapore, Malaysia does not have their own original
icon signage. Most are taken from pre-existing ones used by different
countries. Through my research, I found out that Singapore has made
their own road signages and the diagrams can even be found online for
public viewing, as seen in their official government agency website.
|
| Fig 2.2 Some of Singapore's official road sign diagrams (18/11/2025, week 9) |
My plan now is to make a wayfinding font consisting of pictogram icons
that can be used in road signages as my lowercase letters, and to make a
as my uppercase letters.
To choose which road sign icons I want to design, I first had to find out what kind of icons show up in Malaysian roads. I found the
list in Malaysia's official
2024 Driver’s Education Curriculum Test (KPP Test).
Although the list consists mostly of arrows or direction indications,
I thought it would be more purposeful to redesign the ones that
consists of more complex shapes.
As a start, I researched a lot of examples about the creation of road
signages, wayfinding, and icons. I also looked through examples of
these icons that exist in different countries such as the UK, US, and
EU.
Design & Digitization
For each icon, I made them using separate shapes instead of doing
everything freehand with the Pen Tool in order to maintain consistency
when I reuse them for other parts and other icons.
|
| Fig 3.2 First attempt at road icon designs (25/11/2025, week 10) |
For my first attempt, the feedback that I got was that it resembles the
original icons too closely and that it lacks the redesign aspect that I
should be focusing on. With that feedback in mind, I continued on to
make my uppercase letters.
Instead of creating a grid from scratch I modified Illustrator's grid
sizes to a line every 100pts and subdivision by 10.
As I am using LLM Normal as my reference, I measured the x height,
ascender, descender in a 1000pt height artboard just as mentioned in the
tutorial.
|
|
| Fig 3.4 LLM Normal and LLM Narrow's thickness comparison (28/11/2025, week 10) |
From there I reused the shapes I have made to construct the other
letterforms. For example, The curve of the "B" ends up becoming the
curves that is present in letters "C' and "D".
|
|
| Fig 3.6 Letter "C" and "D" using the curve shape from "B" (28/11/2025, week 10) |
For letters with slanted lines, I merely shift the edges either manually or using the Shear Tool. Although I do believe that the drawback of with this method is that the thickness of the shape decreases the more it is angled, even if the width does not change.
|
|
| Fig 3.8 First attempt at uppercase letters (29/11/week 10) |
Moving on, I measured the thickness of LLM Normal and I realized that the numbers and their letters have different thickness. Since I am following LLM Normal's measurements, I made the numbers with 131.9pt of thickness instead.
|
|
| Fig 3.9 LLM Normal's letters and numbers comparison(30/11/2025, week 10) |
As most of the shapes consists of curves, I ended up using a lot of circles and line to construct the numbers. This way, I can effectively make each curve faster and change the thickness whenever I want.
|
|
| Fig 3.10 LLM Normal's letters and numbers comparison(30/11/2025, week 10) |
Following the previous feedback about my icons, I started to redesign my icons to be more experimental. Looking through Pinterest at some of the more interesting and creative icon shapes.
Since the uppercase letters of LLM Narrow were very geometrical in
nature, I focused on this shape design to create my icons consisting of
squares and geometric shapes only.
I started sketching in Photoshop first as it will help me get a point
of reference when doing it in Illustrator.
|
| Fig 3.14 Current progress on the uppercase, lowercase, numeral, and punctuations (2/12/2025, week 11) |
In this week's feedback, I need to maintain the thickness of the
numbers with the sizing that I have set for the uppercase letters. Most
importantly, my pictograms are too rigid and the square grid I have made
limited a lot of the design that I have done.
The first thing I did was readjust the thickness of the numerals to
match my letters.
|
|
| Fig 3.15 Readjusting letter sizing to original letter width (2/12/2025, week 11) |
Since my uppercase letters and numerals needs to be legible for drivers
and pedestrians, it should also undergo stress testing. To do this, I
placed them into photoshop and applied blur effects that mimics the effect from the rain, during high speed and wet
windows.
|
|
| Fig 3.16 Blur stress testing in Photoshop at 10 (5/12/2025, week 11) |
|
|
| Fig 3.17 Blur stress testing in Photoshop at 20 (5/12/2025, week 11) |
|
|
| Fig 3.18 Motion blur stress testing in Photoshop at 50 pixels (5/12/2025, week 11) |
From what I observed, it seems some of letters and numbers suffer
during stress testing in blurry conditions, primarily the letters:
"A", "M", "V", "W", "X", "Y", and the number "4".
I deduce that it is caused by the thickness of the width as well as
the nature of the condensed font which has problems in its
counterspace.
For me, I adjusted the counterspace manually for the selected
letters and number. The downside is that the weight of the letters
will be smaller on certain points, which didn't seem to be that
noticeable.
|
|
| Fig 3.20 Expanding counter space on letters with poor legibility (7/12/2025, week 11) |
As I analyzed other pictogram & icon fonts such as, Poppi by Martin Friedl or Modern Pictograms by John Caserta, they mostly have similar height, and sizes despite the inaccurate scale comparison of each icons with one other.
|
|
| Fig 3.21 Example of the Poppi font by Martin Friedl (7/12/2025, week 11) |
|
|
| Fig 3.22 Example of Modern Pictogram font by John Caserta (7/12/2025, week 11) |
Considering that and the feedback about my icons, I redesigning most of them in a longer grid template and made sure I don't limit my design to the grid template itself. This way, I can maintain more consistency of weight and style across all designs.
|
|
| Fig 3.23 Extending the grid for more consistency in icon height (7/12/2025, week 11) |
|
|
| Fig 3.24 Current progress of letterforms, pictograms, numerals, and punctuations(9/12/2025, week 12) |
For this final feedback session, I was informed that uppercase letters are satisfactory. The problem lies in my pictograms once again as the stylized geometric look breaks legibility and cannot be understood properly. My punctuation also requires correction.
I quickly redesigned the pictograms, especially the human icons.
Just as before, I extended my grid so I can add more details and characteristics to my human
icons.
Some of these characteristics were made to ensure more legibility:
|
|
| Fig 3.25 Main characteristics of the new human icons (10/12/2025, week 12) |
- The icons have a more proportional human height,
- A distinct nose shape which helps at showing the direction the character is facing
- Rounded hands which contrasts the obvious feet shape on their legs.
|
|
| Fig 3.26 Comparison of the pictogram icon #2 and #3 attempt (10/12/2025, week 12) |
When comparing it to the previous design, the human icons are more
easily recognizable from afar. With the addition of the crosswalk for
crossing icons, it helps to also emphasize their purpose.
|
|
| Fig 3.27 Comma redesign from 1st, 2nd, 3rd (10/12/2025, week 12) |
One of the feedback following the icons were the punctuations. Based on the tutorial guide by Grilli Type Foundry (See in Further Reading), I needed to refine my period and commas.
Font Generation
With my designs now ready to be imported to FontLab, I set the font's
dimensions based on the measurements of my original reference (LLM
Normal) that I have written in Illustrator. This is also the time
where I finally decided the proper name of my font to be called
"NuWay".
After I imported all of the designs, I then started to adjust the side
bearings based on the guide that was given to us by the lecturer. As
my lowercase letters consisted of icons and have completely different
shapes, I ended up not using the guide.
|
| Fig 4.2 Side bearings guide for uppercase and lowercase (11/12/2025, week 12) |
I also ended up manually adjusting some of the side bearings myself by
eye to ensure all letters work well together when writing different
phrases and sentences.
The icon arrangements with the alphabet are not exactly random either. I didn't use alphabetical naming and chose to sort them using semantic group ordering, which is how other professional symbols also deal with icons of the same name / same starting letter (ISO, AIGA, SEGD).
![]() |
| Fig 4.4 Semantic Group Ordering of the icons (11/12/2025, week 12) |
The icon arranged from A-Z starts from:
- Animals
- Hazards/Road
- Pedestrians
- Services
- Vehicles
For the icons, I started of by placing all at 90 for both sides before tweaking each one by eye based on its relation with each other and my uppercase letters.
The rest of the numerals and punctuations are set with the automatic bearings and then tweaked to fit each letterform with one another through simple phrases and usage of their respective letter.
Once I have tested and adjusted all the side bearings in FontLab, I exported the font as a True Type Font file and proceed into creating the Font Presentation and Font Application.
|
|
| Fig 4.6 Numerals letter side bearings in FontLab (11/12/2025, week 12) |
|
|
| Fig 4.7 Punctuations side bearings in FontLab (11/12/2025, week 12) |
Once I have tested and adjusted all the side bearings in FontLab, I exported the font as a True Type Font file and proceed into creating the Font Presentation and Font Application.
Font Presentation & Application
To prepare for the final part of this task, I looked up several design
layouts from both Pinterest as well as from the TDC folder that was
given to us by Mr. Vinod.
|
|
| Fig 5.1 References of highways signage designs (11/12/2025, week 12) |
Taking inspiration from the various images I found, I wanted to create a colorful array of presentation that mimics that many colors that signages can have, similarly to my references.
|
|
| Fig 5.2 Color pallete (11/12/2025, week 12) |
I chose colors that are bright, saturated and essentially can be seen all the time in highway and road signs. That being said, these colors are almost all of the basic primary and secondary colors.
Since my font will explain a lot about signage, I made several
templates of signboards that can be used in the presentation to
feature my fonts and pictograms
|
|
| Fig 5.3 Some of the signboard templates used in the font presentation (11/12/2025, week 12) |
As my font lacks lowercase letters, I chose the font family Roboto to be used as part of my font presentation to help explain and add variety of font weight.
From my layout, I have already planned to have each presentation show
interesting things about NuWay.
- Explains context, background, and meaning
- Presents font list and information
- Font as a collage of signages
- Font used in a somewhat practical setting
- Font and pictograms used to make a street environment
Moving to the font application, I started downloading a few mockups
online that features highway, road signs, wayfinding panels, etc.
I browsed through several real life signs in Malaysia courtesy of
Papan Tanda Malaysia on X and came out with two outcomes at first.
Though, I wasn't satisfied with the current attempt. As the main
reasoning behind this font was to redesign something new, I figured I
had to also bring a more modern and new take on Malaysian signs
instead of just replicating it.
Based on the references I gathered from Pinterest, from there I took
some real life Malaysian signs in hopes to also redesign it while
using the NuWay font.
|
|
| Fig 5.8 Rapid KL Bus Station T201; original & redesign (14/12/2025, week 12) |
At the same time, I still think part of the application would be to replicate one of the real life highway signage courtesy of Papan Tanda Malaysia on X.
The other follow applications are also based of off real signs, but I
did not base it from a specific Malaysian road sign. Each application
serves to showcase what the "NuWay" font can do in different
scenarios.
|
|
| Fig 5.10 Font application spread (15/12/week 13) |
- A bus stop
- Highway signage
- Petrol station / Rest area sign
- Bike parking sign
- Vehicle parking sign
In my final week, turns out I needed to make a slight amendments
regarding my feedback for Font Presentation and Font Application.
|
|
| Fig 5.11 Font presentation that needs revision (16/12/week 13) |
With #1, the issues lie with the background itself. As I have used a Hindu deity which is disrespectful and might offend certain religious groups. The issue with #2 is the messy and overcrowded way I laid out the font.
In turn I created a revision for each issue, I changed #1 background
to the iconic Petronas Twin Towers, and two designs to choose which
has a more clean and breathable layout.
|
|
| Fig 5.12 Revision for #1 and two new font presentations to replace #2 (16/12/week 13) |
For my Font Application, the only issue I have is of this rest area sign which was misplaced onto a billboard mockup instead of the proper signage.
With that I found a more appropriate mockup as well as changing the color to make it more in accurate to the real life sign.
![]() |
| Fig 5.13 Final Font Presentation (16/12/week 13) |
![]() |
| Fig 5.13 Final Font Application (16/12/week 13) |
Task 3 Final Compilation
Click here to download
NuWay
Fig 6.1 Font Information - TTF File (15/12/week 13)
Fig 6.2 Finalized Letterforms - PDF (15/12/week 13)
|
| Fig 6.4 Font Presentation 1 (15/12/week 13) |
|
| Fig 6.5 Font Presentation 2 (15/12/week 13) |
![]() |
| Fig 6.7 Font Presentation 4 (15/12/week 13) |
|
| Fig 6.8 Font Presentation 5 (16/12/week 13) |
|
| Fig 6.9 Font Application 1 (15/12/week 13) |
|
| Fig 6.10 Font Application 2 (15/12/week 13) |
|
| Fig 6.11 Font Application 3 (16/12/week 13) |
|
| Fig 6.12 Font Application 4 (15/12/week 13) |
|
| Fig 6.13 Font Application 5 (15/12/week 13) |
Fig 6.14 Font Presentation & Application - PDF (15/12/week
13)
Font Tester
Type in the box to text the font:
Font Size: 60px
A NEW WAY OF WAYFINDING
*Reminder:
- Uppercase letters display the latin uppercase letters
- Lowercase letters display the wayfinding icons / pictograms
Feedback
Week 9:
General Feedback:
As we start at giving our proposal for task 3 this week, we are
told the minimum requirements on what we need to achieve in the
following week. Which is to complete at least all of the
uppercase letterforms of our font project. Mr. Vinod urges
students to read task expectations in teams to make sure we know
to do on our weekly tasks.
Specific Feedback:
It seems that most of my ideas are accepted and approved albeit
most are under the same classification of style since most of my
plans are to make highly decorative fonts. He suggested two good
ideas for me, one being to redesign LLM Narrow to be in the same
family as LLM Normal, two would be to create a wayfinding font
that can be used as an icon signage in Malaysia.
Week 10:
General Feedback:
Mr. Vinod reminded the students in the class that we need to
build the letters from scratch. We are not allowed to trace or
edit an existing font, but we are only allowed to refer to
them. As a side note, we are given previous semester videos
from Typography class on the Teams channel that should help
remind us on how to construct letterforms.
Specific Feedback:
I was informed that my work is too close to the original
reference and that I should experiment more with my designs. I
was also told to focus less on legibility as the chances of my
project being used officially is slim to none. Another advice
was to check on Olympic pictograms. I also needed to catch up
with my work as I am a bit behind.
Week 11:
General Feedback:
This week we are informed that to show our process, we need to
have a copy of the construction of our letterform shapes. As
we move fonts to FontLab, we need to avoid using the kerning
and focus instead of the side bearing guide as shown in Teams.
We should technically be able to present our font the
following week and prepare for application.
Specific Feedback:
I need to also fix any previous font mistakes that have been
made by LLM Normal, this includes the punctuations &
different thickness for the numbers. The main issue comes from
my pictograms, I have to be careful about legibility and most
of the shapes are too rigid and hard to understand. I should
also fix the height sizing of the pictograms and stop limiting
myself to the grid I have made.
Week 12:
General Feedback:
Next week will be our final submission. We also need to create
5 font presentations and 5 font application for the final
task. Students can also take inspiration from the way we
present our designs as shown in the TDC folder.All of the
presentation and application must be made within a 1024px by
1024px at 300ppi board.
Specific Feedback:
For my current feedback, Mr. Vinod mentioned that my geometric
style disrupts the icon to the point that it loses legibility
and that it doesn't work anymore. I shouldn't jump immediately
to stylistic and should start from realistic first before
making changes. My punctuations also need work, refer to the
tutorial video that was shown.
Back to top
Reflection
Experiences
I would have to be honest and say that this task fully exhausted
me and threw me into a loop. I possibly took almost 50% of the
time doing research, watching tutorials, and going through trial
and error on just the process of making icons. Early on, doing
this topic made me want to give up and go back to doing my
previous idea, but throughout the process I learn to enjoy the
feeling, the struggle, and even the exhaustion. Because
ultimately I learned a lot about this process and the reward that comes along with it. For me the purpose to of doing this task felt like it had much more meaning behind it.
Observations
Although this project wasn't initially my idea. I ended up
getting so caught up into it that it became somewhat of a
passion project. The idea that I am not only creating a font,
but using my design skills to solve a real world issue was a
huge motivation booster for me. I am aware that whatever
design I am making currently would highly likely not be used
officially, but it is still nice to finally think about
something else aside from my personal likings. This way, I am also able to widen my range of skillset and understanding in design. Taking a leap and facing the challenges head on instead of always doing what I know best.
Findings
In my research and findings, I came across various online
articles, findings, and books that talk about wayfinding
design and icons. The meticulous planning and list of
intricate rules in the creation of a signage icon may be
missed by those who end up looking and using their icons the most. At the same time throughout my research, I found a particularly useful book that delve deeper into this topic; "Signage and Wayfinding Design" by Chris Calori &David Venden-Eynden as written in my Further Reading.
Back to top
Further Reading
Week 9 (21/11/2025)
As I finally made the decision on choosing to design an official
wayfinding signs for Malaysia, I came across the book "Signage
and Wayfinding Design" by Chris Calori & David
Venden-Eynden.
In the excerpt "Symbol Vocabularies", it mentions
that designers should consider symbols for sign graphics as a
vocabulary. Signs and symbols requires three things in design:
- visual unity
- clarity
- simplicity
The most commonly used symbol vocabulary in the US is the
AIGA/DOT symbol developed by the American Institute of Graphic
Arts in the 1970s. The development involved research and
development of several parties and teams of distinguished
designers.
|
|
| Fig 7.2 Symbols from the AIGA/DOT symbol vocabulary (21/11/2025, week 9) |
The excerpt features also how informational and visual content of symbols are represented. A symbol may have the same intrinsic meaning with different stylistic treatments.
|
|
| Fig 7.3 Difference in graphic style with the same information (21/11/2025, week 9) |
The excerpt also talks about arrow symbols, and now designers tend to favor arrows with open heads and clear, orderly, geometrical styles. arrows without shaft communicates less clearly as it lacks directionality. Some may also interpret triangles as geometric sign instead of direction.
As advised by our lecturer, this Instagram post by Grilli Type Foundry is a guide to create punctuations:
primarily the period and the comma.
The guide mentions that the period should be bigger than the dot
on the "i" and that the heavier the font equals heavier
punctuation.
|
|
| Fig 8.2 Period size bigger than "i" dot (9/12/2025, week 12) |
It is also important to note that the period doesn't overshoot as much as the letter "O", while square period sit directly on the baseline.
|
|
| Fig 8.3 Period overshoot size (9/12/2025, week 12) |
One of the more important distinction in the guide is the fact that a comma has the height of two periods, with the comma's head being slightly smaller.
|
|
|
Fig 8.4 Comma height and size (9/12/2025, week 12) |
The downstroke terminal's angle of the comma can also be related to
the angle of the "S". For example: horizontal, diagonal, or
vertical.
The post also shows a variety of different styles of a comma:
|
|
|
Fig 8.6 Different comma styles (9/12/2025, week 12) |
The colon and semicolon also uses the same period and comma, placed between the x-height and the baseline.




















Comments
Post a Comment