Advanced Typography | Task 3 : Type Exploration and Application

June 09, 2025

Advanced Typography | Task 3 : Type Exploration and Application

17.06.2025 - 22.07.2025

FEILYCIA JOY KURNIAWAN / 0373400

Advanced Typography / Bachelor of Design (Honors) in Creative Media

Advanced Typography: Task 3 Type Exploration and Application

TABLE OF CONTENTS

1. Lectures
2. Instruction
3. Task 3: Type Exploration and Application

Font Design

Fontforge

Font Presentation & Application

Honor Competition

4. Final Outcome

5. Feedbacks

6. Reflections
7. Further Reading

LECTURES

Click here to Refer to 1-3 lectures.

WEEK 4 - Designing Type

Xavier Dupre (2007) suggested 2 reasons for designing a typeface:

It caries a social responsibility
It is a form of artistic expression

Considerations / Limitations:

Needs to be recognized even in poor light conditions
Needs to be recognized even when the reader was moving quickly past the sign

General Process of Type Design:

Research - understand the type history, anatomy, conventions, and terminologies. We need to understand the different applications it will be used.
Sketching - can be done traditionally or digitally, and both methods have its pros and cons.
Digitization - can be done in Fontlab, Glyphs, and Adobe Illustrator. And the readability of the typeface is dependent in this stage.
Testing - Prototyping is a part of the testing process and leads to important feedback. Other than a display typeface, it needs to be readable and legible.
Deploy - even after deploying, there are always teething problems that did not show during the testing phase.

Typeface Construction:

Roman capitals - the grid consist of a square and inside it is a circle and withing the square (middle) there is a rectangle.

Fig. 1.1 Roman Capital Constructions (week 4)

Constructions and considerations :

the extrusion of curved (and protruding) past the baseline and capline.
distances between letters - the white space between the letter should appear the same, this is called "fitting" the type.

WEEK 5 - Perception & Organization

Perception: the way in which something is regarded, understood, or interpreted. In typography, it deals with the visual navigation and interpretation of the reader via contrast, form, and organization of the content.

So how can we make contrast?

Fig. 1.2. Methods to make contrast (week 4)

Form: refers to the overall look and feel of the elements that make up the typographic component. A part of a role in visual impact and first impressions.

Typography - Greek: Typo (form), Graphics (writing)
2 functions in typography : to represent a concept & to do so in a visual form.

Organization / Gestalt

Gestalt: a German word meaning the way a thing has to be "placed"
The Gestalt Theory - emphasizes that the whole of anything is greater than its parts.

Therefore, in design the components/elements that make up the design is only as good as its overall visual form.

Fig. 1.3. The Gestalt Theory (week 4)
https://www.toptal.com/designers/ui/gestalt-principles-of-design

- human brains is wired to see pattern, logic, structure

- "gestalt" = shape / form (german)

- rules that describe how the human eye perceives visual elements

- aim to show how complex scenes can be reduced to more simple shapes, and how the eyes perceive shapes as a single, united form

principle of similarity - craft a link between elements of a similar nature
principle of continuation - follow paths, line & curves of a design, (prefers to see a continuous flow)
principle of closure - complete shapes by filling in missing visual information
principle of proximity - ensuring related design elements are placed together
principle of figure/ground - objects perceived in foreground or background
law of symmetry & order - symmetrical elements perceived as a unified group
Extra : Law of Uniform Connectedness, Law of Pragnanz, Law of Common Fate

INSTRUCTION

>Task 3 | Type Exploration and Application

Proposal

Fig. 3.1.Proposal deck, Week 9

After consultation, Mr. Vinod approves to my first (morse code) and second idea (matcha business for my sister). I decided to proceed with the second proposal with looking for some inspiration.

Ideation

Fig. 3.2. Inspo board made by my sister, Week 9

After getting the keywords and mood board for my sister, i continue to sketch some of the ideas. My sister gave full control of what the design's gonna look like.

Fig. 3.3. Initial sketches, Week 9

I was debating whether making it bubbly or cube like, but I saw in pinterest that there's a lot of bubbly fonts, so I want to try make something different.

Fig. 3.4. Grids, Week 10

To make sure the construction of the letters are consistent, I make grids and mostly use the shapebuilder tool.

Fig. 3.5. Details, Week 10

I made sure that the letters doesn't have any sharp edges by using the direct selection tool to adjust the roundness to be the same as the grid's roundness.

Fig. 3.6. Uppercase letter trials, Week 10

Here's some of the letters that I fixed a couple of times before consultation.

Fig. 3.7. Attempt #1 for uppercase letters, Week 10

This is my first attempt of all of my uppercase letters. For the first consultation, Mr. Vinod asked me to change my "K" cause the thickness of the strokes looks out of place which then I change (Fig. 3.6.). I also didn't like my "V" as the strokes thickness didn't matched with the rest with the letters, so I also change it (Fig. 3.6.).

Other than that, Mr. Vinod told me that I can proceed with my lowercase letters, numbers, and punctuation marks. I first watched Mr. Vinod's tutorial from last semester's Typography class to figure out the x-height, cap height, acs, and desc.

Fig. 3.8. Guides for lowercases, Week 10-11

Fig. 3.9. Upper&lowercases, Week 10-11

Fig. 3.10. Numerals, Week 10-11

I marked my letter anatomy based on an existing font to make it more accurate. I did the same thing for the numerals cause I realized the sizes is not the same as the asc or the cap height, so make I made another guideline for the numerals.

Fig. 3.11. Attempt #1 lowercase and numerals, Week 11

During week 11 class, I asked Mr. Vinod to take a look at my overall uppercase, lowercase, and numerals. Mr. Vinod told me the numerals doesn't look uniformed with the rest of the letters

Fig. 3.12. Numeral changes after consultation, Week 11

Fig, 3.13. Punctuation measurements, Week 11

Fig. 3.14. Final punctuations, Week 11

Fig. 3.15. Overall attempt 1, Week 12

FONTFORGE

Fig. 3.16. Importing to Fontforge, Week 12

I had trouble importing the lowercase letters since they ended up being the same size as the uppercase letters. I find it hard to do it with the transform tool in fontforge.

I improvised by exporting the lowercase letters together with the uppercase letters. And then later delete the uppercase letters on fontforge. I did the same process for the punctuations.

Fig. 3.17. importing lowercases, Week 12

Fig. 3.18. Revised lowercase, Week 12

When I tried typing in font forge, I realized the b,d,h,o,k and y looks weird so I decided to go back and re do them. (fig. 3.15)

Fig. 3.19. Before and after for the sizes, Week 12

Next I do the kerning and sidebearings for all of the characters. I used the kerning guide Mr. Vinod provided on teams as my measurements. I purposefully make it a bit tight so that it looks compact.

Fig. 3.20. Kerning process, Week 12

Fig. 3.21. Uppercase & Lowecase kerning, Week 12

Fig. 3.22. Numerals & punctuations kerning, Week 12

FONT PRESENTATION & APPLICATION

I named the font after my sister's business name "Kura"

Fig. 3.23. Exported font, Week 12-13

Fig. 3.24. Chosen color palette, Week 12-13

Since the purpose of this font is for a matcha brand, I chose this color palette.

Fig. 3.25 Presentation Board, Week 12-13

I begin with making the presentations. I want to put the focus on the letters without overwhelming the viewers.

Presentation #1 - using a matcha bowl to represent the brand

Presentation #2 - Use clipping mask to achieve the look, my goal is to make it simple

Presentation #3 - As a print (I ended up not using this cause I feel like its too boring)

Presentation #4 - I want a board where I want to show all of the uppercase letters

Presentation #5 - I want to show the grid and the letters produced

Presentation #6 - I like how this looks but I ended up changing the words cause I feel I didn't represent all of the letters pretty well, and I also felt I used "Kura" too much.

Presentation #7 - On week 13, I realized I didn't present my lowercases enough, so i decided to ditch #6 and use #7 instead.

Fig. 3.26. Design for applications, Week 12-13

For applications I want to do matcha related products. I got the mockups from mockupbee.

Fig. 3.27. Font applications, Week 12-13

HONOR COMPETITION

Fig. 3.28. Honor Competition Submission, Week 13-14

Fig. 3.29. Honor Themes, Week 13-14

After reviewing all of the themes, I settled for the "Celebration: A Totem of Renewing Festive Culture" specifically I will design a Lunar New Year themed clock.

Fig. 3.30. Honor ideation, Week 13-14

Fig. 3.31. Composition, Week 13-14

I played around with the composition of the numbers to figure out which one looks the best and later settled with one of the composition, and then I proceed to choose the color palette and elements for my design.

Fig. 3.32. Elements design, Week 13-14

While making the elements, I go back and forth putting the designs on my numbers to see the overall layout and composition. After much much much thought process and trial and errors, I came up with this as my overall design.

Fig. 3.33. Overall Design, Week 13-14

I decided to make 2 versions of the designs: 1) light mode, 2) dark mode.

Fig. 3.34. 4 designs, Week 13-14

After finishing all of my design, I quicky made the clock animation on Adobe After Effects. However after almost finishing it, I realized the document size is not correct. I did all of the designs (incl cards, clock) in 6000x3000px where I should've been 1920x1080px.

Fig. 3.35. Animation & tweaking process, Week 13-14

So I re-do my AI file > re-animate my AE animation > move it into Photoshop for the template. I did process a couple times as I need to re-adjust everything (it was torture).

Fig. 3.36. Trial and error files, Week 13-14

After many many MANY and many trial and errors, I finally got the files I needed and I transfer them to the provided template 🤲🏻.

Fig. 3.37. Final Honor Designs, Week 13-14

FINAL OUTCOME

Click here to download Kura Font

Fig, 4.1. Kura Font (PDF), Week 13

Fig. 4.2. Kura Font Display (PDF), Week 13

FONT PRESENTATION

Fig. 4.3. Font Presentation #1, Week 13

Fig. 4.4. Font Presentation #2, Week 13

Fig. 4.5. Font Presentation #3, Week 13

Fig. 4.6. Font Presentation #4, Week 13

Fig. 4.7. Font Presentation, Week 13

FONT APPLICATION

Fig. 4.8. Font Application #1, Week 13

Fig. 4.9. Font Application #2, Week 13

Fig. 4.10. Font Application #3, Week 13

Fig. 4.11. Font Application #4, Week 13

Fig. 4.10. Font presentation and application (PDF), Week 13

HONOR SUBMISSION

Fig. 4.11. Honor Submission PDF, Week 14

Fig. 4.12. Honor Animation, MP4, Week 14

Honor Design Elaboration :

https://www.canva.com/design/DAGty2xNRAw/a3uYgi1SlgGoMRIzHhOtTw/edit?utm_content=DAGty2xNRAw&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Google Drive link:

https://drive.google.com/drive/folders/1S5Z0KuGS_EJkcRa8bdrwCBMKqTS7b5om

Fig. 4.13 Honor Submission

FEEDBACK

WEEK 9

General Feedback - Proposal and brief on task 3

Specific Feedback - He let me decide between idea 1/2

WEEK 10

General Feedback - Reviewed our progress

Specific Feedback - finished and showed my uppercase letters, and Mr. Vinod let me to proceed with punctuations, numerals and lowercase

WEEK 11

General Feedback - Proceed to fontlab/fontforge if you're finishes with the characters

Specific Feedback - I asked Mr. Vinod to take a look at my uppercase, lowercase, numerals and punctuations. He asked some minor changes on the numerals

WEEK 12

General Feedback - By this time, we should've finishes our 5 presentations. Brief for the HONOR submission

Specific Feedback - Kerning and sidebearings are good, proceed with the presentations and application.

WEEK 13

General Feedback - Finishing for everything

Specific Feedback - Presentations and applications are good, proceed with the HONOR submission

REFLECTIONS

Experience - By far this is the most fun I had in a project yet one of the most stressful one. Making a font for my sister is really fun since I get to work on a "real-life" project that I can actually use. Making the font presentation was so much fun but the font application I found it stressful. The additional Honor Submission are also VERY very stressful. The first part of designing the overall visual and clock design was very very fun, but when it gets to the animation part, it all went downhill :'D. And I found out after the submission that the standby category is last year's category which made our submission invalid so I was very upset cause I did my best for this submission.

Observations - During my exploration for inspo, I found how important a font's character to the branding. Some iconic brands, even when we cannot see the whole logo, we can still recognize the brand trough color and font.

Findings - To design the typeface, I did a lot of exploring of existing matcha places and how they did their logo. And based on my observations during this task, I found a lot of interesting design styles that may be useful for me the future.