Advanced Typography / Task 3: Type Exploration & Application

17/05/24 - 22/07/24 Week 9 - Week 14

Sheren Princessa Davon / 0362134

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 3: Type Exploration & Application

LECTURES

All lectures done in previous posts

INSTRUCTIONS

Task 3: Type Exploration & Application

For this task, we were required to either:

a) Create a font to solve a problem, or a solution to a certain area of interest (graphic design/new media/entertainment/etc.)

b) Examine the use of an existing letterform of our choice, then identify potential improvements and create solutions

c) Experiment by using 3d materials or any area of our choice, study how type is used and explore or identify potential weaknesses and experiment

Proposal

I came up with three ideas. The first one is to improve a racer font, as well as expand it to lowercase letters and punctuation. The second idea is Type Revival of the classic Cooper Black font used in Indonesian Street Vendors' Banners. Finally, the last is to solve the problem of most retro game fonts, where it mostly consists of pixel fonts, I aim to combine the retro pixel font vibe with a modern approach.

Fig 1.1 PPT

Idea Development

Idea #1: Racer Font

Fig 1.2 Racer Font on AI

Using the reference font, I decided to create a non-italicized version of it, with big and bold letters, which gave me the following:

Fig 1.2 Attempt #1 - Week 10 (24/06/24)

Upon receiving feedback from Mr. Vinod, I decided to go for another approach and use this as a base for my Idea #3 instead.

Idea #3: Video Game Font (Final)

I finally decided to go for idea #3. I plan to examine the typical video game fonts along with fonts typically used in modern mobile games. The final outcome will be inspired by the two eras of video games and can be used in game UIs or even promotional mediums (posters, headlines, etc.)

Letterforms Construction

Uppercase

I created a grid system to create consistent stroke widths and counter spaces.

Fig 1.3 Grid System

I created the base shape (letter O) for most of my letters, a simple rectangle shape which corners I rounded accordingly. For the vertical strokes, I used the grid; mainly 2 blocks wide.

Fig 1.4 Base Shape

I first crafted the rudimentary shapes of the letters using squares and rectangles, then I combined the shapes and added the rounded features. For the easier letters, such as D, I used the base, then adjusted the sides and added the same counterspace, whilst the process was a bit more complicated for the more complex letters.

Fig 1.5 Letter O

Fig 1.6 Letter S against the grids

Fig 1.7 Letter S evolution

I did the same process for the rest of the letterforms, below are a few of the letters:

Fig 1.8 Letters A J X on grid system

Fig 1.9 Uppercase on Illustrator

Fig 1.10 Uppercase Letters Attempt #2 - Week 11 (01/07/24)

By week 12, I finished the uppercase letters, however it didn't look too consistent, so I went ahead and did more refinements.

Fig 1.11 Final Uppercase Letterforms - Week 12 (08/07/24)

Lowercase

After finalizing the uppercase letterforms, I created the rest of the lowercase letterforms, including the numbers and punctuations as well. I derived the corresponding lowercase letterforms from its uppercase counterparts.

Fig 1.12 Grid system for lowercase letters

For the lowercase letters, I added more rows at the bottom for the Descender, but the construction remains the same process as the uppercase letters.

Fig 1.12 Letter b construction

Fig 1.13 Letter g construction

Repeating this process until all the letterforms are complete... as well as punctuation.

Fig 1.14 Illustrator overview

Fig 1.15 Lowercase letters - Week 13 (15/07/24)

Numbers & Punctuation

Some of the numbers are similar to the uppercase letters, thus I derived the numbers from its counterparts (0 from letter O, 2 and 5 from letter S). To differentiate these letterforms, I reduced the cap height of the numbers.

Fig 1.16 S vs 5 / O vs 0

For the punctuation, I maintained the same cap height as the numbers, and used the same strokes and base shape in the lowercase letters, specifically the dot over the lowercase i for the period ( . ).

Fig 1.15 Numbers & Punctuation - Week 13 (15/07/24)

Fig 1.16 Overview of Illustrator workspace - Week 14 (22/07/24)

FontLab

After finishing all the letterforms, numerals, punctuation, it was time to bring the glyphs into FontLab for font generation. I named it Blockette due to its blocky and playful nature. Before that, I measured the dimensions of my letterforms:

Ascender: 648 pt

Cap height: 569 pt

X-height: 405 pt

Descender: -204 pt

Fig 1.18 Pasting glyphs in FontLab

Kerning

I did the kerning for all the glyphs and tested it out by writing out some words.

Fig 1.19 Kerning process

Font Presentation

Font presentation consists of: 5 artworks; 1024 x 1024 px, 300ppi

Fig 1.20 Visual References

Since video games tend to use bright and attractive colors, I wanted to represent this in my font presentation, hence I chose a bright color palette.

Fig 1.21 Color Palette

I began placing the text, arranging them, using different sizes and colors to make it overall appealing. In the 2nd panel, I placed some of the letters in a layout, and halfway through doing it I realized it reminded me of the game Tetris, which I kept in mind for my font application later on.

Fig 1.22 Illustrator Overview

Fig 1.23 Final Font Presentation - Week 4 (22/07/24)

Font Application

This font (Blockette) was designed inspired by chill, bright, retro & modern mobile games. It can be used in mobile games UI design as their titles, character names, text or even as a logo wordmark. It can also be used as headline in promotional ads regarding retro-inspired modern games.

I decided to maintain this theme and chose collaterals that matched; mobile game app ui, promotional poster, arcade machine & gaming mat/mouse pad. I found all the mock-ups and edited them on Photoshop and placed them into the artboards. I also created the UI for the game and the promotional banner. I used the pattern I made in my font presentation for a made up game (Getris) inspired by Tetris.

Fig 1.24 Creating designs in Illustrator

Fig 1.25 Layout Attempt #1

I did not like how this looked like so I decided to find other mock-up templates and experimented a bit more. I also ended up adding an sd card as one of my collaterals as most Nintendo Switch games uses sd cards.

Fig 1.26 Final Font Applications - Week 4 (22/07/24)

Final Task 3: Type Exploration & Application

Type Design

Blockette; download link

Fig 2.1 Full Glyphs - PDF. Week 14 (22/07/24)

Font Presentation

Fig 2.2 Font Presentation 1 - JPG. Week 14 (22/07/24)

Fig 2.3 Font Presentation 2 - JPG. Week 14 (22/07/24)

Fig 2.4 Font Presentation 3 - JPG. Week 14 (22/07/24)

Fig 2.5 Font Presentation 4 - JPG. Week 14 (22/07/24)

Fig 2.6 Font Presentation 5 - JPEG. Week 14 (22/07/24)

Fig 2.7 Font Presentation Compilation - PDF. Week 14 (22/07/24)

Font Application

Fig 2.8 Font Application 1 - JPG. Week 14 (22/07/24)

Fig 2.9 Font Application 2 - JPG. Week 14 (22/07/24)

Fig 2.10 Font Application 3 - JPG. Week 14 (22/07/24)

Fig 2.11 Font Application 4 - JPG. Week 14 (22/07/24)

Fig 2.12 Font Application 5 - JPG. Week 14 (22/07/24)

Fig 2.13 Font Application Compilation - PDF. Week 14 (22/07/24)

FEEDBACK

Week 10

General Feedback

Use grids, ascenders, descenders, x-height & guides to create consistent letterforms

Week 11

General Feedback

When moving glyphs into FontLab: edit > preferences > paste & duplicate > turn on import original

Specific Feedback

Letterforms are inconsistent, try to use a grid
Make sure lowercase are more than half of uppercase letters

Week 12

General Feedback

Take a look at the TDC Competition font presentations for examples
Make sure the presentations and applications relate to the typeface

REFLECTION

Experience

This task was challenging to say the least, I struggled especially during the early starting days of the project due to a lack in decisiveness of what topic to do. After I decided on the topic and started sketching on some ideas, I was able to get back onto the flow of creating. Since I picked the topic that I liked, especially as a fan of chill mobile games, I was able to enjoy the process of creating letterforms inspired by this. It was also quite nostalgic as I was an avid player of Tetris and Snake and this project was a great way to reminisce and revive it in a way.

Observation

Overall, this project perfectly sums up the previous tasks into one final conclusion. This module has been challenging yet insightful. I've observed the importance of using guides and grids especially when designing typefaces to ensure consistency. Creating base shapes also make the letterform constructions much quicker as there is a basis to go off from. It is also important to do research beforehand, to make sure our creations are relevant and give off the correct intentions.

Findings

Upon my research, I found that a lot of chill video games, the non-action ones especially, use really bold and blocky typefaces, if not pixel fonts. Since there are a lot of pixel fonts already created, it gave me the inspiration to create a blocky font but not in a pixelated style, but only inspired by it. Despite my best efforts, I do see some improvements that can be made in my Blockette font creation. This then leads me to another lesson I learned, which is that creating a font takes time and dedication, especially in the process of refinement of letters. There is always a long process of improving and as designers, it is important for us to explore and experiment to ensure the best final outcome. It takes such meticulous detail to create a typeface and I'm grateful for this learning opportunity.