ADVANCED TYPOGRAPHY | TASK 3 TYPE EXPLORATION & APPLICATION

Cloverworks. (2024). Screenshot of Black Butler S4 EP 9. Retrieved April 22, 2025. 


21.04.2025 - 02.05.2025 /Week 1 - Week 6
Advanced Typography
Task 1: Exercises
Loh Kai Xuan (0365780)



TABLE OF CONTENTS

✦ Lectures
✦ Instructions
✦ Task 3
      Task 3 Final Outcome 
✦ Feedback
✦ Reflection
✦ Further Reading




1. LECTURES

Lec 01-04: Click Here

Lec 05: Click Here



2. INSTRUCTIONS

 


Task 3 — Type Expression and Application (30%)
Timeframe: Week 08 - Week 12 (Deadline Week 13)

Required Submissions:
A-Z; Numerals; Punctuation
Link to your .ttf font.
5 font presentations (1024 x 1024 px, 300ppi)
5 font applications (1024 x 1024 px, 300ppi)



3. Task 3: 
Type Expression and Application

➤ Proposal

According to instructions, we have to create a font from one of the 3 options:

✦ Create a font that is intended to solve a larger problem/ part of a solution in the area of your interest.
✦ Explore existing letterforms in an area of interest.
✦ Experimental design

We were told to present a proposal during tutorial/practical including our ideas on what we want to create.

Below is my Proposal:


Fig 1.1. Proposal Slides, Week 9


After presentation, I decided to go with Idea 1. Which is creating pictograms with Victorian symbol and motifs. 

Mr. Vinod suggested I create a lowercase font along with the symbols so it can work as the answer key.

Fig 1.2. Sketch of Font Idea (17.06.2025)

➤ Research/ Collecting References

As my font is to create Victorian motif symbols, I looked for common victorian symbols and designs for inspiration. I also looked for references I wanted for my lowercase font design. I decided to go for unicase fonts so that it can be consistent like my uppercase fonts which would be symbols.

Fig 1.3. References for Pictograms (23.06.2025)

Fig 1.4. References for lowercase unicase (23.06.2025)


➤ Sketches

Before sketching, I decided to make things more easier by compiling a list of possible references I can use to create each pictogram. I searched in dictionaries and history of England to find prominent words or elements in the Victorian Era.

A - apothecary
B - betrothed
C - circus
D - dog
E - Epidemic
F - Factory 
G - God
H - Horse
I - Ink
J - Joker
K - King
L - London
M - Mail
N - Newspaper
O - Opium
P - Penny
Q - Queen
R - Royal (orb)
S - Sun
T - Tea
U - Unicycle
V - Victoria
W - Wine
X - Xylophone
Y - Yorkshire
Z - Zoo


After deciding on the motif for each letter, I did a sketch for all of it.

Fig 1.5. Sketches for uppercase letters (29.06.2025)


Based on my mood board, I also did sketches for the lowercase letters. Which in this case will be uppercase letters used as the answer key for the cipher.

Fig 1.6. Sketches for lowercase letters (29.06.2025)



➤ Digitalization

I first created a standard grid for all the ciphers to keep consistency.


Fig 1.7. Grid for uppercase letters (29.06.2025)

For uppercase, I used the Pen tool for simple shapes, shape tool for geometrical shapes and the brush tool for everything else. The brush tool was extremely helpful for complicated patterns and inorganic shapes.

Fig 1.8. Progress for uppercase letters (29.06.2025)


After illustrating all the pictograms based on my sketch, I used the pathfinder to merge everything into one shape.

Fig 1.9. Combining uppercase letters (01.07.2025)

Fig 1.10. Completed uppercase letters (01.07.2025)

For my Unicase, imported my sketch and created guides. I then created H, O, G and B with simple shapes that i can reuse for the other letters.

Fig 1.11. Grids for lowercase letters (05.07.2025)


Fig 1.12. Progress for lowercase letters (05.07.2025)

Fig 1.13. Completed lowercase letters (05.07.2025)

➤ Generation

Following Instructions from a senior's blog, Rhyanne C. Lowe, I imported my font as svg into Font Forge. I used the transformation tool to make all my unicase letters smaller. 

Fig 1.14. Transforming lowercase letters (07.07.2025)

Fig 1.15. Kerning of lowercase letters (07.07.2025)

Fig 1.16. Bearing of letters (07.07.2025)

After adjusting the bearings, I put the uppercase above and lowercase below to compare. Make sure it i consistent. Then I exported it, testing it again by installing and using the font.

Fig 1.17. Exporting Viciphorian (07.07.2025)


Fig 1.18. Viciphorian Test Run (07.07.2025)



I realized some of my uppercase letters were too close to each other and decided to adjust the bearings again.

Fig 1.19. Viciphorian Adjusting Bearings (15.07.2025)


➤ Font Presentation

Colour Pallette
Before starting, I created a colour pallette to better assist the design and consistency.

Fig 1.20. Viciphorian Colour Pallette (15.07.2025)


Fig 1.21. Draft Layout (15.07.2025)


Fig 1.22. Texture (15.07.2025)


I decided to add gradient and textures with film grain to make things look more interesting and to imitate the vibe of a breakout room. I imported everything o photoshop to add the filters and textures.


Fig 1.23. Texture in Photoshop (15.07.2025)



Fig 1.24. Embossing (15.07.2025)


Fig 1.25. film grain (15.07.2025)

Mr. Vinod suggested I make the font bigger to showcase my pictograms. I also edited the crossword puzzle to have more hidden words inside.

I decided to make a Cipher with one of the presentations for interpretation, presenting a storyline. With J=Joker and the Pictograms spelling out "Save the Queen".


Fig 1.26. Edits (16.07.2025)


➤ Finalized Font Presentation

Fig 1.27. Font Presentation 1 (15.07.2025)

Fig 1.28. Font Presentation 2 (15.07.2025)

Fig 1.29. Font Presentation 3 (15.07.2025)

Fig 1.30. Font Presentation 4 (16.07.2025)

Fig 1.31. Font Presentation 5 (16.07.2025)


➤ Font Application

Since my font is a cipher made for escape rooms or games, preferably Victorian themed ones. So I decided to create a few visuals and 2 edited screen recordings from escape/puzzle games.

First are the visuals of breakout rooms. I made a mockup of a hint cards using just the elements from my font. 

Fig 1.32. Font Application Progress 1 (15.07.2025)


Fig 1.33. Font Application Progress 2 (15.07.2025)


Fig 1.34. Font Application Progress 3 (15.07.2025)


Fig 1.35. Font Application Progress 4 (15.07.2025)


Next, I created the "props" needed for the video edits on the games. The games I chose was Rusty Lake Hotel and 50 rooms.

Fig 1.36. Rusty Lake Hotel & Escape Game 50 Rooms 1 (15.07.2025)

Fig 1.37. Font Application Progress 5 (15.07.2025)


Fig 1.38. Font Application Progress 6 (15.07.2025)

Now that I have all the needed elements, I imported the screen recordings of the games and edited the puzzles with my font. This way, I can showcase how it would look in gameplay. Edits were done in Alight Motion and Adobe After Effects.


Fig 1.39. Font Application Progress 7 In Alight Motion(15.07.2025)


Fig 1.40. Font Application Progress 8 in After Effects(15.07.2025)


➤ Finalized Font Application


Fig 1.41. Font Application 1 (15.07.2025)

Fig 1.42. Font Application 2 (15.07.2025)

Fig 1.43. Font Application 3 (15.07.2025)

Fig 1.44. Font Application 4 (15.07.2025)

Fig 1.45. Font Application 5 (15.07.2025)

➤ Final Outcome

Download font here! [Click Me]
Viciphorian [by Loh Kai Xuan 2025]


I enjoy the mysteries of escape rooms and puzzle games, and I love the Victorian Aesthetic even more...

So I thought, why not create a Victorian themed Cipher that can be used in both escape rooms and games?

Introducing... "Viciphorian" ! A Cipher font where you have to guess what each pictogram represents in the Victorian Era, in order to find out what letter it is. Enjoy~



Finalized Letter forms

Fig 1.46. Finalized Letterform PDF (15.07.2025)

Fig 1.47. Font Presentation 1 (15.07.2025)

Fig 1.48. Font Presentation 2 (15.07.2025)

Fig 1.49. Font Presentation 3 (15.07.2025)

Fig 1.50. Font Presentation 4 (16.07.2025)

Fig 1.51. Font Presentation 5 (16.07.2025)

Fig 1.52. Font Application 1 (15.07.2025)

Fig 1.53. Font Application 2 (15.07.2025)

Fig 1.54. Font Application 3 (15.07.2025)

Fig 1.55. Font Application 4 (15.07.2025)

Fig 1.56. Font Application 5 (15.07.2025)

Fig 1.57. Final Outcome PDF (16.07.2025)



Font tester

➤ Back to top ✮♱ ༻¨*:·



4. FEEDBACK

➤ Week 9:

General Feedback: Mr Vinod went through some of our blogs for Task 1 and 2, Feedback were given for all Task 3 proposals.
Specific Feedback: 
I should go with idea 1 as idea 2 would make me suffer. Mr Vinod suggested I add lowercase alphabets for my idea to act as the answer key for my pictograms.

➤ Week 10:

General Feedback: Mr Vinod gave feedbacks to everyone's progress.
Specific Feedback: 
Mr Vinod said to continue to proceed on my letterforms.

➤ Week 11:

General Feedback: Feedbacks were given to all the students.
Specific Feedback: 
I was told to complete my lowercase and start on generating font.

➤ Week 12:

General Feedback: Briefing for font presentation and application.
Specific Feedback: 
Mr Vinod told me that I did not need to join the Honor Competition and to make 5 font presentation and application instead.




5. REFLECTION

Experience
This task was challenging and fun. Creating a whole font was not an easy task, giving a valuable experience, using all the abilities learned from both Typography Course and Advanced Typography. However, Font Forge was difficult to use and slow to process. One of the things I found frustrating since I cannot use Fontlab. 


Observations
This task forced me to look around for many references and even observe many senior works. It was enjoyable to see how everyone created their own font and apply the knowledge learnt from them on my work.


Findings
At first, I thought it would be similar to our Final task in Typography Course but i proved to be a lot more work. I learnt to keep consistency throughout all the letterforms and it was fun to find out how to apply my own font. Overall, I'm proud of my final outcome. It may not be perfect, but what we did in this short time was a great experience. 




6. FURTHER READING


Fig 2.1, Typographic Design: Form and Communication (2015)

PG 12- 16: I looked through the book above, and found out about typography evolution from the past, mostly the ones from 1822-1892.

I was surprised that industrial revolution had such impact on the typographic and graphic design community. And that it spark so many innovative designs.

I personally enjoy the fonts from that era, it gives a very bold and impactful impression.







Fig 2.2, Typographic Design: Form and Communication, PG 12-16 (2015)




Comments

Popular Posts