Advanced Typography · Task 3 · Type Exploration and Application

MAY 2024 - July 2024 / Week 8 - Week 14

YANG ZHI CHING / 0365154

Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 3 :Type Exploration and Application

INSTRUCTION

Doc 1.1 MIB

Task 3 · Type Exploration and Application

We are tasked to create a full set of uppercase and lowercase letters along with key punctuation marks. After the typeface is completed, we need to create a presentation showcasing the typeface and demonstrate how it can be used in various mockups.

Proposal |

Doc 2.1 Idea Proposal

Moodboard/Reference |

As mentioned in proposal, i will try to make some more interesting changes based on the concept of task 2 (cutting the rounded rectangle).

Fig 1.1 Sketch of Task 2, Week 10

Fig 1.2 References, Week 10

Sketches |

I have sketched out the outline of my fonts.

Fig 1.3 Sketch, Week 10

Digitization |

The first step is to show the guides and grids in the workspace, then, i had my basic geometry - rounded-rectangle with a slash as the cutting space. By using the shapes, I created out the first version of the uppercase, but i found the rounded-rectangle's bottom radius may be too big, so in attempt 2, i change the bottom radius of the rectangle.

Fig 2.1 Starting Artboard and Basic Geometry, Week 11

Fig 2.2 First Attempt, Week 11

Fig 2.3 Showing the "Cutting Progress", Week 11

Fig 2.4 Compare of the Bottom Radius Adjustment , Week 11

After completed the Basic Outline, I will start to adjust the strokes of the font to let it more natural.

I consist the radius to 9.1228 pt.

Fig 2.5 Compare After Consisting the Radius , Week 11

Fig 2.6 Compare After Consisting the Radius , Week 11

To start the lowercase, I create a guidebox in 2/3 of the uppercase size. After the lowercase, i straight to the numerals creating, I first refer to the information provided by Mr.Vinod.

Fig 2.7 Progress of lowercase, Week 11

Fig 2.8 Reference and Creating Punctuatation, Week 11

After that, I go through all the uppercases, lowercases, numerals and punctuation to integrate the radius, position according the grid preset. After complete all the letters, I used the designed letters to arrange into some words/sentence to have a typing preview (in Adobe Illustrator).

Fig 2.9 Uppercases Progress, Week 11

Fig 2.10 Lowercases Progress, Week 11

Fig 2.11 Numerals and Punctuation Progress, Week 11

Fig 2.12 Preview Type Arragement in Adobe Illustrator, Week 11

Then, I compiled the final version of the letters together to avoid confusion with draft letter, and arranged them into a line, outline mode preview and my whole draft artboard to have multilayout preview of the typings.

Fig 2.13 Arragement of Final Version, Week 11

Fig 2.14 Preview in Line, Week 11

Fig 2.15 Whole Artboard Showing my Progress, Week 11

Fig 2.16 Outline Mode Preview, Week 11

Fig 2.17 Type Display, Week 11

FontLab |

After completed the letters, i proceed them into fontlab, the first problem i met in fontlab is when i drop the "B" "D" "O" and etc. (the letters with middle gap), wouldn't appear correctly with lossing the middle gap. Thus, I try to make compound path and then drop it again in fontlab but still not working. The second method is that i exported the SVG file in Illustrator and then imported into fontlab, but due to a lots letters with middle gap need to have the repeated steps to select-export as SVG-import to Fontlab one by one, It needs a lots of time. When i doing the importing progress, my download Fontlab7 show that my trail was expired, my outcomes will not able to exported, so, i try to download new version and have access to do it in Fontlab 8 (updated version), when updated to Fontlab 8, the problem that missing the middle gap is solved.

Fig 3.1 Problem Missing the Middle Gap, Week 12

Fig 3.2 Imported All Letters into Fontlab, Week 12

Fig 3.3 Preview after adjusting the sidebearing, Week 12

Fig 3.4 Typing Preview and Test, Week 12

Fig 3.5 Final Preview in Fontlab, Week 12

Type Presentation |

(5 artworks; 1024 x 1024 px, 300ppi)

To design the presentation poster using my designed font, I exported the font as ttf file and installed in my computer. I have my testing typing first, in the first attempts, i found my sidebearing was abit weird, so i have made some adjustment in font lab and exported out again. The first sidebearing i used is follow the chart reference given, but it looks messy when i type out paragrapgh, so considering that my fonts design concept is creating by a geomatry rounded-rectangle, I try to adjust my sidebearing into the same points which is 40~50pt. And the result is better than the previous one, so i continue to do it in the adjusted sidebearing.

Fig 4.1 Exported tff file to install, Week 12

Fig 4.2 Testing Typing in Adobe Illustrator using Exported Font, Week 12

After completed the font installation, I started to proceed to the font presentation in Adobe Illustrator.

Fig 4.3 Artboard doing Presentation Poster, Week 13

Fig 4.4 Presentation #1, Week 13

Fig 4.5 Presentation #2, Week 13

Fig 4.6 Presentation #3, Week 13

Fig 4.7 Presentation #4, Week 13

Fig 4.8 Presentation #5, Week 13

Fig 4.9 Final Type Display, Week 11

Fig 4.10 Final 5 Presentation, Week 13

Type Application |

After completing the font and presentation poster, i proceed into type application, which is mockups into models. I continue using the posters made in presentation but add some detail content and adjust to the size. My mockups setting is an exhibition of typography design - "Play/Type" Design Exhibition at LG02, the models are few sign board / about the exhibition information.

Fisrt Attempt · (Rejected)

According to Mr. Vinod feedback, my initial round of applications was rejected because they needed to "make sense" and be implemented in an efficient way.

Fig 5.1 Type Application #1, Week 13

Fig 5.2 Type Application #2, Week 13

Fig 5.3 Type Application #3, Week 13

Fig 5.4 Type Application #4, Week 13

Fig 5.5 Type Application #5, Week 13

Fig 5.6 5 Type Application, Week 13

Second Attempt ·

Because my typeface "personality" may suit the Band/Pop category, I decided to use 99 GOD, a rapper I recently listened to, as the topic. His style nicely complements my "urban/street" type font. I began experimenting with using my font in various ways. I have five mock-up model ideas: an album cover, a billboard poster, a digital pack (music record), and a t-shirt. The main colortone I utilized was high saturation green. I created two basic posters that can be used for album covers and billboards, and future applications will continue in the manner of these two posters.

Fig 5.7 First 2 Poster, Week 14

Fig 5.8 Progress Doing Poster, Week 14

Fig 5.9 Vinyl CD Mockup, Week 14

Fig 5.10 Billboard Poster Mockup, Week 14

Fig 5.11 Digital Pack Mockup, Week 14

Fig 5.12 Street Wall Sticker Mockup, Week 14

Fig 5.13 Poster Mockup, Week 14

Fig 5.13 T-shirt Mockup, Week 14

Last decision, I used this 5 application in final,

Fig 5.14 Five Application, Week 14

Fig 5.15 Vinyl, Week 14

Fig 5.16 Digital Pack, Week 14

Fig 5.17 Billboard, Week 14

Fig 5.18 T-shirt, Week 14

Fig 5.19 Poster, Week 14

| Final Submission |

Font Link
Type Display
Type Presentation
Type Application

· Font Link ·

FONT LINK DOWNLOAD

· Type Display ·

Fig 6.1 Type Display, Week 11

· Type Presentation ·

Fig 6.2 Presentation #1, Week 13

Fig 6.3 Presentation #2, Week 13

Fig 6.4 Presentation #3, Week 13

Fig 6.5 Presentation #4, Week 13

Fig 6.6 Presentation #5, Week 13

Fig 6.7 5 Type Presentation, Week 13

· Type Application ·

Fig 6.5 Type Application #1, Week 14

Fig 6.6 Type Application #2, Week 14

Fig 6.7 Type Application #3, Week 14

Fig 6.8 Type Application #4, Week 14

Fig 6.9 Type Application #5, Week 14

FEEDBACK

Week 11 - Font Digitization

General Feedback:

Proceed the uppercase and lowercase, if complete all the letters including numerals and symbols, can proceed into the fontlab.

Week 13 - Type Presentation

Specific Feedback:

The type looks good. I need to arrange all the letters into an artboard to have an overall preview, including Uppercases (in 2 rows), Lowercases (in 2 rows), Numerals and Punctuation (in 2 rows).

Week 14 - Type Application

Specific Feedback:

My first version application does not make sense; my typefaces can be applied more effectively.

REFLECTION

| Experience |

Initially, I struggled to choose a theme for the font I intended to make. Eventually, I chose to stick with the font I created in Task 2 - Key Design. However, I did not use the old font altogether; instead, I expanded on the concept of "rounded-rectangle - geometric shape" and created a new version of the typeface. Once I had a clear idea of what I wanted to accomplish, I was able to move on to the next tasks. Adjusting the letter details in Adobe Illustrator or Fontlab was a time-consuming task. After finishing all of the letters, I felt a sense of success when I was able to "type out" my customized typefaces on my computer.

| Observation |

I discovered that time management is critical; taking the time to complete tasks properly minimizes stress. Additionally, having strong references, whether for fonts or posters, is vital because it allows us to produce ideas, but not just copy!

| Findings |

In this work, I requested feedback less regularly. Asking the tutor for comments is a good method to improve and understand my own weaknesses.

A Type Primer (2020)
by John Kane
The book also covers typographic difficulties in digital media, providing insights into screen design, responsive design, and type optimization for different devices. Kane explores the function of typography in UI/UX design, focusing on clarity, consistency, and hierarchy to improve usability. In the last chapters, he delves into advanced approaches and experimental typography, inspiring designers to stretch their creative bounds. Overall, A Type Primer provides readers with a thorough overview of the art and science of typography, making it an indispensable resource for designers of all levels.

Search This Blog

YANG ZHI CHING (0365154)