Advanced Typography: Task 3 Type Exploration & Application

on

16.06.25 -  15.07.25 (Week 9 -13)

Celine Christabelle Patricia / 0374872 

Advanced Typography / Bachelors of Design (Hons) in Creative Media / The Design School

Task 3 / Type Exploration & Application
Task

Task 3 - Type Exploration and Application

With the knowledge and experience gained in the exercises and tasks, with the accumulated knowledge from the lectures and your own reading (library books and online sources), with the experience gained in the different software covered in the programme this far, synthesise and apply the learning in the tasks to be mentioned. Allow the knowledge gained to guide and inform your decisions for the effective execution of your final task.

Proposal

Fig 1.1 - Proposal Idea for Task 3 Exploration

Progress on Text Forming


Fig 2.1 - Uppercase Letter Timelapse Sketch


When making the uppercase, based on my previous task, I have ITC Baskerville as the reference. To let my idea flow better, I used procreate to sketch each of the letter because it is more convenient. Referring to my previous task, I added the mirror details. In this task, however, I decided to give the mirror details more refinement and make it similar more towards shells, so it suits better for the font application later on, making posters. 

Fig 2.2 - Lowercase Letters Progress (1)


Fig 2.3 - Lowercase Letters Progress (2)


Mr Vinod suggested to make it simple and not decorative for the lowercases, so I decided to move on to Adobe Illustrator to proceed the process. During this phase, I used the brush tool and shape tool to construct the letters. For some complicated letters, I reused the letters previous formed to construct them. 


Fig 2.4 - Numbers and Punctuation Progress (1)


Fig 2.5 - Numbers and Punctuation Progress (2)


I continue on making the numbers and punctuations, not making it decorative as well. I use shaped and previous letters when forming these numbers and punctuations to make it consistent. 

 

Progress on Text bearing and kerning


Fig 3.1 - FontForge uploading progress


I started exporting my fonts in svg to FontForge, naming it Caroline, Coral + Celine (my name). I resize each of the letter and punctuations. However, I find it difficult when adjusting the bearing and kerning in this software, so I moved on to FontLab8. 


Fig 3.2 - Fontlab 8 bearing and kerning progress (1)

Fig 3.3 - FontLab 8 bearing and kerning progress (2)


For problematic letters, I added kerning, for example capital T and F because the have a large cap, I kerned for the uppercase and lowercase letters. 


Progress on Font Presentation


Fig 4.1 Font presentation progress (1)


For font presentation, I want to showcase the typeface in different ways. In order to do that, I started with black and white. For one of the presentation, I used the dilatational system as done previously in Task 1 exercises. 


Fig 4.2 - Font presentation progress (2)


It took me several trial and error when choosing the colors for font presentation. Both colors were inspired by color palette from movies and series, The Amazing world of Gumball and The Little Mermaid. 

Fig 4.3 - Font presentation progress (3)




Fig 4.4 - Font Presentation 1 (Week 13, 15/07/25)


Fig 4.4 - Font Presentation 2 (Week 13, 15/07/25)


Fig 4.5 - Font Presentation 3 (Week 13, 15/07/25)


Fig 4.6 - Font Presentation 4 (Week 13, 15/07/25)


Fig 4.7 - Font Presentation 5 (Week 13, 15/07/25)


Progress on Font Application


For the Font Application, since my original idea is to apply it to movie posters, so I decided to use Adobe Photoshop to proceed on this. 


Fig 5.1 - Font Application Progress - Movie Poster(1)


I used two pictures, the sea background and a mermaid photoshoot that I took from Pinterest. I adjusted the lighting as well as the Title. I used Futura for the description. 


Fig 5.2 - Font Application Progress - Movie Poster (2)


To make the title more visual centered, I added several star overlays to make it more shiny. 


Fig 5.3 - Font Application Progress - Book Cover (1)


I illustrated the sea shore with the brush and smudge tool, as well as bucket tool. Added the title of the book with my font as well as the information. 


Fig 5.4 - Font Application Progress - Book Cover (2)


I used meat overlay for the sea overlay and then fixed the lighting of the illustration so there is more contrast.


Fig 5.5 - Font Application Progress - Book Cover (3)


For the sides of the books, I used the same illustration. 


Fig 5.6 - Font Application Progress - Book Cover (4)


I used Canva and searched for book mockups, then exported the image from Photoshop to png and insert it in the mockups. 


Fig 5.7 - Font Application Progress - Overall visual design (1)


I decided to go on a magical themed for the overall visual design. I used Photoshop for this progress, then arrange is of the numbers and elements. 


Fig 5.8 -Font Application Progress - Overall visual design (2)

After another brainstorming, I felt the previous design was a bit cramped, so I decided to rearrange the numbers and made another initial idea with sketches before executing in Photoshop.


Fig 5.9 - Font Application Progress - Overall visual design (3) 


I execute the sketches while doing some other adjustments for the background,  adding other details to enhance the overall visual design 


Fig 5.10 - Font Application Progress - Overall visual design (4)

After more of several adjustments, I came up with this idea as the final visual design look. 


Fig 5.11 - Font Application Progress - Clock design 

I used the template given from the Honor Website, inserted the clock design I have done previously when making the overall visual design 


Fig 5.12 - Font Application Progress - Personalized Design (1)

For the personalized design, I made the initial sketch on how I will put these numbers and letters. 


Fig 5.13 - Font Application Progress - Personalized Design (2)

I changed the text because I had an idea to showcase the uppercase Q and correlate it with number 4. Then I varied the size and opacity of the numbers.


Fig 5.14 - Font Application Progress - Animation (1)

I used after effects to animate the clock design, by exporting my composition I made previously in Photoshop, then transform the numbers using the transform tool and keyframes. 



Fig 5.15- Font Application 1 (Week 13, 15/07/25)


Fig 5.16 - Font Application 2 (Week 13, 15/07/25)


Fig 5.17 - Font Application 3 - HONOR (Week 13, 15/07/25)


Fig 5.18 - Font Application 4 - HONOR (Week 13, 15/07/25)


Fig 5.19 - Font Application 5 - HONOR (Week 13, 15/07/25)


Fig 5.20 - Font Application 6 - HONOR GIF (Week 13, 15/07/25)


Finalized Outcome


This Caroline Font is created from a refinement of my previous task, creating this for decorative purposes for Movie posters or merch related products. 


DOWNLOAD FONT HERE!


Fig 6.1 - Finalized Letterforms (Week 13, 15/07/25)

Fig 6.2 -Letterforms Outline and Without Outline (Week 13, 15/07/25)


Fig 6.3 - Font Presentation 1 (Week 13, 15/07/25)

Fig 6.4 -Font Presentation 2 (Week 13, 15/07/25)


Fig 6.5 - Font Presentation 3 (Week 13, 15/07/25)


Fig 6.6 -Font Presentation 4 (Week 13, 15/07/25)

Fig 6.7 -Font Presentation 5 (Week 13, 15/07/25)



Fig 6.8 -Font Application 1 (Week 13, 15/07/25)

Fig 6.9 - Font Application 2 (Week 13, 15/07/25)


Fig 6.10 -Font Application 3 - HONOR (Week 13, 15/07/25)

Fig 6.11 - Font Application 4 - HONOR (Week 13, 15/07/25)

Fig 6.12 - Font Application 5 - HONOR (Week 13, 15/07/25)

Fig 6.13  -Font Application 6 - HONOR GIF (Week 13, 15/07/25)

Fig 6.14  -Font Application and Presentation(Week 13, 15/07/25)

Font tester

back to top

Feedback

Week 9

General feedback: 1000 pt, X height is generally 500pts, but it varies according to the type of font we design, create your own grid. Font Application and Font presentation, identify the problem, application should be according to the problem, in other promotional items related to the problem. 
Specific feedback: This idea is acceptable, but drop the bubble edges the mirror edges detail can be added, adding more refinement.

Week 10

General feedback: Have a specific purpose when making the typeface, not too broad, not like "sci fi" "poster"
Specific feedback: Careful with the L counterspace, for the lowercase letters avoid adding decorative elements. 

Week 11

General feedback: When creating parentheses, it must start from ascender to almost descender to consider lower case, not a rule but consideration
Specific feedback: Start making punctuations and make unicase if there is no enough time. 

Week 12

General feedback: Finish the font presentation today, and proceed on font application
Specific feedback: Do kerning on problematic letters, for the Letter T since the Cap is long, do kerning for each letters 

Week 13

Specific feedback: All can be submitted already, but one of the font presentation is too empty, add some more elements

Reflection

Experience
Working on this assignment was definitely a challenge. Even though I am not very new towards this task since I once done this previously in Semester 1, but there are more things to cover which makes it challenging. Even so, the process I went through gradually helped me understand the technical side of typography. My experience using FontForge is one of my biggest trauma. I experienced a few issues with problematic letterforms that required more detailed adjustments, and I had to re-adjust every letters and punctuations which took a lot of time. Although it was time-consuming, I saw it as a part of the learning curve when working with specialized design tools, though I prefer Fontlab more.

Observation
When making the letterforms, it was indeed challenging to make something simple yet interesting and legible. It took me a lot of time to make a new design idea that is unique, not copying another existing design. Especially when designing the lowercase letter, it took me the whole day to fix the issue and think of ideas to make it simple yet unique. One of the most demanding parts of the task was refining the kerning. I had to adjust the kerning to every problematic letters. It was a much more technical process than I initially expected, and I came to appreciate how even minor spacing issues could affect the overall appearance of the font. Through this process, I also became more aware of the balance between creativity and functionality. I learn that designing individual letterforms must be legible.

Findings
This project helped me realize how much precision and attention to detail goes into type design. Typography isn’t just about making visually interesting letters but also about creating a consistent and effective communication tool. I developed a greater respect for type designers and the intricate process behind building a font from scratch. Even though the assignment was tough at times, I gained valuable insight into layout consistency, spatial awareness, and technical execution. While typography may not be my strongest area, this experience broadened my design understanding and sharpened my problem-solving skills in a way that I can carry forward into other creative work.

Further Reading

UniversiTTy: Lesson 8. Designing Basic Latin Characters. Uppercase characters
https://typetype.org/blog/universitty-lesson-8-designing-basic-latin-characters-uppercase-characters/ 

In order to make the fonts, I used this website as the base so I can create an evenly sized uppercase letters. Through out the reading, I realise that letter are not made accordingly with the alphabetic order, but there are measurements for every of the letters. For instance, the letter O must have the same width and height as the letter C G and Q. Letters are made starting from the letter H O A, continued with other letters that have the same width as three of these letters. 

This reading have made it easy for me to build my letters accordingly. Understanding the logic behind letter groupings and measurements gave me a clearer structure to follow, especially when I was struggling with consistency. This website makes it easier for me to do assignment, even though the technical aspects were still incredibly challenging.

back to top

Comments

Post a Comment