Advanced Typography: Task 3 Type Exploration & Application

9/6/2025 - 13/7/2025 / (Week 8- Week 12)

Aricia Man Yi Xuan / 0375026

Advanced Typography / GCD61004

Bachelor of Design (Hons) in Creative Media

Task 3: Type Exploration & Application

Google Drive Link

TABLE OF CONTENT

3. Task 3: Type Exploration and Application

3.1 Proposal
3.2 Idea Development
3.3 Typeface Process
3.4 Final Typeface
3.5 FontLab Process
3.6 Typeface Presentation
3.7 Type Applications
3.8 Final Task 3 Submission

6. Further Reading

LECTURES

Lectures 1 - 3: Task 1 Exercises

Lectures 4 - 7: Task 2 Key Artwork & Collateral

Week 8 (11/6/2025)

Lectures 8 / Independent Learning Week

Today's lecture conducted online via Zoom meeting. Mr. Vinod gave us feedback on our Task 2 and later on brief us on the final project Task3.

Week 9 (18/6/2025)

Lectures 9

Mr. Vinod gave us advice on our final project proposal and let us decide which options we were going to do.

Week 10 (25/6/2025)

Lectures 10

Mr. Vinod gave us feedback on our uppercase letters and we continue to do our lowercase and punctuation.

Week 11 (2/7/2025)

Lectures 11

Mr. Vinod gave us feedback on our lowercase letters/ unicase and we continue to transform them into FontLab (letterspacing & kerning). We should showcase our process of the typeface in AI and e-portfolio. How to export font to FontForge? (click here). Create a clock design using your font (HONOR competition).

Week 12 (9/7/2025)

Lectures 12

We continued our final project and Mr. Vinod said I can start doing font presentation and font application this week.

Week 13 (16/7/2025)

Lectures 13

This week was the final submission. Mr. Vinod checked on our final project and we had to submit by this week.

TAP ME BACK TO TOP

INSTRUCTION

Fig.2.1.1 Module Information / (Week 8, 11/6/2025)

TAP ME BACK TO TOP

TASK 3
- Type Exploration and Application -

Instruction:

- Create a complete generated font (.ttf) with applications.

Options:

1. Create a new font: A font that solve a 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 specialization.

2. Improve an existing letterform: Explore the use of existing letterform in an area of interest, understand its existing relationship, identify improvements, explore possible solutions or combinations that may add value to the existing letterform/lettering.

3. 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

3.1 Proposal

Type Exploration & Application

In my proposal, I have THREE ideas for it:

Create a Typeface

Complete Typeface from the "ASHEN" game name

Continuation to my Key Artwork

3.2 Idea Development

Chosen Idea #1: Create a Typeface

Fig.3.2.1 Chosen Idea / (Week 9, 18/6/2025)

I choose to create a typeface for my final task eventually. Actually, I initially wanted to choose the second idea (Complete typeface of "ASHEN" game) as I liked its mysterious and primitive aesthetic. However, I realized that the stroke weight of the letterforms various a lot, and it will be time-consuming if I recreate all the uppercase and lowercase letterforms that consistently across the entire alphabet.

The first idea concept allows me to work with a clear grid structure, which also provides consistency and flexibility in creating the forms. This idea explores the fusion of modular design and musical instrument aesthetic.

Design Direction: Each letterform will be constructed within a grid system, originally imagined as cube-based but later expanded into flexible modular grids based on feedback (Week 9). The design will also incorporate inner cut-outs that mimic the acoustic holes found on temple blocks.

Purpose: To explore the fusion of modular structure and sound-based aesthetics, turning abstract ideas like playfulness, rhythm, and texture into a typographic system. I also wanted to experiment with combining music and design, turning sound-inspired forms into visual language.

Intended Use:

Music-related projects (e.g., album covers, game application, games)
Outdoor LED Display (Communicate a mood/personality)

TAP ME BACK TO TOP

3.3 Typeface Process

References

Fig.3.3.1 References of different grid system / (Week 9, 18/6/2025)

I began by researching two main sources of inspiration:

Different types of grid system
Temple Block Instruments (shapes)

Sketches

Fig.3.3.2 Initial Rough Sketches / (Week 9, 19/6/2025)

Before working in Adobe Illustrator, I draw a rough sketches of my ideas of the typeface. I came up with the idea of using a circle structure as the grid with the shape of the inner "sound hole" cuts within. Later on, I moved on to digitize them in Illustrator.

Process in Adobe Illustrator

- Uppercase Letters -

Fig.3.3.3 Grid Structure & Guides / (Week 9, 20/6/2025)

I created a grid structure using squares and circles before drawing the letterforms, following with the guidelines. For uppercase letters, I used a fixed-height grid instead of the traditional type anatomy. Thus, The entire letterforms cap height were fits within the circle.

Tools: Object > Repeat > Grid > Adjust Option > Expand > Release

Measurements:

Cap height: 530.73 pt

X-height overshoot: 530.73 pt

X-height: 500 pt

Baseline: 0 pt

Baseline overshoot: -30.73 pt

Fig.3.3.4 Progression #1 (Uppercase letters) / (Week 9, 20/6/2025)

I began building the typeface silhouette roughly in Illustrator using the grid structure. Then, I used the Shape Builder Tool to draw the basic shapes of each alphabet.

Fig.3.3.5 Progression #2 (Uppercase letters) / (Week 9, 20/6/2025)

Later on, I added the temple blocks "cut-out shapes" element into each alphabet. However, it seems like some of the alphabets were difficult to read, like the letter "P, Q, V and Y". I have to further revised the cut-out shapes to ensure every letter was instantly readable.

Fig.3.3.6 Progression #3 (Uppercase letters) / (Week 9, 20/6/2025)

Fig.3.3.7 Strokes & Guides Review / (Week 9, 20/6/2025)

Fig.3.3.8 Uppercase letters overview Attempt #1 / (Week 9, 20/6/2025)

In week 10 class (25/6/2025), I found out that using fully circular silhouettes for every letter might not clearly readable when typing letters. As I need to develop lowercase letter, I'm afraid that the characters can't read easily as they are all the same circular shape, especially the alphabets like C, O, L. There was not enough visual difference between them.

Fig.3.3.9 Progression #4 (Uppercase letters) / (Week 10, 25/6/2025)

To improve clarity & expand usability:

I adjusted the outer shapes, creating more arched, rectangular silhouettes instead of limiting the typeface to circles. Although I still love the Attempt #1 version, I think it's cute. But I believe the refined version is better overall. They feels more like a recognizable uppercase alphabet.

Fig.3.3.10 Uppercase letters overview Attempt #2 / (Week 10, 25/6/2025)

Fig.3.3.11 Strokes & Guides Review / (Week 10, 25/6/2025)

- Lowercase Letters -

Fig.3.3.12 Progression #5 (Lowercase letters) / (Week 10, 26/6/2025)

For the lowercase, I wasn't sure how to create a lowercase set using the same circular module since it was quite restrictive. Most lowercase letters need ascenders and descenders, which don't sit well in a perfect circle.

Therefore, I reduced the size of the basic circle (x-height remain 500pt) slightly and also added descenders in letters like g, j, p, q, and y. Then, I draw out the basic silhouette for each alphabet.

Fig.3.3.13 Progression #6 (Lowercase letters) / (Week 10, 26/6/2025)

Later on, I added the temple block "sound hole" cut-outs used in uppercase letters to each lowercase letters.

Fig.3.3.14 Progression #7 (Lowercase letters) / (Week 10, 26/6/2025)

After using the Shape Builder Tool to merge the shapes, there's many unnecessary anchor points.

Hence, I use the simplify tool (Object > Path > Simplify) to reduce anchor points.

Fig.3.3.15 Lowercase letters overview / (Week 10, 26/6/2025)

Fig.3.3.16 Strokes & Guides Review / (Week 10, 26/6/2025)

- Numerals & Punctuation -

Fig.3.3.17 Progression #8 (Number) / (Week 10, 26/6/2025)

After completing the uppercase and lowercase alphabet, I began developing the numerals (0-9) and punctuation. I first draw the basic silhouettes for them, using same weight and height.

Fig.3.3.18 Progression #9 (Number) / (Week 10, 26/6/2025)

After that, I applied the temple block "sound hole" cut-outs as well to some of the numbers like 0, 2, 4, 5, 6, 8, 9.

Fig.3.3.19 Reference Punctuation Selection / (Week 10, 26/6/2025)

Next, I moved on to create the punctuation. I chose Arial Rounded MT Bold as my reference.

Fig.3.3.20 Progression #10 (Punctuation) / (Week 10, 26/6/2025)

The punctuation I also began by tracing the size. For the special marks like "@", the "a" I used the lowercase letter I created. For the punctuation "&", I used the "sound hole" cut-outs as well.

Fig.3.3.21 Numerals & Punctuation overview / (Week 10, 26/6/2025)

After receiving feedback (Week 11, 2/7/2025):

Since the width of my punctuations is not bold enough, I have to refine them a bit to make it more consistency. I also made some changes to the number "6" and the lowercase "s" and "z".

Fig.3.3.22 Progression #11 - Refinement / (Week 11, 2/7/2025)

As my friend said that the alphabet "s & z" looks like "i", so I decided to adjust the rounded corner to make it clearer. I also refined the number "6" to a more appealing style compared to the previous one.

Fig.3.3.23 Progression #11 - Punctuation / (Week 11, 2/7/2025)

For the punctuation, I made them became more bold and also adjusted the height of the parentheses.

TAP ME BACK TO TOP

3.4 Final Typeface

Fig.3.4.1 Final Font Design / (Week 11, 2/7/2025)

Fig.3.4.2 Final Font Design - Strokes & Guides / (Week 11, 2/7/2025)

TAP ME BACK TO TOP

3.5 FontLab Process

Fig.3.5.1 Chart for Kerning - Uppercase / (Week 11, 2/7/2025)

Fig.3.5.2 Chart for Kerning - Lowercase / (Week 11, 2/7/2025)

Tutorial Video: Click here

After designing all the letters and punctuation in Adobe Illustrator, I followed the tutorial video by copying the shape and pasting them in FontLab. I used Taylor's Maclab to do my work as it has the full licensed version of FontLab 7 installed.

Fig.3.5.3 Progression #1 / (Week 11, 4/5/2025)

Steps:

1. Convert all letters to "shape" in Adobe Illustrator. (Object > Path > Outline Stroke)

2. Set the "Font Info". (Baseline: 0, Ascender: 563px, Cap-height: 563px, Descender: -187px)

3. Copied all the letters and punctuation from AI to FontLab.

4. Adjusted the anchors to make it more precise.

5. Adjusted the kerning and letterspacing following the chart given. (Fig.3.5.1 & Fig.3.5.2)

Fig.3.5.4 Progression #2 - Uppercase letters / (Week 11, 4/5/2025)

Fig.3.5.5 Progression #3 - Lowercase letters / (Week 11, 4/5/2025)

Fig.3.5.6 Progression #4 - Numbers / (Week 11, 4/5/2025)

Fig.3.5.7 Progression #5 - Punctuation / (Week 11, 4/5/2025)

Fig.3.5.8 Progression #6 - All / (Week 11, 4/5/2025)

Typeface Name

Fig.3.5.9 Bloblock / (Week 11, 4/5/2025)

BLOBLOCK

Description:

The typeface I created named "Bloblock". It's a bold, playful display typeface inspired by the percussion instrument "temple blocks" and the modular structure of grids. Its name combines "blob", hinting at the soft, rounded shapes of the letterforms, and "block", referencing both temple block and the grid-based structure.

Link to download the font: Bloblock.ttf

Fig.3.5.10 Font Information / (Week 11, 4/5/2025)

TAP ME BACK TO TOP

3.6 Typeface Presentation

Submission:

5 Artworks
1024px x 1024px, 300 ppi

Fig.3.6.1 References / (Week 12, 9/7/2025)

Before designing, I find some layout references and outlined the key sections I wanted to include:

Typeface Introduction
Concept & Inspiration
Showcase of Uppercase & Lowercase letters
Demo
Extended paragraph

Fig.3.6.2 Progression in Adobe Illustration / (Week 12, 11/7/2025)

FONT PRESENTATION

— BLOBLOCK —

Fig.3.6.3 Font Presentation #1 / (Week 12, 11/7/2025)

Fig.3.6.4 Font Presentation #2 / (Week 12, 11/7/2025)

Fig.3.6.5 Font Presentation #3 / (Week 12, 11/7/2025)

Fig.3.6.6 Font Presentation #4 / (Week 12, 11/7/2025)

Fig.3.6.7 Font Presentation #5 / (Week 12, 11/7/2025)

TAP ME BACK TO TOP

3.7 Type Applications

Submission:

5 Artworks

NOT exceed 1024px in width/height, 300 ppi

PROCESS

Fig.3.7.1 Source of Mockup Images / (Week 12, 12/7/2025)

I chose these FIVE mockup applications to showcase my font design — “Bloblock":

HONOR "Standby" Competition
Subway Display Screen
Vending Cart Signage
Arcade Gaming Screen
Vinyl Record Packaging
Game Flashcards

In my initial proposal, I was interested in experimenting applications that reflect the core intention of turning sound and feeling into design. For example, the arcade gaming screen & vinyl record packaging closely align with music-related and rhythm-based themes I originally envisioned. The subway display screen & vending cart signage were more public-facing, reflect the idea of mood communication. Lastly, the game flashcards were more into a playful, textured learning, especially for children.

1. Standby (HONOR Competition)

Application Use: This standby clock was designed for the HONOR competition.
Pattern Style: The interface features a soft 3D effect with inflated, bubbly, bold numeric display for time, a subtle analog clock graphic, and a battery indicator and weekday info.

Fig.3.7.2 Progression #1 / (Week 12, 15/7/2025)

Steps:

- Make 3D inflate effect of the time numbers in Adobe Illustrator.

- Imported them into Photoshop > mask object > put it inside the screen.

- Add solid colour to the background.

- Choose a background image.

Fig.3.7.3 Standby Themes / (Week 12, 15/7/2025)

Fig.3.7.4 Submitted to HONOR Competition / (Week 13, 16/7/2025)

HONOR Competition Website: Link

2. Subway Display Screen

Application Use: Public promotional poster/ communication mood in a subway station.
Pattern Style: Repetition and movement of the words that communicate moods.

Fig.3.7.5 Progression #1 - Subway Display Screen / (Week 12, 12/7/2025)

Steps:

- Used the remove tool to remove the words in the original image.

- Add Solid colour (color mode) to the layer.

- Add Text into the select mask

- Adjust the colour and letter spacing.

Fig.3.7.6 Attempt #1 - Subway Display Screen / (Week 12, 12/7/2025)

3. Vending Cart Signage

Application Use: Signboard for a pop-up or retail, F&B stalls, street-style branding.
Pattern Style: I created an emoji face made by turning the letter "o" into eyes and using the cut-out hole of the temple block as a mouth.

Fig.3.7.7 Progression #2 - Vending Cart Signage / (Week 12, 12/7/2025)

Steps:

- Used the remove tool to remove the signage in the original image.

- Add Solid colour (color mode) to change the colour.

- Made 3D effect of the letters and paste into Photoshop.

- Paste the pattern I created from AI.

- Adjust the colour and curves.

Fig.3.7.8 Attempt #2 - Vending Cart Signage / (Week 12, 12/7/2025)

4. Arcade Gaming Screen

Application Use: UI display in a retro arcade screen.
Pattern Style: The background filled with punctuation marks like a pattern.

Fig.3.7.9 Progression #3 - Arcade Gaming Screen / (Week 12, 12/7/2025)

Steps:

- Add solid colour and change the screen colour.

- Made 3D effect of the letters and paste into Photoshop.

- Add punctuation as the background pattern.

Fig.3.7.10 Attempt #3 - Arcade Gaming Screen / (Week 12, 12/7/2025)

5. Vinyl Record Packaging

Application Use: Album cover, record label, sleeve designs.
Pattern Style: Using temple block visual elements and letters combined together.

Fig.3.7.11 Progression #4 - Vinyl Record Packaging / (Week 13, 12/7/2025)

Steps:

- Used the remove tool to remove the letters in the original image.

- Paste the pattern I created from AI.

- Adjust the position of the elements.

Fig.3.7.12 Attempt #4 - Vinyl Record Packaging / (Week 13, 12/7/2025)

6. Game Flashcards

Application Use: Flashcards for education and playful interaction.
Pattern Style: The font itself used consistently across cards.

Fig.3.7.13 Progression #5 - Game Flashcards / (Week 13, 12/7/2025)

Steps:

- Used the remove tool to remove the letters in the original image.

- Insert text to each flashcard.

Fig.3.7.14 Attempt #5 - Game Flashcards / (Week 13, 12/7/2025)

TAP ME BACK TO TOP

3.8 Final Task 3 Submission

1. Download Font Link: Bloblock.ttf

Fig.3.8.1 Font Info / (Week 13, 14/7/2025)

2. PDF of typeface

Fig.3.8.2 Compilation of uppercase, lowercase, punctuation - PDF / (Week 13, 14/7/2025)

3. FontLab Screen Grab

Fig.3.8.3 FontLab Screen Grab / (Week 13, 14/7/2025)

4. FIVE font presentations

Fig.3.8.4 Font Presentation #1 / (Week 13, 14/7/2025)

Fig.3.8.5 Font Presentation #2 / (Week 13, 14/7/2025)

Fig.3.8.6 Font Presentation #3 / (Week 13, 14/7/2025)

Fig.3.8.7 Font Presentation #4 / (Week 13, 14/7/2025)

Fig.3.8.8 Font Presentation #5 / (Week 13, 14/7/2025)

5. FIVE font applications

Fig.3.8.9 Font Application #1 / (Week 13, 14/7/2025)

1. Standby (HONOR Competition)

Application Use: This standby clock was designed for the HONOR competition.
Pattern Style: The interface features a soft 3D effect with inflated, bubbly, bold numeric display for time, a subtle analog clock graphic, and a battery indicator and weekday info.

Fig.3.8.10 Font Application #2 / (Week 13, 14/7/2025)

2. Subway Display Screen

Application Use: Public promotional poster/ communication mood in a subway station.
Pattern Style: Repetition and movement of the words that communicate moods.

Fig.3.8.11 Font Application #3 / (Week 13, 14/7/2025)

3. Vending Cart Signage

Application Use: Signboard for a pop-up or retail, F&B stalls, street-style branding.
Pattern Style: I created an emoji face made by turning the letter "o" into eyes and using the cut-out hole of the temple block as a mouth.

Fig.3.8.12 Font Application #4 / (Week 13, 14/7/2025)

4. Arcade Gaming Screen

Application Use: UI display in a retro arcade screen.
Pattern Style: The background filled with punctuation marks like a pattern.

Fig.3.8.13 Font Application #5 / (Week 13, 14/7/2025)

5. Vinyl Record Packaging

Application Use: Album cover, record label, sleeve designs.
Pattern Style: Using temple block visual elements and letters combined together.

Fig.3.8.14 Font Application #6 / (Week 13, 14/7/2025)

6. Game Flashcards

Application Use: Flashcards for education and playful interaction.
Pattern Style: The font itself used consistently across cards.

6. Font presentation & application PDF embedded

Fig.3.8.15 Font Presentations & Applications - PDF / (Week 13, 14/7/2025)

TAP ME BACK TO TOP

REFLECTION

Experiences:

This project was such a long journey to go on, but it ran more smoothly than I expected overall. The hardest part I think, was the beginning of this project, as I was struggling with which typeface I wanted to create. But finally I decided to create this bubbly, chunky "BLOBLOCK", I was so satisfied with my font design.

In the process in Adobe Illustrator, I explored soft, rounded shapes and experimented with cutouts inspired by the Temple Block "sound hole", which later became a defining visual element in both the letterforms and the font application. This early stage was the most creative. I enjoyed playing with shapes, adjusting curves, and seeing how I could create the letters to be more interesting and appealing.

Once the base characters were ready, I moved to FontLab to start creating .ttf. Unfortunately, something got tough. My FontLab on my laptop crashed multiple times, and I lost progress more than once, and it said I couldn't export the font after I finished importing all the letters. I almost died lol. Eventually, I had to go back to campus and work in MacLab. It was frustrating but also taught me to always check the tools to see if they can work or not before starting my work.

After completing the .ttf, I moved on to the last two parts: font presentation and application. I designed five different applications for my typeface, using Photoshop to edit them. Overall, these stages were satisfying and, overall, quite smooth.

Observation:

Throughout this project, I observed during the building process was how creating a consistent grid and base structure made everything easier. When I first started drawing letters freely, some felt too big, some too slim, everything looked a bit off. Once I created a proper grid and followed it as a guideline, the letterforms feel more balanced and cohesive, helping me maintain consistent x-height, stroke width, and spacing. Other than that, I also realized how important it was to match the stroke consistency between letters, number, and punctuation. Also, kerning and letter spacing were crucial, it makes a font feel smooth and readable.

Findings:

Overall, I get a sense of accomplishment after completing my project, like I have borne a "child". Applying my font to different visuals helped me truly understand its strengths and weaknesses. "Bloblock" is a kind of font that speaks in a bubbly tone, not too serious, but still clear. It works best where emotion, creativity, or youthful energy is involved. Even though I'm proud of how the typeface turned out, I've also noticed several areas where it could be improved or where limitations became more obvious through testing and application. For example, the font's style makes it unsuitable for long paragraphs or small body text. It might feel visually overwhelming or tiring to read. This limits its usability to display purposes only.

TAP ME BACK TO TOP

FEEDBACK

Week 9 (18/6/2025):

General Feedback:

Before you create a font, the height of the artboard size should be 1000px. You have to identify the problem and write the specific solution. If you want to create a typeface, just create it and make it different, you don't have to change the original typeface into a "weird" typeface.

Specific Feedback:

You don't have to stick to cubes, just create a grid; choose something create a grid then make an element. Create a square block grid, you're gonna come out with a typeface.

Week 10 (25/6/2025):

Specific Feedback: Ok, You can continue.

Week 11 (2/7/2025):

General Feedback: Don't simply draw punctuations, it was important that the height of the parentheses "( )" needs to be lower but not hit the descender if your fonts is bold; you need to consider. Adjust the ascender, descender, and so on before you start importing, turn on AI when importing to FontLab, you need to convert the letter's stroke to shape. (object > path > outline stroke > shape). Your font has to be presented well, don't use weird color palette.

Specific Feedback: Some of the punctuation's width is not enough, you need to adjust it. Then you can moved on to FontLab, the kerning follow the chart ya.

Week 12 (9/7/2025):

General Feedback: If you use FontForge and you can't do the kerning, you may go to MacLab and use Fontlab.

Specific Feedback: Ok, you can continue to do your font presentation.

Week 13 (16/7/2025):

General Feedback: In the final submission, briefly write some introduction to each font presentation and application to let the viewer know without scrolling through the whole page.

Specific Feedback: Good job. Font presentations and font applications are good. You need to display it eye candid, make it more interesting, but overall is fine.

TAP ME BACK TO TOP

Aricia Man Yi Xuan (0375026)

Search This Blog