Typography - Task 3: Type Design & Communication

17.11.2024 - 16.12.2024 / Week 9 - Week 13

Chan Zhi-Ren Zenndan / 0369069

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

Task 3: Type Design & Communication

1. LECTURES

Illustrator to FontLab

Mr.Vinod introduced us to FontLab, an application we will use to transfer our AI file into a typeable font.

2 IMPORTANT THINGS:

Do not select 'Round,' but select 'Keep' to retain your original letterform.

Preferences settings

Tick 'Keep stroke and colors, place color elements

Tick 'Import original position: prefer AI vector format.

Typo_Task 3A_Illustrator To Fontlab5 Demo

Measure the height of your letters. Make sure to label the following guides in Illustrator:

Ascender line // 767 pt

Cap line // N/A since lowercase letters do not have a cap line

Mean line // 500 pt

Baseline // 0 pt

Descender line // -197 pt

After labeling your guides, unite overlapping objects into one object with the Pathfinder tool.

Fig 1.1 Uniting objects into one (5/12/2024).

After uniting, we have to adjust the unit settings in FontLab to our measured units.

Fig 1.2 Units adjusted to my measurements (5/12/2024).

With the adjustments set, I inserted each letter and symbol individually.

Fig 1.3 Letterforms and symbols uploaded to FontLab (5/12/2024).

Next, open a new metrics tab and type out the letterforms.

We will have to kern our letters by setting the values of both left and right bearings to 50.

We will also have to adjust certain 'complicated' letters.

Fig 1.4 Kerning by adjusting left and right bearing values (5/12/2024).

Back to top

2. INSTRUCTIONS

Document 2.1 Typography Module Information Booklet (17/11/2024).

Process

Our first task was to practice a detailed dissection of one of the typefaces provided by Mr. Vinod. I chose Futura Std as my typeface.

Fig 2.1 10 Typefaces provided (17/11/2024).

Once chosen, the next step is to dissect the letters 'H,' 'O,' 'G,' and 'B' in Illustrator on a 1000 pt by 1000 pt artboard. The letters provided had many bowls and curves, so I created multiple ellipses to better understand the letterform.

Fig 2.2 Letterform dissection (17/11/2024).

Following the dissection, we are to explore different types of font exploration in the form of sketches. During practicals, we were instructed to draw the same letters on A4 graph paper using three pens above 3.0.

Fig 2.3 Font sketches, 1 of 2 (04/11/2024).

Fig 2.4 Font sketches, 2 of 2 (04/11/2024).

After practising a few more times on paper, I used this graph paper as my reference while I tried digitising.

Fig 2.5 Reference for digitisation (17/11/2024).

After sketching, we had to choose a preferred writing style and try to digitise it through Illustrator. So, I followed up on a chosen sketch and followed the next step: creating additional letters within the same writing style. This practice reminds us of typography principles, which involve considering the x-height, ascenders, descenders, cap height, etc.

Fig 2.6 Blue guides to show x-height, ascenders, descenders, etc (17/11/2024).

Mr. Vinod's tutorial on digitising letterforms using shapes gave me a better understanding of what I must do. So, I prepared a few rectangle shapes and attempted digitising. After a few tries, I found that rounding off the edges works with my sketch and enhances the visual appeal.

Fig 2.7 Rounding edges (17/11/2024).

One thing I had to keep in mind while digitising was to make sure my digitisation visually aligned with what Futura Std looked like since it was the font I had decided on using earlier.

I finished the extra letterforms Mr. Vinod had tasked us with ( o l e d s n c h t i g , . ! # ).

Fig 2.8 Digitised letterforms, first attempt (17/11/2024).

Fig 2.9 Digitised letterforms with outline, first attempt (17/11/2024).

After receiving feedback on Week 9, I made a few adjustments to the letterforms, notably the s, c, g, and the symbols.

Fig 2.10 Revised letterforms after Week 9, attempt 2 (19/11/2024).

Following up on feedback received from Week 10, I revised and made attempt 3.

Fig 2.11 Revised letterforms after Week 10, attempt 3 (29/11/2024).

Once my font was approved, I was allowed to start designing my poster.

Before drafting, I had to keep in mind the following:

A4 size
Black & white only
Ensure the letters of each word share the same font size
List down the font name, my name, and the year the font was created (Univers Roman, 8)
Make words large; in other words, make full use of the page size

Initially, I found that I could form the words 'silent night.' Since it was the Christmas season, I decided to find what other words I could use to complement it with a complete sentence.

Fig 2.12 Drafting the poster (9/12/2024).

After several attempts, I found it wasn't legible enough, so I kept it simple and enlarged the font.

Fig 2.13 Second attempt on the poster (9/12/2024).

Satisfied with my second attempt, I attempted a complete version with the font name, student name, and the year the font was created.

Placeholder Regular

Chan Zhi-Ren Zenndan

2024

Fig 2.14 First attempt on a complete version of the poster (9/12/2024).

Receiving feedback from Mr. Vinod, he advised placing the three text boxes vertically flowing down the poster. This allows me to utilize the negative space given in the poster.

With that in mind, I adjusted accordingly.

Fig 2.15 Revised poster (9/12/2024).

This version provides better readability and is not too clustered.

Back to top

3. FINAL SUBMISSION

Mr Vinod's requirements for the final submission -

Link to download font

Screen Grab of FontLab process (side-bearings)

Final Type construction in Ai JPEG (1024px, 300ppi, Grayscale)

Final Type construction Ai in PDF

Final JPEG A4 black & white poster (1024px width, 300ppi, Grayscale)

Final PDF A4 black & white poster

Font Tester/Preview (optional)

The link to download the font can be found by clicking here.

Fig 3.1 Screen Grab of FontLab process (15/12/2024).

Fig 3.2 Final Type Construction in AI, JPEG format [1024px, 300ppi, Grayscale] (15/12/2024).

Fig 3.3 Final Type Construction in AI, PDF format (15/12/2024).

Fig 3.4 Final A4 B&W Poster, JPEG format (15/12/2024).

Fig 3.5 Final A4 B&W Poster, PDF format (15/12/2024).

You may try out my font in the text box below. Please make sure you only use letters 'o l e d s n c h t i g'

Back to top

4. FEEDBACK

Week 9

General Feedback: It is normal for your sketch to evolve when digitised. Modify the letters over time and replicate the sketch as closely as possible by being more nuanced (adding more details) on the letterforms. Maintain consistency in the stroke of the letterforms. Remember details about the anatomy of a typeface.

Specific Feedback: Don't complicate the letterforms. If they have rounded corners, make sure all the corners have rounded corners; if they are sharp, keep them sharp. Rework is needed for 'c' and 'g.'

Week 10

General Feedback: We were given 3 hours to refine our fonts.

Specific Feedback: The 't' has to be below the ascender height, the hashtag must have the same stroke as the other letterforms to remain consistency.

Week 11

General Feedback: We were given 2 hours to refine our letterforms. Mr. Vinod briefly reminded us to watch the videos provided in Teams on how to use FontLab 7.

Specific Feedback: Good, but try to give the hashtag symbol a heavier stroke. Other than that, I may proceed to learn how to use FontLab 7.

Week 12

General Feedback: Design an A4 poster in black and white. When making the poster, ensure that all letters share the same point size, and make the words big enough to fit the poster. List down your font name, name, and the year it was created (8 point size, Univers Roman).

Specific Feedback: Good, I may proceed to download my font (TTF file) and design my poster.

Week 13

General Feedback: Remember to use all the provided letters when designing the poster. Students are encouraged to start making a new post for the final compilation and reflection.

Specific Feedback: The poster is fine. I may start finishing up my e-portfolio.

Back to top

5. REFLECTIONS

Experience

Task 3, combined with the last few weeks of study, was an enjoyable experience. Designing a font based on a set of words allowed me to express my love for minimalism. I intentionally kept the shapes simple and clean, focusing on functionality and decoration. Mr. Vinod's approach also helped me grow; his flexibility in class time and consistent feedback helped me refine my work beyond my expectations.

Observations

At first, the digital version of my font didn’t match my expectations, as the forms felt too rigid and lacked the flow I had envisioned in my sketch. Despite this, I chose to push forward, keeping an open mind and listening to Mr. Vinod’s feedback. He reassured me that such discrepancies are natural, as designs evolve during the digitization process. This perspective shifted my approach, allowing me to experiment more freely and refine the shapes until they felt right.

Findings

I found that reflecting on previous work was very beneficial. While working on the poster, I applied skills I had learned in earlier exercises, such as improving readability and integrating creativity into the design. Mr. Vinod’s feedback helped me place the credits at the top of the poster, flowing down vertically, which allowed me to effectively utilize the entire A4 size and create a more balanced composition.

Back to top

6. FURTHER READING

Fig 6.1 Thinking with Type, by Ellen Lupton, Week 12 (8/12/2024).

I went through the "Letter" chapter in Thinking with Type by Ellen Lupton, and it really made me realize how important it is to choose the right typeface. She explains that typefaces are essential tools for communication, and selecting the right one can impact a design's readability, tone, and message.

Search This Blog

Chan Zhi-Ren Zenndan (0369069)