ADVANCED TYPOGRAPHY
|| Leong Hui Xuan 0365793
|| 11/06/2025- 14/07/2025 (Week 8 - Week 13)
|| Bachelor of Design in Creative Media
|| Task 3
Table of Content
1.
Lectures
2. Instruction
3. Process Work
2. Instruction
3. Process Work
- Research
- Sketches and Ideation
- Letterform Construction Process
- Generating Font in FontForge
- Font Presentation
- Font Application
- Honor Standby Competition Design
7. Reflection
8. Futher Reading
INSTRUCTION
PROCESS WORK
In Task 3, we need to combine all the knowledge that we learnt in recent
tasks and exercises to do our final task. First, we need to
create a new font, and the font design needs to
solve a problem or contribute to a solution
in the field that interests you. For the outcome, we need to have a
complete generated font with
applications.
The final outcome could be a custom-designed font and its application in
a form or format that addresses a specific problem, enhances an existing
use, or presents an experimental result that is innovative and
original.
Research
Figure 1.0, Task 3 Final Project Proposal Slide, week 8
(11/6/2025)
Sketches and Ideation
After consultation the idea with Sir Vinod, I decided to go create a
font based on
character design in game
industry.
"I chose Neuvillette as the inspiration for my font character, as I
felt that his persona aligns well with the aesthetic of
Blackletter typefaces. My
aim is to design a font that draws from Blackletter but is presented in
a more simplified and
imaginative manner.
Before starting to sketch, I find some reference images of the
"Neuvillette" character and the font references.
.jpg)
|
| Figure 1.1, References Images of Neuvillete, week 9 (16/6/2025) |
.jpg)
|
| Figure 1.2, References Fonts, week 9 (16/6/2025) |
Then, I started sketching my ideas.
.png)
|
| Figure 1.3, 1st Setch Draft, week 9 (16/6/2025) |
My first idea sketches included many elements like diamonds and curved tails. After the consult, I reduce the elements to only maintain one diamond element on the stroke.
|
|
Figure 1.4, 2st Setch Draft, week 9 (16/6/2025) |
But i still think the line is a bit unnecessary.
|
|
Figure 1.5, 3st Setch Draft, week 9 (16/6/2025) |
Uppercase Process
.jpg)
|
|
|
After finished the idea sketch for uppercase, I started to
digitalised with pen tool and edit them consistancy in Adobe
Illustrator.
|
|
|
To ensure consistency in stroke and size across all the letters, I
separated them into different components: stroke, diamond, tail, and
curved stroke. This way, I can easily access and reuse these parts
when constructing each letter
|
|
|
|
|
|
|
|
|
|
|
|
Lowercase Process
|
|
|
In designing the lowercase letters, I preserved the diamond, stroke, and curved stroke elements used in the uppercase to maintain visual consistency.
|
|
Figure 1.13, Lowercase process, week 10 (23/6/2025) |
.jpg)
|
|
Figure 1.14, Lowercase process, week 10 (23/6/2025) |
I changed the letter "a" design to make it look more paired with the
other letters when typing out the word.
|
| Figure 1.15, Lowercase Construction Outline View, week 10 (25/6/2025) |
|
| Figure 1.16, Lowercase Construction with Lines, week 10 (25/6/2025) |
|
| Figure 1.17, Lowercase Construction, week 10 (25/6/2025) |
Numerals Process
.jpg)
|
|
Figure 1.18, Numbers Process, week 10 (26/6/2025) |
I maintained the same design approach for the numerals but removed the
ascender tails to differentiate them from both the lowercase and
uppercase letterforms.
|
| Figure 1.19, Numbers Outlines view, week 10 (27/6/2025) |
|
| Figure 1.20, Numbers Lines view, week 10 (27/6/2025) |
|
| Figure 1.21, Numbers Construction, week 10 (27/6/2025) |
Symbols Process
.jpg)
|
|
Figure 1.22, Symbols Process, week 11 (30/6/2025) |
The symbol designs mainly use the diamond shape and the same strokes as the
numerals to create visual harmony and a cohesive font family. I used
the ascender tail from the uppercase letters, rotated it, and applied it as
the tail element in my symbol designs.
|
| Figure 1.23, Symbols Construction with Outline view, week 11 (1/7/2025) |
|
| Figure 1.24, Symbols Construction with Lines view, week 11 (1/7/2025) |
|
| Figure 1.25, Symbols Construction, week 11 (1/7/2025) |
Screengrab
Figure 1.26, Finished Process, week 11 (2/7/2025)
Figure 1.27, Finished Process with Outline View, week 11 (2/7/2025)
Generating Fonts with FontForge
Figure 1.28, Importing Letters, week 11 (4/7/2025)
|
| Figure 1.29, Edit Bearing, week 11 (4/7/2025) |
.png)
|
| Figure 1.30, Importing letterform, week 11 (4/7/2025) |
Initially, my symbol design for '<>' used a bold, curved style mirrored ascender tails, as seen on the left. However, I decided to simplify the form to better align with the overall structure of my typeface. The version on the right have a cleaner outline while maintaining visual harmony with the font’s existing strokes and proportions.
|
|
Figure 1.31, Metric View of Sidebearings, week 11 (4/7/2025) |
|
|
Figure 1.32, Testing Typing, week 11 (4/7/2025) |
|
|
Figure 1.33, Testing Typing, week 11 (4/7/2025) |
Back to Top
Font Presentation Process
|
|
Figure 1.34, Font presentation process, week 12 (7/7/2025) |
I experimented with different positions and color combinations to
determine the most suitable way to present and showcase my font
effectively.
|
|
Figure 1.35, Colour pallette, week 12 (7/7/2025) |
I chose a color scheme inspired by Neuvillette, using tones that
reflect his character design and overall aesthetic to ensure visual
harmony between the font and its theme.
.jpg)
|
|
Figure 1.36, Font presentatin process 1, week 12 (7/7/2025) |
.jpg)
|
|
Figure 1.37, Font presentation process 2, week 12 (7/7/2025) |
.jpg)
|
|
Figure 1.38, Font presentation process 3, week 12 (7/7/2025) |
For this presentation, my initial idea was to use Fontaine’s emblem
(the nation Neuvillette belongs to), but I later decided to replace it
with the custom "T" from my font design, featuring two bowls hanging
on each side to symbolize scales of justice.
.jpg)
|
|
Figure 1.39, Font presentation process 4, week 12 (7/7/2025) |
I showcased my lowercase letters in the background, while in the
foreground, I featured Neuvillette’s name in uppercase, accompanied by
the symbol (“”).
|
|
Figure 1.40, Font presentation process 5, week 12 (7/7/2025) |
Final Font Presentation
|
|
|
Figure 1.41, Font presentation colour palatte, week 12
(7/7/2025) |
Figure 1.42, Font presentation 1, week 12 (7/7/2025)
Figure 1.43, Font presentation 2, week 12 (7/7/2025)
Figure 1.44, Font presentation 3, week 12 (7/7/2025)
Figure 1.45, Font presentation 4, week 12 (7/7/2025)
Figure 1.46, Font presentation 5, week 12 (7/7/2025)
Back to Top
Font Application Process
Figure 1.47, Font application process experiment, week 12
(9/7/2025)
For the application, since my font is inspired by a game
character, I envision it being
used in-game to
support
character personalisation. This includes displaying damage numbers, serving as the
dialogue font when Neuvillette speaks, appearing on Neuvillette’s
game card, and being featured on merchandise of his
character.
.jpg)
Figure 1.48, Font application process 2, week 12
(9/7/2025)
For the card design, I inspiration from Pokemon cards,
incorporating Neuvillette’s skills and character traits to
create a
collectible style layout
that reflects his game identity.
.jpg)
Figure 1.49, Font application process 3, week 12
(9/7/2025)
Figure 1.50, Font application process 4, week 12
(9/7/2025)
.jpg)
Figure 1.51, Font application process 5, week 12 (9/7/2025)
Additionally, I applied my font (right side photo) to the
damage numbers to
visually represent Neuvillette’s identity during combat.
.jpg)
Figure 1.52, Font application process 6, week 12
(9/7/2025)
For the ticket design, I was inspired by character themed tickets, so I decided to create one featuring Neuvillette’s name along with his name card design, combining both visual identity and collectible appeal.
Final Font Application
Figure 1.53, Font application 1, week 12 (11/7/2025)
|
Figure 1.54, Font application 2, week 12 (11/7/2025) |
|
Figure 1.55, Font application 3, week 12 (11/7/2025) |
Figure 1.56, Font application 4, week 12 (11/7/2025)
Figure 1.57, Font application 5, week 12 (11/7/2025)
Honor Stanby Competition Design Process
For this Honor competition, we need to create 4 application for the
Honor Talents "Stanby" category design.
.jpg)
Figure 1.58, Honor Stanby Category Guided, week 13
(13/7/2025)
Research/ References
.jpg)
|
| Figure 1.59, References images of Honor, week 13 (13/7/2025) |
For the "Honor Standby Clock" competition, my idea was to create a
design inspired by an
automatic flip clock. The central axis of the clock replace by the
scales of justice, and the two left and right parts use two bowls or containers
instead of the bowls of the scales, which perfectly fits Neuvillette's
theme of judgment.
|
|
Figure 1.60, Honor Sketches, week 13 (14/7/2025) |
I started by sketching a draft for the Honor Standby Clock concept,
using an automatic flip clock as the main inspiration. For the
Personalized Signature Design page, I incorporated Neuvillette’s name
along with his quote, “Justice flows like water.” I carried over the
same visual elements from the clock design, but modified the flip
clock section into scale like bowls.
Digitalised
|
| Figure 1.61, Clock Design Process, week 13 (14/7/2025) |
However, when I started applying colors, I found it difficult to
make the flip clock look both realistic and aesthetic. Due to
time-consuming, I decided to
change the flip clock
concept to a scale of justice. I replaced the bowls with rectangles and placed my numbers on
them to present the clock design.
.jpg)
|
|
Figure 1.62, Clock Design Process, week 13 (14/7/2025) |
Then, I applied the
day and battery elements
for the theme. For the background, I used a wave shape and applied a
radial blur to create visual contrast with the clock.
|
|
Figure 1.63, Personalised Signature Design Process, week 13
(14/7/2025) |
.jpg)
|
|
Figure 1.64, Personalised Signature Design Process, week 13
(14/7/2025) |
.jpg)
|
| Figure 1.65, Overall Visual Design Process, week 13 (15/7/2025) |
For the Overall Visual Design page, I initially used a black and dark
blue background with Neuvillette elements and white numbers for
contrast. However, it didn’t match with the clock and personalized
signature design.
So, I changed it to a white and blue background, incorporating
Neuvillette’s power element, scale of justice elements and number with
gradient from dark blue to light blue-green.
Final Stanby Honor Competition Submission
Clock Design
|
| Figure 2.0, Stanby Clock Design, week 13 (15/7/2025) |
|
| Figure 2.1, Personaise Signature Design, week 13 (15/7/2025) |
Overall Visual Design
|
| Figure 2.2, Overall Visual Design, week 13 (15/7/2025) |
Animation Design
|
| Figure 2.3, Stanby Clock Animation, week 13 (15/7/2025) |
MP4 video and link
Figure 2.4, Stanby Clock Animation MP4, week 13 (15/7/2025)
https://drive.google.com/file/d/1gjXHlxjui0xdri13SpPMjM6nTkpL5flU/view?usp=sharing
Design Elaboration
Figure 2.5, Design Elaboration, week 13 (15/7/2025)
Try Neuvillette Font here:
--:--:--
TASK 3 FINAL COMPILED OUTCOME
Download TTF file
Here
Download OTF file
Here
Figure 3.0, Final PDF of NeuvilletteBold Font, week 13
(17/7/2025)
Figure 3.1, FontForge Screengrab of NeuvilletteBold Font,
week 13 (17/7/2025)
Figure 3.2, Finalised Font in Illustrator, week 13
(17/7/2025)
Figure 3.3, Font Presentation 1, week 13 (17/7/2025)
Figure 3.4, Font Presentation 2, week 13 (17/7/2025)
Figure 3.5, Font Presentation 3, week 13 (17/7/2025)
Figure 3.6, Font Presentation 4, week 13 (17/7/2025)
Figure 3.7, Font Presentation 5, week 13 (17/7/2025)
Figure 3.7, Font Presentation Compiled PDF, week 13
(17/7/2025)
Figure 3.8, Font Application 1, week 13 (17/7/2025)
Figure 3.9, Font Application 2, week 13 (17/7/2025)
Figure 3.11, Font Application 3, week 13 (17/7/2025)
Figure 3.12, Font Application 4, week 13 (17/7/2025)
Figure 3.13, Font Application 5, week 13 (17/7/2025)
Figure 3.14, Final Font Application Compiled PDF, week 13
(17/7/2025)
|
|
| Figure 3.15, Final Stanby Clock Design, week 13 (15/7/2025) |
|
|
||
Figure 3.16, Final Personaise Signature Design, week 13
(15/7/2025)
|
|
|
|
Figure 3.18, Fianl Stanby Clock Animation, week 13
(15/7/2025) |
Figure 3.19, Final Design Elaboration, week 13 (15/7/2025)
.jpg)
Figure 3.20, Honor Stanby Submission Receipt, week 13
(15/7/2025)
(Since I cannot find the categories of Stanby to submit, I
submit the design in the Watches categories)
FEEDBACK
Week 9:
General Feedback: For chaarcter design fonts, need to
based on the character personality and characteristic to design
the fonts not the elements that the character have.
Specific Feedback: Too many elements, remain onlly one
elememts and the others delete it.
Week 10:
General Feedback: Keep on going in lowercase and
numerals.
Week 11:
General Feedback: Choose stanby theme as the
submission for Honor compettition.
Specific Feedback: The letters look more consistancy
and simplify.
Week 12:
General Feedback: For the Fontforge app need to look
at the link given to learn how to use FontForge.
Specific Feedback: Sir helped me with calculating
the baseline in Fontforge.
Week 13:
General Feedback: Honor submission will be
updated again, temporary put the submission in Blog
first.
Specific Feedback: Nice application.
REFLECTION
Experience
In this project, I experienced the full process of typeface design
from ideation, sketching, digitalizing and generating the font. My
idea was to designed a font based on Neuvillette from Genshin Impact.
I started with many visual element from the character, but after the
consultation, I simplify the font and make t consistency. I used
FontForge for the font generation. Although the process was difficult
and new to me, it gave me a better knowledge for font metrics. I
discovered how important the details are in creating a font that
function well across different media.
Observation
The key of observation is I realise how strong the character identity
can guide a design decision. Neuvillette’s as Judge Fontaine
influenced not only the shape of the typeface, but also the contexts
in which it would be used like court documents, collectible cards,
in-game UI, and so on. Besides, too many visual elements can overwhelm
the design. Stripping down the fonts to their essential components
only helps with overall visual harmony, especially when combining them
wigth backgrounds, textures, and UI mockups.
Findings
Overall, I found that typography can be a powerful storytelling tool
when designed with intention. A typeface can reflect identity and
enhance narrative immersion, especially in the entertainment and
gaming industries. Applying my font in various in-game scenarios such
as damage numbers, cards and the document paper shows how custom fonts
can enhance character reconition and emotional connection in games.
The Honoe Stanby competition futher reinforced this idea as I place my
font into a clock that design by the scales of justice and inspired by
the Neuvillette and the flip automatic clock. Most importantly, I
realized that a font feels more meaningful when it's used in the right
context.
Figure 4.0, The Vignelli Canon by Massimo Vignelli, Week 13 (19/7/2025)
This book is about design principles that emphasizes simplicity
and functionality in design. It separate into two parts: The
Intangibles and The Tangibles.
The Intangibles
- Semantics: The importance of understanding the meaning of the design and its purpose.
- Syntactics: Consistency in design, focusing on structural elements
- Pragmatics: The need for clarity and understanding in communication through design.
- Discipline: The necesseity of attention to detail and adherence to design principles.
- Appropriateness: Designing solutions specific to the problem's context.
- Timelessness: Avoiding trends in favor of design principles.
The Tangibles
- The use of grids, margins and typefaces to create structed and effective design.
- Practical design such as paper sizes, color, texture and layout.
- The importance of whitespace.
Design Philosophy: Design as a discipline, not a style.
Visual Power: Emphasizes the need for design to beauty of intellectual and
avoid over-designed elements.
Ethics in Design: Advocates for a responsible approach to design.
Comments
Post a Comment