Advanced Typography / Task 3 : Type Exploration and Application

Create a font that is intended to solve a larger problem/ part of a solution in the area of your interest.
Explore existing letterforms in an area of interest.
Experimental design

What we need to submit:

A-Z; Numerals; Punctuation
Link to your .ttf font.
5 font presentations (1024 x 1024 px, 300ppi)
5 font applications (1024 x 1024 px, 300ppi)

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

Getting started : Proposal

To start, we were instructed to present a proposal consisting of our ideas related to the topic.

Below is my proposal presentation made in Google Slides:

Fig 1.1 - Proposal Slides, Week 8

After presenting on week 9, I decided to go with the first idea, which is making a font inspired by the Nokia Snake Game.

Fig 1.2 - Nokia Snake Game, Week 9

Researching and collecting references

After confirming the design direction, I set out on the Internet to find references for my work. I found screenshots of different snake game and existing fonts that looked similar to what I had in mind to get a visual idea.

Fig 1.3 - References, Week 9

Sketches

For the letters, I wanted it to be one continues line throughout the entire letter without overlapping. So I started with a rough sketch of the first few letters.

Fig 1.4 - Sketches, Week 9

Building the Font in Adobe Illustrator

With the sketches as a guide, I booted up Illustrator and started making the first version of the snake font. I wanted. The letters will be Unicase, so the letter designs will be a mish-mash of of Uppercase letters and lowercase letters.

To ensure the thickness of the line is consistent, the width of the lines follows the grid in Adobe Illustrator.

Fig 1.5 - Designing following grids, Week 10

Here is the first attempt on the font design.

Fig 1.6 - Digitization 1st attempt, Week 10

Feedback, redesigning and digitizing again

After having Mr. Vinod review my first digitization attempt during class time, he commented that it would be better if the double lines of the letters be removed to keep the overall font design consistent.

Therefore, I made some changes to the design by removing the continuity aspect of the design, breaking it into 2 lines for the letters (inspired by the 2 player mode of some snake games), making the design look simpler.

Fig 1.7 - Digitization 2nd attempt, Week 10

However, I couldn't complete remove the double line element complete (as seen above), so I made another change in the design. This time, instead of getting rid of the double line element, I brought back the 'One line for one letter' rule to my letter designs and went all in with the double line design.

Fig 1.8 - Digitization 3rd attempt, Week 10

Feedback and redesigning individual letters

After that, I showed the newest design to Mr Vinod, and he liked it. But for some letters (like M, N, W, U, and some others), he wanted me to make variation for theses letters. I looked at my letter designs and indeed some of them looked a bit odd. So here are the variation designs.

Fig 1.9 - Variation design of I, J, Z and G, Week 11

Fig 1.10 - Variation design of M, N, U and W, Week 11

Final design of letterform for "Snake Game Font"

Fig 1.11 - Final design of letterform for "Snake Game Font", Week 11 (1/7/2025)

Numbers

Numbers and punctuations were created using the same method as the above letterforms.

Fig 1.12 - Numbers first design, Week 12

The number 6,8 and 9 were harder to design. I have made a variation of designs for these guys. But in the end, I settled for the designs in the black boxes below.

Fig 1.13 - Variation design of 6,8, and 9, Week 12

Final design of numbers for "Snake Game Font"

Fig 1.14 - Final design of numbers for "Snake Game Font", Week 12 (8/7/2025)

Punctuations

For the punctuations, at first I wanted it to be slightly different from the base font, using the single line design element. Which is shown in this first attempt:

Fig 1.15 - Punctuations first design, Week 12

However, I ran into the same issues as while designing the letters for this font. So here is the second version with the double line element and the variations I have made for some of the symbols:

Fig 1.16 - Punctuations second design, Week 12

Fig 1.17 - Variation design of some punctuations, Week 12

Final design of punctuation for "Snake Game Font"

Fig 1.18 - Final design of punctuations for "Snake Game Font", Week 12 (8/7/2025)

Font adjusting and exporting using BirdFont

To create the font, I had to use Fontlab7 to make my font. However, my Fontlab7 trial had expired and I didn't really want to use the classroom computer to access Fontlab7. Thus, I went searching for a another font editor software and found 'BirdFont', a free font editor developed and maintain by 3 people.

Importing letterforms onto FontForge from Illustrator

After finalizing all the cases, numerals, and punctuations, I went onto BirdFont to import the letterforms. With the help of YouTube tutorials from the developer of this software, I was ready to start working on my fonts.

Firstly, I used the asset export tool to export each of my letterforms into the asset window and exported them in SVG format.

Fig 1.19 - Asset export in Illustrator to SVG format, Week 12

Fig 1.20 - Importing files into BirdFont, Week 12

After categorizing each exported file into its own folder, I imported each letter, number, and punctuation onto BirdFont. Then, using the placement tool and the snap to baseline shortcut, I adjusted the overall size and placement to the cap height and x-height of BirdFont.

Fig 1.21 - Letter placement in BirdFont, Week 12

Finalized imported letterforms to BirdFont

Fig 1.27 - All kerning pairs for the letterforms, Week 12

Kerning and Side bearing adjustments

Once the letterforms are imported, I started adjusting the side bearings and kerning of the letterforms according the measurements table provide by Mr. Vinod.

Fig 1.23 - Side bearing measurement table, Week 12

Here are the Side bearing and kerning adjustments to the letterforms. (some editing magic was use on the screenshots because I couldn't really show the full side bearing and kerning table in BirdFont.)

Fig 1.24 - Side bearing for Letters, Week 12

Fig 1.25 - Side bearing for Numbers, Week 12

Fig 1.26 - Side bearing for Punctuations, Week 12

Fig 1.27 - All kerning pairs for the letterforms, Week 12

Font Presentation

Before making the font presentations, I needed a colour palette first. I rather liked the colour palette I have made in Task 2 so I decided to use that palette.

Fig 1.28 - Colour palette, Week 13

For the font presentation, since the font itself is based on the snake game, I designed an old school game UI (based on arcade game UI and the snake game UI) to showcase the letters, numbers and some of the punctuations. These presentations were made using the font itself and a bunch of rectangles.

Fig 1.29 - The making of font presentations, Week 13

With the 3 presentation showcasing the font itself, I have made a few other presentation to showcase the font being used in a artistic way.

Fig 1.30 - The making of font presentations part 2, Week 13

After showing these works to Mr. Vinod, I have selected the 3 font presentation from fig 1.29 and the 2 works on the right in fig 1.30 to be my final 5 font presentation.

Finalized Font Presentation artworks

Fig 1.31 - Font Presentation 1, Week 13

Fig 1.32 - Font Presentation 2, Week 13

Fig 1.33 - Font Presentation 3, Week 13

Fig 1.34 - Font Presentation 4, Week 13

Fig 1.35 - Font Presentation 5, Week 13

Font Application

For font applications, I though of making more digital related items such as device wallpapers and phone cases. Also, while searching for applications ideas, I saw a Vinyl record mockup and though it would look pretty great, so that will be my 3rd application.

Looking around at what my friends have made, and looking at previous experiences in making mockups, I decided to make a tote bag and a t-shirt applications for my 4th and 5th font applications.

Fig 1.36 - Searching for mockup templates, Week 13

Some the design layouts for the mockup application were prepared in Adobe Illustrator and exported to Photoshop for placement, while other were made directly in Photoshop. Below are some of the processes for layout placement in Photoshop:

Fig 1.37 - Making tote bag mock up in Photoshop, Week 13

Fig 1.38 - Making T-shirt design in Photoshop, Week 13

Also, I made sure to have one of my applications (Smartwatch wallpaper) to be from the HONOR design competition, as requested by Mr. Vinod. The link to the competition can be found here: https://www.honor.com/global/honor-talents/global-design-awards/

Finalized Font Application

Fig 1.39 - Font Application 1, Week 13

Fig 1.40 - Font Application 2, Week 13

Fig 1.41 - Font Application 3, Week 13

Fig 1.42 - Font Application 4, Week 13

Fig 1.43 - Font Application 5, Week 13

Final: Task 3 Compilation

Finalized Letterforms

Click here to download Snake Game Font

Fig 1.44 - Finalized letterforms (PDF), Week 13 (19/7/2025)

Font Presentation artworks

Fig 1.45 - Font Presentation 1, Week 13 (19/7/2025)

Fig 1.46 - Font Presentation 2, Week 13 (19/7/2025)

Fig 1.47 - Font Presentation 3, Week 13 (19/7/2025)

Fig 1.48 - Font Presentation 4, Week 13 (19/7/2025)

Fig 1.49 - Font Presentation 5, Week 13 (19/7/2025)

Fig 1.50 - Font Presentation (PDF), Week 13 (19/7/2025)

Font Application

Fig 1.51 - Font Application 1, Week 13 (19/7/2025)

Fig 1.52 - Font Application 2, Week 13 (19/7/2025)

Fig 1.53 - Font Application 3, Week 13 (19/7/2025)

Fig 1.54 - Font Application 4, Week 13 (19/7/2025)

Fig 1.55 - Font Application 5, Week 13 (19/7/2025)

Fig 1.56 - Font Application (PDF), Week 13 (19/7/2025)

Feedback

Week 9:

General feedback :

Task 1 & 2 eportfolio

Put horizontal line to differentiate the sections
Submission compilations remember to put in
Add opening image for eportfolio – adds personality

Specific Feedback :

Task 1 & 2 eportfolio

Add dates to the figures

Task 3 proposal

Idea 1 and Idea 3 are good, can proceed with either ideas.

Week 10:

General feedback :

Task 3 Uppercase letters

Use the grids, keep the width of the line consistent
Make the letters H, O,A first, then continue from there

After that, we were instructed to complete all lowercase letterforms (numerals & punctuations as well).

Specific Feedback :

Task 3 Uppercase letters

The double lines are a bit too much, can change
(Me showing plan B: Making all letters to have the double lines) Good idea, continue this.

Week 11:

General feedback :

Task 3 letters and numbers and punctuations

Base the punctuation on existing fonts
Remember to show progress, otherwise it looks like plagiarism.

After that, we were instructed to complete all punctuations.

Specific Feedback :

Task 3 letters, numbers and punctuations

Letterforms Ok
Numbers Ok
Punctuation a bit too small, make it bigger.

Week 12:

General feedback :

Task 3 punctuation and fonts adjustment in fontlab/fontforge/other applications.

Base the side bearings and kerning on the chart given

After that, we were instructed to complete the font presentation and font application

Specific Feedback :

Task 3 punctuation and fonts adjustment in fontlab/fontforge/other applications.

Punctuation Ok
(Fontlab trail expired, didn’t want to go all the way to D704 to use fontlab, and fontforge too confusing, so I found and used birdfont instead) “Up to you, If you can use birdfont to export our font then that’s great”

Week 13:

General feedback :

Task 3 font presentation and font application.

Remember, the font presentation is to showcase your font.
Remember to show progress, otherwise it looks like plagiarism.

After that, we were instructed to finish everything up this week for submission

Specific Feedback :

Task 3 font presentation and font application.

(referring to the artwork I showed) the snake design is a bit too fat, can be skinnier
make the text on artwork 1 the same size

Reflections

Experience :

Designing this font based on the Nokia Snake Game was both exciting and challenging. At first, I wanted every letter to follow a one-line, non-overlapping path, which was fun but hard to keep consistent. After a few trials and feedback from Mr. Vinod, I changed the approach and fully embraced the double-line design. Learning BirdFont was another new experience—I had to switch because my FontLab trial expired, but BirdFont turned out to be quite useful after I got the hang of it.

Observations :

Throughout this project, I noticed that small details like line thickness, letter spacing, and shape consistency really matter in type design. Some letters, especially M, W, and G, were difficult to make readable while staying true to the snake-inspired style. I also saw how important it was to test the font in different sizes and settings to check its usability.

Findings :

Grids helped keep the font clean and uniform.
Using new software wasn't as hard as I thought, BirdFont turned out to be quite useful as a free software
Feedback and constant testing were key to improving the design over time.

Search This Blog

Rachel Ng Jie Ting (0378902)