Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative
Media
GCD61004 Advanced Typography
Week 9 to Week 14
The end and start of the Typography journey
As I approached the end of this semester, the final task was assigned to me: to put the knowledge I had learned throughout the module to the test. The final boss of the stage is to build a font entirely by myself with the intention to solve the currently existing issues or any improvements/variations that can be made. The third assignment also reminded me of the letter-forming task from my first semester, however, this time I'm designing it for myself for whatever style I'm fond of while tackling the persisting issues.
Image credit:
Naldz Graphics
These are the jump links to each part of this portfolio
Instructions
Mr Vinod Nair, my module coordinator and lecturer for this semester, provided us with the necessary files including the module information, and reading elements to give us a headstart on this module.
Fig 2.1 MIB - Module Information Booklet
Task 3 | Type Exploration and Application
Using all of the things I've learned and experienced in this module, we proceed to synthesise that knowledge to effectively execute my final task.
In this task, I chose to explore the use of an existing letterform in a war-theme FPS game, understand its design relationship with the game, and finally identify areas that could be improved upon, later explore the possible solutions or combinations that may add value to the existing letterform/lettering.
Learning goals:
- To create purposeful typefaces that are consistent in design and identity and with appropriacy in mind.
- To simulate the use of a typeface in the application while ensuring consistency in design.
The task is divided into two parts including:
- Font design
- Font application and presentation
Assignment method of completion:
- Adobe Illustrator
- FontLab 7
Submission requirements:
Task 3 Font Design- Eportfolio: All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) must be documented logically and chronologically in the portfolio for the duration of the task in one post. Ensure all files are made public/visible/ accessible to all)
- Eportfolio: All images/sketches/diagrams/scans must be captured/photographed/scanned well with good, even, natural light, without shadows — use of tube/bulb/flashlight is not allowed. All images/sketches/diagrams/scans must be labelled(fig 1.), described and dated. Final submission must be indicated clearly (distinguishable from process work) and uploaded as PDF and JPEG (not PNG) or as instructed in class.
Work Process
Font Design
Week 9 Research and identify an area for improvement
Browsing through the Internet, I found that the game that I know has a game title that didn't fit the theme of the game, which is the chaos of the war. This game reflects a brutal war broken between terrorists who plan to trigger World War 3. However, the font design of the game title is not battle-scarred enough, despite following the modern style.
 |
| Fig 1.1 Game Title Design |
Week 10 Finalize research and generate ideas
I came up with multiple ideas and sketched them down for easier visualization. After a round of research again, I quickly found a suitable improvement to make the font have the war characteristic to make the viewers/gamers feel how brutal the war is beforehand.
Taking reference to multiple fonts such as Stencil, and Cargo alphabet, I scrutinized the details possessed in both the reference to aid me in visualizing what font I will be making.
The idea I want to go here is to combine the stencil-style fonts with a gritty and distressed texture.
I tried out both a smooth serif and a blocky serif in my exploration to find a more suitable style for the font.
 |
| Fig 1.3 Alphabet design exploration |
 |
| Fig 1.4 Numeral exploration |
Week 11 Digitalization and design confirmation
Many adjustments are going on in this process to refine my letterforms further. For the digitalization process, I began to make the font idea with proper measurements in Adobe Illustrator using the 6 X 6 square grids.
To further visualize what will my font look like, I also applied the distorted effect to the generated font design to simulate the distress and gritty texture.
 |
| Fig 1.5 Uppercase letter, numerals and basic symbol design with effect |
However, after careful consideration in selecting between a smooth serif design and a blocky serif design, I decided to go with the blocky serif style as blocky fonts are mostly and widely applied on military equipment and supplies due to their unalterable readability even after the wear and tear of the font.
 |
Fig 1.6 Blocky stencil font design
|
Exploration
There is also some design exploration on the letter A to decide what looks best between the other fonts.
 |
| Fig 1.7.1 Various design choices for letter A |
After thinking it through, I made my mind to not select the fancy design of the A as the first thing in my font design is not to impede the readability of my font. Thus, I decided to go with the more generic design here.
Lowercase design attempt
Initially, I also planned to make a lowercase letter design for my font, however upon making some attempts I soon found out that the slightly thick stems made the lowercase letters look a bit disproportional. Thus, I made a plan to just make my font design for header use only, meaning that my font will only have uppercase letters to accommodate the header application.
 |
| Fig 1.7.2 Lowercase letter exploration |
Confirming my design choice, I further expanded the font design and made special characters or symbols with similar characteristics to my letter design, ensuring consistency throughout the design. |
| Fig 1.8 Symbols design |
To apply the distressed and gritty texture to my design, I searched and found an Illustrator-ready texture file that I could slap onto my font design to further improve the visual design and fit the purpose of my font.
 |
| Fig 1.9 Distress texture pattern |
Using the Pathfinder tool and dividing the texture and the font, I'm able to achieve the effect I want on my font which is the gritty and distressed effect.
 |
Fig 2.0 Texture on letters
|
Upon review, I decided that it was good to proceed to apply the texture to the rest of the design. At the same time, I also ensure to place each individual characters in a artboard box of 1000px X 1000px size to allow me for easier importing to the FontLab for further adjustments.
 |
| Fig 2.1 All characters in each individual box |
Week 12 Importing to FontLab
Checking my design into the FontLab, I adjusted and input my font information such as the font name, font measurements & dimensions, notes and any copyright information.
 |
| Fig 2.2 Setting font info in FontLab 7 |
After a final check on my font in Illustrator, I started to copy and paste my design into the FontLab according to the letters.
 |
| Fig 2.3 Importing design from Adobe Illustrator |
 |
| Fig 2.4 Importing all designs into FontLab 7 |
Subsequently, I adjusted the metrics and kerning of the font to control the spacing between the font when in application to make the font have a consistent reading flow. When adjusting the sidebearings, I follow the sidebearing guides that Mr Vinod has provided to help me grab the exact measurements. Of course, I also made some personal adjustments according to the characteristics of my font to make the spacing look even.
 |
| Fig 2.5 Adjusting metrics of the fonts |
Kernings between the specific characters that have a slanted stem such as the letters A and V are also adjusted by eyeballing the measurements.
 |
| Fig 2.6 Font kerning |
Font Information
Family name: War Scar
Weight class: Regular 400
Ascender: 850 units
Descender: -200 units
Caps height: 850 units
x height: 0 unit
Notes:
This font is created from a combination of blocky, stencil fonts with grittier, distressed properties. After I looked through a war-themed FPS game title font design, I noticed an issue. Despite its modern blocky font design style that suits the game's modern warfare theme, it doesn't reflect how brutal the war is by showing the scarred and distressed properties in it. Thus, this is why I adjusted and created this font, War Scar. As heard from the font name, these designs can make the viewers experience how battles can only wear down the items we've cherished.
You may ask:
Why blocky and stencil style?
This choice of design is backed up by the fact that militaries or industries require high visibility and readability fonts so that people can distinguish different letters on objects.
Militaries and industries also use stencils for ease of application on multiple items quickly, allowing efficient production.
Why gritty and distressed texture?
These textures feature a battle-worn look, highlighting the chaotic and brutal nature of war.
Week 13 Font Presentation and Application
Following the completing the font exporting in FontLab 7, I proceeded to make a presentation for my font to showcase the design. The theme of my font is war, so naturally, I'm going to include any war-related elements in my font presentation.
 |
| Fig 2.7 Font Presentation 15/7/2024 |
For the font application, I applied a similar mindset to the set theme for the application: brutal war. In the font application, the graphics that I made are achieved using Adobe Photoshop to make different outcomes such as posters, book covers, clothes slogans, game covers and webpage designs.
 |
Fig 2.8 Making Font application examples 16/7/2024
|
 |
| Fig 2.8.1 Font Application 17/7/2024 |
Some samples: |
Fig 2.9 Webpage header
|
 |
| Fig 3.0 Humanitarian aid poster |
 |
| Fig 3.1 Book cover design |
Submission
Font (PNG & .ttf file)
 |
Fig 4.1.1 "War Scar" font
|
Click the button to download the font:
Font Presentation (PNG & PDF)
 |
Fig 4.2.1 Font Presentation 1
 | Fig 4.2.2 Font Presentation 2
|
 | Fig 4.2.3 Font Presentation 3
|
|
 |
Fig 4.2.4 Font Presentation 4
 | Fig 4.2.5 Font Presentation 5
|
|
 |
Fig 4.2.6 Font Presentation (PNG)
|
Font Application (PDF)
 |
Fig 3.3.1 Font Application 1
|
 |
Fig 3.3.2 Font Application 2
|
 |
Fig 3.3.3 Font Application 3
|
 |
Fig 3.3.4 Font Application 4
|
 |
Fig 3.3.5 Font Application 5
|
Font Application (PNG)
The file is too large to preview on web PDF, click the button below to download it.
Access the Assignment 3 folder here:
Lecturer's Feedback
WEEK 9
General Feedback:
The proposal must have 3 ideas with questions and answers, and have sketches.
WEEK 10
General Feedback:
Consistency is important. Use the grid to guide you when creating a font. Stroke sizes of the fonts must achieve consistency.
Specific Feedback:
The "Goofy" font is ok and achieves some sense of consistency, but some strokes are not equivalent.
WEEK 13
General Feedback:
Make sure for the font application you need to choose a theme for your font application, such that if you go for a fashion application, just use the fashion examples.
My reflections
My learnings:
In this assignment, I embarked on the exciting journey of crafting a new font aimed at solving a specific problem. The design process was both challenging and rewarding. I began by sketching various letterforms, keeping in mind the principles of typography and legibility. I experimented with different shapes, weights, and spacing to achieve a balance between aesthetics and functionality. One of the key learnings during this phase was the importance of consistency and cohesion in font design. Each letter needed to harmonize with the rest to create a uniform and readable typeface.
My observations:
Reviewing the design samples from the TDC competition provided me with invaluable insights into the level of creativity and technical precision required in professional typography. My seniors' works showcased diverse styles and innovative approaches, emphasizing the importance of originality and attention to detail. The competition samples highlighted how a well-crafted font could evoke specific emotions and convey powerful messages through its design.
Exploring font application examples on the Pentagram website further broadened my perspective. I observed how versatile and adaptable a well-designed font could be across various mediums and contexts. Pentagram's use of typography demonstrated how a font could enhance brand identity and communicate a cohesive visual narrative. This observation reinforced the importance of considering the practical applications and versatility of my font design.
Conclusion
Overall, this assignment was an enriching experience that deepened my understanding of typography and font design. I gained valuable skills in both the creative and technical aspects of font creation. Crafting a new font to address an existing problem not only honed my design abilities but also highlighted the importance of telling a story beforehand through fonts. This project has inspired me to continue exploring the world of typography and its potential to improve comprehension.
My further reading
WEEK 9The book I'm reading for the first week is called Typography Referenced
What I read:
"Typography, Referenced" serves as an all-encompassing guide to the art and science of typography. The book begins with a historical overview, tracing the evolution of type from ancient Greek lapidary letters to contemporary digital fonts. It highlights the revolutionary impact of movable type on literacy and knowledge dissemination, underscoring typography's critical role in societal advancement.
The guide delves into the principles and practices of type design, classification, and identification, offering insights into the contributions of notable type designers and foundries. It also explores contemporary usage, showcasing how typography is applied in modern design contexts.
A unique feature of the book is its extensive compilation of resources, including type-specific publications, organizations, conferences, and online platforms. This makes it an invaluable reference for both practitioners and enthusiasts seeking to deepen their understanding of typography.
Comments
Post a Comment