Advance Typography - Task 3: Type Play & Expression

on
11/06/25 (Week 8 - Week 14)
Samuel Keane / 0376236
Advanced Typography / Bachelors of Design (Honors) in Creative Media
Task 3: Type Play & Expression

JUMPLINKS

1. LECTURES
4. FEEDBACKS

LECTURES

There are no lectures.

    INSTRUCTIONS

    TASK

    Task 3: Type Play & Expression

    The final task for advanced typography. In this task, we are required to create a new font. We were given 3 option to choose from as a base of the font.
    1. Create a font that is intended to solve a larger problem/ part of a solution in the area of your interest.
    2. Explore existing letterforms in an area of interest.
    3. Experimental design

    We were also instructed to make a power point presentation for the proposal.

    Type Digitization

    I ultimately decided to settle with the second idea. Like usual, I did all of the digitalization process on Illustrator. Before starting, I did a little bit of experimentation. But, The gap between bricks are too wide, so I scrap this version and work on a new one.

    Fig. 3.1, First attempt, Week 10 (23/06/2025)

    I started by making a "wall" of bricks as a base of the shape for the uppercase letters.

    Fig. 3.2, Base, Week 10 (23/06/2025)

    From that, I shape all the capitalized letters from A-Z.

    Fig. 3.3, Initial outcome, Week 10 (23/06/2025)

    Feeling unsatisfied with the result, I changed some of the alphabets to make them look more consistent. I sacrificed the personality of the bricks and go for a more consistent look.

    Fig. 3.4, Revised, Week 10 (23/06/2025)

    The next thing to do is to make numbers and punctuations.

    Fig. 3.5, Numbers and punctuations, Week 10 (24/06/2025)

    FontForge

    After finishing all of the characters for the font, I used FontForge to make this font come to life. First I separate each characters on Illustrator into their separate artboards. The size is 1000x1000 to match the measurements in FontForge.

    Fig. 3.6, Characters separated, Week 11 (04/07/2025)

    After separating the characters, I saved them as .svg files and open FontForge to continue the process. I named the font Brikin, taken from "Another Brick in The Wall".

    I started by importing the characters one by one according to their names.

    Fig. 3.7, FontForge, Week 11 (05/07/2025)

    After done with putting all of the text down, I did the kerning using the metric window. 

    The kerning process is quite easy since the characters I am dealing with are very blocky and all of them has similar dimensions. For the letters and numbers, I set all the bearings to 50

    Fig. 3.8, Alphabet kerning process, Week 11 (05/07/2025)

    For punctuations, I set both bearings for question mark and exclamation mark 100 and 130 respectively. I tried several combinations of punctuations and letters  and adjust the rest by eye.

    Fig. 3.9, Punctuations kerning process, Week 11 (05/07/2025)


    Font Presentation

    I decided to stick with the main theme of the font (bricks), so I used colors that are associated with bricks. I first do all the layouts and composition on Adobe Illustrator.

    Fig. 3.10, Illustration layout process, Week 12 (08/07/2025)

    The layouts then were moved into Photoshop to later add textures and coloring.

    Fig. 3.11, Photoshop process, Week 12 (08/07/2025)

    Lastly, I export all of the files into jpeg and here are the results.

    Fig. 3.12, Font presentation results, Week 12 (08/07/2025)

    Font Application

    Basically we were tasked to do the font application twice. One is for the purpose of the font, and one is for the competition hosted by HONOR. For the first application, I decided to make a typography edit for Pink Floyd's song "Another Brick in The Wall Pt. 2." 

    Music Video

    On After Effects, I started with the first part by playing with the opacity and positions. Then I made it into a pre-composition and make as if there is a camera movement going on by zooming in and follow the appearing text.

    Fig. 3.13, Editing process 1, Week 13 (15/07/2025)

    For the next part, I did a little 3D effect on the text by using track matte and null object.

    Fig. 3.14, Editing process 2, Week 13 (15/07/2025)

    I used a sticker animation for the "classroom" line by going to the Effects menu, Distort, and CC Page Turn.

    Fig. 3.14, Editing process 3, Week 13 (15/07/2025)

    Next part of the song, I made a simple falling animation. The text stack to each other.

    Fig. 3.15, Editing process 4, Week 13 (15/07/2025)

    Then, I made an animation where the text falling from outside of the screen, almost like a stamp effect.

    Fig. 3.16, Editing process 5, Week 13 (15/07/2025)

    The last part is just text appearing, with a screen covering the entire frame in the end. Here is the result so far.


    Fig. 3.17, Fontforge screengrab, Week 13 (16/07/2025)

    Fig. 3.18, Font presentation, Week 13 (16/07/2025)


    FEEDBACKS

    Week 10

    General Feedbacks

    -

    Specific Feedbacks

    Try to focus more on working on the music video. Think of ways to make it interesting (letters forming into a wall, make the wall break, etc.).


    Week 11

    General Feedbacks

    -

    Specific Feedbacks

    Continue working on FontForge.


    Week 12

    General Feedbacks

    -

    Specific Feedbacks

    Mr. Vinod added, for unicase fonts, the lowercase should also be filled with uppercase letters.


    Week 13

    General Feedbacks

    -

    Specific Feedbacks

    I got a good job from Mr. Vinod.

    REFLECTIONS

    Experience

    This is the final task for advanced typography. The process during creating the font itself is pretty enjoyable. Even the final font application is enjoyable, don't get me wrong, but I need quite some time to figure some of the features out. Well, I guess I am happy that I can finally finish the final project. I am still not used with working on After Effects, so I still need to learn more about its features.

    Observation

    I found out that geometric fonts are easier to make since it depends more on the raw shape instead of lines and strokes. I also realized that fonts that are made for reading is extremely difficult to make. They require very precise measurements so eyes wont get tired or strained easily when reading.

    Findings

    I learned a few new features on After Effects, such as the page turn effect and using 3D layers. It was fun.

    FURTHER READING

    Week 8 - Readi: A ‘Font’ To Teach Children To Write

    Fig. 6.1, Readi, Week 8 (13/06/2025)

    This article documents the process of a font to teach children how to write. It is firstly initiated by Dr. Julia from Universiti Malaya Sarawak and developed with Mr. Vinod Nair. The font was custom, meaning that it was designed from scratch. Simplicity was put into consideration when building the font from the start, so the number of strokes on the characters are reduced.

    The development process of Readi went through several revision and testing. Technical challenges such as spaces between characters, inconsistent thickness, and glitches on different platforms were taken care of immediately. After going through more than 25 pages of feedback, the font is ready to use on different platforms such as Word, InDesign, and PowerPoint.


    Week 11 - The Fun in Function: A Typeface for Travel Agencies

    Fig. 6.2, © Jokka typeface by Lizzie Tanaka, 2024, Week 11 (13/06/2025)

    This article shows the development of Jokka, a typeface designed by Lizzie Tanaka. It was first made to solve a problem of designing a font for their travel agency. She noticed that most travel agency designs, especially the ones aimed at older people, looked super plain and boring. She used to help out her parents with their travel agency stuff before uni and always felt like the fonts didn’t match the fun and excitement of traveling. Everything looked too serious. That's where the main idea came in, she wanted to design a playful font while still maintaining readability.

    Comments

    Post a Comment