Advanced Typography: Task 3 Type Exploration & Application
[ 18/06/25- 16/07/25] (Week 9 - Week 13)
[ Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Advanced Typography ]
[ Task 3: Type Exploration & Application ]
TABLE OF CONTENT
1. INSTRUCTIONS
2. PROCESS WORK
For this task, we are required to improve, adjust or explore a typeface. We need to think three ideation and consult with Mr Vinod.
Below is my proposal slide:
Advanced Typo TASK 3 Proposal by NG JIA XUAN
Advanced Typo TASK 3 Proposal by NG JIA XUAN
The chosen ideation is IDEATION 3 which is the ideation that I am interested in the most.
2.1 PRE-PREPARATION
Since plaid has a consistent pattern, I decided to create a template based on it first to streamline my process before developing the typeface.
#1 Attempt
 |
| Fig 2.1.1: Attempt #1 for the pattern, Week 9 (16/06/25) |
#2 Attempt
 |
| Fig 2.1.2: Attempt #2 for the pattern, Week 9 (16/06/25) |
 |
| Fig 2.1.3: Different size of pattern, Week 9 (16/06/25) |
2.2 UPPERCASE & LOWERCASE MAKING
First, I set the measurements for the anatomy of the typeface, uppercase and lowercase.
Measurement:
Cap Height & Ascenders: 250pt
X Height: 500pt
Descenders: 250pt
Uppercase:
Height: 750pt
Weight: 450pt & 600pt (M,W)
Lowercase:
Height: 500pt & 750pt (Adding ascenders or descenders) & 1000pt (j)
Weight: 350pt & 500pt (m,w)
 |
| Fig 2.2.1: Similar letters and numbers, Week 9 (22/06/25) |
To make my process smoother, I listed out similar-looking letters and numbers (such as 5 and S, or 2 and Z) before starting the font making. I then tried to find solutions for each pair, by using different shapes or adjusting the stroke weight to make them easier to differentiate.
 |
| Fig 2.2.2: Uppercase making progress, Week 9 (22/06/25) |
 |
| Fig 2.2.3: Exploration & some (fail) attempts with uppercase, Week 9 (22/06/25) |
 |
| Fig 2.2.4: Comparison with fail attempt (red) with the chosen final (black), Week 9 (22/06/25) |
I struggled a lot when designing the letters V, X, Y, and Z. They all had the same issue, I made it too complicated as I focused too much on small details but I prefer using a simple design as the pattern is already complicated. So I decided to change and choose the more simple font.
 |
| Fig 2.2.4: Uppercase making progress, Week 10 (28/06/25) |
 | |
|
Compared to the uppercase letters, creating the lowercase was smoother since I already had the uppercase as a guide.
FINAL UPPERCASE & LOWERCASE
 | |
|
 |
| Fig 2.2.7: Uppercase & Lowercase Final, (with baseline) Week 10 (28/06/25) |
 | |
|
2.3 NUMERAL NUMBER MAKING
 |
| Fig 2.3.1: Numerals making progress, Week 10 (29/06/25) |
Similar to the lowercase letters, the process was smoother since I already had the uppercase as a guide.
FINAL NUMERALS
 |
| Fig 2.2.2: Numeral Final, Week 10 (29/06/25) |
 |
| Fig 2.2.4: Numeral Final (with baseline), Week 10 (29/06/25) |
 |
| Fig 2.3.5: Numerals Final (Outline with baseline), Week 10 (29/06/25 |
2.4 PUNCTUATION MAKING
 |
| Fig 2.4.1: Comma adjustment, Week 11 (02/07/25) |
Mr. Vinod suggested that I make the tails of the comma cleaner and sharper, and tone down the punctuation to make it less playful.
 |
| Fig 2.4.2: Punctuation making progress, Week 11 (02/07/25) |
To make sure the punctuation size was accurate, I used the Univers typeface as a reference and compared the punctuation with similar letters. For example, I used the letter 'S' as a reference for the question mark, the lowercase 'b' to guide the x-height, stroke weight, and ascenders, and the letter 'm' as a reference for the widest form.
FINAL PUNCTUATION
 |
| Fig 2.4.3: Punctuation Final, Week 11 (03/07/25) |
 |
| Fig 2.4.4: Punctuation Final (with baseline), Week 11 (03/07/25) |
 | |
|
2.5 FONT LAB & DOWNLOAD FONT
 | |
|
 | |
|
Link to download PLAID: DOWNLOAD PLAID REGULAR
2.6 FONT PRESENTATION
After exporting, it's time for presentation.
Since my font is called 'Plaid', it reminds me of the 2000s, retro, Y2K, and nostalgic, so I'm going in that direction.
 |
| Fig 2.6.1: Exploration in the style and color palette, Week 12 (07/07/25) |
Speaking of the 2000s, I think of it as a bubbly and fun era. It reminds me of my childhood and the shows I watched, such as such as Barbie and High School Musical. The fashion aesthetic from that time was full of bright, cheerful colors and playful styles.
 |
| Fig 2.6.2: Some layout sketch, Week 12 (07/07/25) |
 |
| Fig 2.6.3: Attempt #1 progress in Illustrator, Week 12 (08/07/25) |
At first, my attempt wasn’t well planned, and since I’m not very familiar with using bright colors, my color choices didn’t work out very well. I also tried to make the presentation feel more 'complete', but the result ended up looking chaotic and messy.
After a consultation, Mr. Vinod suggested that I simplify the presentation and focus on highlighting the features of my font, since the font itself is already quite complex. Based on both his general and specific feedback, I’ve listed some idea that I want to do for the font presentation.
Presentation Plan:
1. All uppercase, lowercase and punctuation showcase
2. Close up + font description showcase
3. Pattern showcase
4. Number showcase
5. Font size showcase
After planning the font presentation, I start to do some research about the color palette & layout design.
 | |
|
 | |
|
For the font presentation, I'm looking for a layout that highlights the font itself. Since I won’t be doing a very complex layout design, I’m also exploring references that use color creatively to make the presentation more fun and engaging.
 | ||||
|
#1 All uppercase, lowercase and punctuation showcase:
In this presentation, I want to showcase the full font set (except the numbers). I’ve highlighted the word 'PLAID' since it’s the name of my font.
 | |
|
In this presentation, I want to showcase the details of my font (such as the blocks and stripes) and include a description to share the font’s key themes and inspiration
 | |
|
Similar to the previous layout, this design highlights the main features of my font which are blocks and stripes. By combining these two elements, the word 'PLAID' is formed.
At first, I wanted to present it as 'block + stripe = PLAID', but that approach didn’t work well in Attempt #1. So, I explored a new layout, which is the one shown in the figure. I placed the elements side by side to allow the audience to observe the relationship more naturally, with a description included to justify this layout. I experimented with different placements and end up choosing the third (the biggest) layout.
 | |
|
#4 Number showcase:
Just like the title, this layout is meant to showcase the number set of my font. My inspiration comes from quilts (fabrics made by combining different pieces of material). During the design process, things got a bit chaotic. Since my font is already quite complex, adding too many variations made the numbers look messy and overwhelming. In the end, I decided to go with the simplest version, which is shown in the bottom right.
 | |
|
This presentation I want to showcase the size of my font, including both the uppercase and lowercase letters.
FINAL FONT PRESENTATION
 | |
|
 |
| Fig 2.6.13: Font Presentation #2, Week 12 (12/07/25) |
 |
| Fig 2.6.14: Font Presentation #3, Week 12 (12/07/25) |
 |
| Fig 2.6.15: Font Presentation #4, Week 12 (12/07/25) |
 |
| Fig 2.6.16: Font Presentation #5, Week 12 (12/07/25) |
2.7 FONT APPLICATION
For the application, we have divided into two section: Personal Mockup & Honor Stand By Mockup
PERSONAL MOCKUP:
 |
| Fig 2.7.1: Reference for cufflinks & keychain, Week 12 (13/07/25) |
Since my font is based on a fabric pattern, I wanted to continue developing it through fashion-related items. Rather than applying it to traditional fabrics like clothes or pants, I decided to explore fashion accessories instead.
Cufflinks:
As my font gives a retro and classy vibe, I thought why not pair it with an accessory that adds a classy and stylish touch to an outfit? so I went with that.
Keychain:
Recently, it’s become popular to hang keychains on pants or bags as a fun accessory. So I thought it’d be a great idea to design a keychain using my font.
 | |
|
 |
| Fig 2.7.3: Personal Mockup making progress in Illustrator, Week 12 (13/07/25) |
 |
| Fig 2.7.4: Personal Mockup making progress in Photoshop, Week 12 (13/07/25) |
 |
| Fig 2.7.5: Personal Mockup #1 Cufflinks Final, Week 12 (13/07/25) |
For the cufflinks, I used the pattern from my font since it’s the main feature of my font. It creates a checkered plaid look. To keep the retro vibe, I stuck with the same orange and green from my color palette. Even though they’re contrasting colors, they still look classy together.
 |
| Fig 2.7.6: Personal Mockup #2 Key chain Final, Week 12 (13/07/25) |
For the first keychain, I was inspired by cassette tapes, an iconic item that instantly brings up retro and nostalgic vibes. I combined that idea with one of my font designs to match the theme.
The second keychain uses a popular phrase from the 2000s: “XOXO.” I also included a heart symbol made using “<” and “3” (like this: <3), which was a common way to show love back then and it’s still used today.
The last keychain is based on a pattern from my font presentation. I really liked the quilt concept, so I developed it further and turned it into a keychain design.
Some adjustment after consultation:
After consulting with Mr Vinod, he suggest me to do tie or clothing brand label instead of key chain, as it doesn't really align with my fashion clothing concept, so I decided to work on the clothing brand label.
 |
| Fig 2.7.7: Reference for Clothing Brand Label, Week 12 (16/07/25) |
 |
| Fig 2.7.8: Clothing Brand Label making progress in Illustrator, Week 12 (16/07/25) |
I tried various word placements for the smaller sentence. The first version felt too small, while the second one was too long. I liked it better when the sentence was shorter than the logo. After combining these adjustments, the third version was created, and that’s the one I used. As for the “MADE WITH <3<3,” it felt too extra and made the design look complicated, so I decided not to include it in the end.
 |
| Fig 2.7.9: Clothing Brand Label making progress in Photoshop, Week 12 (16/07/25) |
 |
| Fig 2.7.10: Personal Mockup #2 Clothing Brand Label Final, Week 12 (16/07/25) |
First, I created the logo using my PLAID font. I really liked the number quilt presentation, so I expanded on that idea and used my birth month as the logo. Below the label, I added a simpler font to write a quote that reflects the brand’s core message. I want people to feel confident when wearing our clothes, so the quote is like a compliment to my customers.
FINAL APPLICATION
 |
| Fig 2.7.11: Personal Mockup #1 Cufflinks, Week 12 (13/07/25) |
|
| Fig 2.7.12: Personal Mockup #2 Clothing Brand Label , Week 12 (16/07/25) |
HONOR STAND BY MOCKUP:
 |
| Fig 2.7.13: Honor Theme, Week 12 (13/07/25) |
I chose Genesis as my theme, which is about creating something new by combining technology and art to shape the future.
My idea is to explore a futuristic retro aesthetic for this theme. For example, the Y2K trend is making a huge comeback today, something people probably didn’t expect back in the early 2000s. This real life trend inspired me to create a similar direction that blends nostalgia with innovation.
My concept merges my original classic plaid pattern font that is known for its retro and timeless feel with digital, pixel-inspired elements to reflect the future. By using features of plaid, like stripes and blocky patterns, I built characters using modular, pixel-like forms to reflect the digital world. This design aims to represent how the past can influence and shape futuristic art through creativity.
In this mockup, we are required to make four mockup. Including:
1. Clock Design
2. Personalized Signature Design
3. Overall Visual Design
4. Animation
#1 Clock Design
 |
| Fig 2.7.14: Reference for #1 Clock Design, Week 12 (13/07/25) |
Since my theme is plaid + digital, I thought making a digital clock would be a great fit. I’m using the PLAID font for the numbers on the clock.
 |
| Fig 2.7.15: #1 Clock Design making in Illustrator, Week 12 (13/07/25) |
For the first attempt, I felt like the background looked a bit empty and plain, so I added a gradient with darker shades on both sides. Since the pattern on the PLAID font is already pretty complex, I didn’t want to add too many extra elements, it would be too messy. Instead, I played around with colors to make it more fun and interesting.
 |
| Fig 2.7.16:#1 Clock Design Final, Week 12 (13/07/25) |
#2 Personalized Signature Design
 |
| Fig 2.7.17: Reference for #2 Personalized Signature Design, Week 12 (13/07/25) |
My idea is to present a display animation that appears when the phone is charging. It shows the battery filling up like a liquid and slowly filling up the entire phone screen. The color transitions from orange to yellow to green, representing the battery level, orange for low, yellow for medium, and green for full.
 |
| Fig 2.7.18: #2 Personalized Signature Design making in Illustrator, Week 12 (13/07/25) |
I made two versions of the battery flow. One is using the stripes and some complex plaid pattern for the details, and the other is just fully made with the complex plaid pattern. Personally, I think the second attempt is too messy, so I decided to use the first attempt.
 |
| Fig 2.7.19: Using Offset path to turn my plaid font into blocks, Week 12 (13/07/25) |
For the font, I first tried using a blocky style, but I wasn’t really satisfied with it. So I decided to turn my PLAID font into a block font instead. I used the Offset Path tool to transform it into the bold look I wanted.
 | |
|
#3 Overall Visual Design
 |
| Fig 2.7.21: #3 Overall Visual Design Final, Week 12 (13/07/25) |
My overall visual design is an elaboration of my #2 font presentation. Since plaid is the main feature, I want to highlight its details. My overall visual design focuses on showcasing my original PLAID font by displaying various letters in different sizes to highlight its detailed construction. Inspired by a futuristic retro aesthetic, the design combines retro plaid with futuristic pixel digital. Each character is constructed using modular, blocky shapes that resemble digital pixels.
#4 Animation
 |
| Fig 2.7.22: Reference for glitching animation, Week 12 (13/07/25) |
Since my concept is retro + digital, I wanted to create an animation that combines both elements. I chose the glitch effect because old retro TVs often glitched, and in the digital world, glitching is a common visual effect in apps and media, so I decided to use glitch effect for my animation.
 |
| Fig 2.7.23: Editing in After Effect and Premium Pro, Week 12 (13/07/25) |
| Fig 2.7.23: #4 Animation Final, Week 12 (13/07/25) https://youtu.be/0w1Dblia_qI |
FINAL APPLICATION
 |
| Fig 2.7.25: Honor Stand By Mockup #1 Clock Design, Week 12 (13/07/25) |
 |
| Fig 2.7.26: Honor Stand By Mockup #2 Personalized Signature Design, Week 12 (13/07/25) |
|
Fig 2.7.27: Honor Stand By Mockup #3 Overall Visual Design, Week 12 (13/07/25) |
| Fig 2.7.28: Honor #4 Animation, Week 12 (13/07/25) https://youtu.be/0w1Dblia_qI |
Fig 2.7.29: Elaboration write up for the HONOR Design, Week 13 (16/07/25)
*Unfortunately, the standby category was removed by the organizer, so I’m unable to submit this design for the HONOR competition.
3. TASK 3 OUTCOME
COMPILATION
Link to download PLAID: DOWNLOAD PLAID REGULAR
Fig 3.1: Font Information (PDF), Week 11 (06/07/25)
Fig 3.2: Final Font (PDF), Week 11 (06/07/25)
Fig 3.3: Final Font and Font Outline with baseline (PDF), Week 11 (06/07/25)
 |
| Fig 3.4: FontLab screen grab, Week 11 (06/07/25) |
 |
| Fig 3.5: Font Presentation #1, Week 12 (12/07/25) |
 |
| Fig 3.6: Font Presentation #2, Week 12 (12/07/25) |
 |
| Fig 3.7: Font Presentation #3, Week 12 (12/07/25) |
 |
| Fig 3.8: Font Presentation #4, Week 12 (12/07/25) |
 |
| Fig 3.9: Font Presentation #5, Week 12 (12/07/25) |
|
| Fig 3.10: Font Application #1 Cufflinks, Week 12 (13/07/25) |
|
| Fig 3.11: Font Application #2 Clothes Branding Label, Week 13 (16/07/25) |
 |
| Fig 3.12: Honor #1 Clock Display, Week 12 (13/07/25) |
 |
| Fig 3.13: Honor #2 Personalized Design, Week 12 (13/07/25) |
 |
| Fig 3.14: Honor #3 Overall Visual Design, Week 12 (13/07/25) |
| Fig 3.15: Honor #4 Animation, Week 12 (13/07/25) https://youtu.be/0w1Dblia_qI |
Fig 3.16: Elaboration write up for the HONOR Design, Week 13 (16/07/25)
| Fig 3.17: Final Task 3 Compilation, Week 12 (13/07/25) |
4.
FEEDBACK
WEEK 8
General feedback:
The color when you use for the element pattern same with your word mark it might be a distraction
For task 3:
-Search before doing it, some of the font already has a lot of creation (eg: Lego)
-Unicase letterform (Just uppercase no lowercase)
Specific feedback:
-For the portrait, the background is a bit too much going on
WEEK 9:
General Feedback:
For Blog:
1. More exploration and put in the process, all kinds of attempt in the blog
2. Highlight the title to make distinction
3. Portfolio can be used as academic journal, we can judge the work by viewing your portfolio
4. Provide viewers with convenient and clear navigation button is always a bonus
5. Digest instruction is essential for designer
6. Making mood board: 20~30 reference and have different aspect/style
For TASK 3
1. Compare and building the uppercase and the lowercase side by side
2. Be specific, the intention must be specific
3. You can create your own grids, develop using the elements or the shape of your font
Specific Feedback:
The ideation #2 that I like the most is interesting. Yes work on that.
WEEK 10
General Feedback:
1. Punctuation: Do research and find existing ones as reference
2. Compare and building the uppercase and the lowercase side by side
Specific Feedback:
1. Continue to do the lowercase
WEEK 11
Specific Feedback:
1. It's better when the punctuation is not that palyful
WEEK 12
General Feedback:
1. For the font presentation, don't make it to complex. It is mean to be showing the characteristic of your font, just focus on presenting the font.
Specific Feedback:
1. My font are already complicated, so focus on the font pattern itself instead of doing to much design on the presentation
WEEK 13
Specific Feedback:
1. For the presentation you can play more with color to make it more interesting
2. For the application, Mr Vinod suggest me to make a tie or a label instead of a keychain
5.
REFLECTION
Experience:
Not gonna lie, this task was packed. In the first semester, we only had to make around 10 letters and some punctuation, but this time we had to do everything: uppercase, lowercase, numbers, and all the common punctuation. It was a huge task, especially since we only had 5 weeks to finish everything, including the presentation and application. But honestly, it was fun! Creating my own font felt like a big milestone for me. I personally love doing mockups, so that part was really enjoyable. I even tried out some mockup that I hadn’t explored before. The brainstorming stage was wild, I was literally praying for ideas to come faster TT. But doing research and exploring different styles really helped. Through this task, I’ve learned a lot not just about font design, but also about layout and overall design principles.
Observations:
Color is really impactful and important. Since my font is a bit complex, Mr. Vinod suggested that I keep my presentation simple and focus on showcasing the main features of the font. Like I mentioned in the progress section, I used color to fill in the empty and boring parts of the presentation. After applying it, I could really see the difference, everything looked more complete and polished compared to the first draft.
Findings:
Don't let design overshadow your core idea or the main feature that you want to present. It’s honestly one of my biggest struggles. I tend to forget my original intention and focus on the detail and design too much. Yes it happen again haha. But at least now I’m more aware of it. I just needed some guidance, thanks to Mr Vinod and my friends, they give me some feedback that help me when doing the presentation.
There’s always a connection between each letter, number, and punctuation mark. Through this task, we learned more about creating fonts, like how to calculate weight and maintain consistency. After doing some research and reading, I can now clearly see how every element in a font is related and how important that relationship is.
6.
FURTHER
READING
 |
| Fig 6.1: Punctuation Further Reading #1, Week 11 (02/07/25) |
This post gives some tips on basic punctuation.
 |
| Fig 6.2: Punctuation Further Reading #2, Week 11 (02/07/25) |
Source: https://www.societyoffonts.com/2018/01/16/punctuation-part-5tall-thin/
This blog list out author's processes and calculations for creating various punctuation, including brackets and symbols. It's a helpful guide and reference for me.
Notes:
Question Mark: c, C, G, s, and S glyphs may provide some basis for the design of this glyph
Bracket: exceed the height of the capitals very slightly and descend below the baseline to approximately 3/4 of the depth of your lower case descenders.
Comments
Post a Comment