Typography : Task 3(A)/Type Design and Communication

Week 7 - Week 9 : 6 Oct 2021 - 19 Oct 2021

Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Task 3(A) / Type Design and Communication


LECTURE

Lecture notes 1-5 were jotted down at Task 1/Exercises.
Lecture notes 6 were jotted down at Task 2/Typographic Exploration & Communication.


INSTRUCTIONS

TASK 3(A): Type Design and Communication

We will be designing a limited number of western alphabets:  a i m e p y t g d o b ! , .

To begin with this task, we need to analyse and breakdown the letter. We need to study the existing font design. Then, we can start doing rough sketches and upon approval begin digitisation of the sketches. 

Research
Figure 1.1, Typographic terminology, Week 7 (10/10/2021)


Figure 1.2, Inspirations, Week 7 (10/10/2021)

Figure 1.3, Inspirations, Week 7 (10/10/2021)

Figure 1.4, Different construction of "g", Week 7 (10/10/2021)

I have yet to decide to work on san serif or serif font at this point. But I have gained some ideas on how to construct the letters. I am attracted by the type design with greater contrast. 

Deconstruction of letters

Figure 1.1 shows the example of deconstruction of "r" by Mr. Vinod. 


Figure 1.1, Deconstruction of "r", Week 7 (10/10/2021)

I choose to deconstruct both sans serif and serif fonts : Univers LT Std, Futura Std and Bembo Std. 

Figure 2.1, Deconstruction of letters - Univers LT Std Roman, Week 7 (10/10/2021)

- Horizontal stroke is thinner than vertical stroke. 
- For "n", the left vertical stroke is thinner than the right vertical stroke.
- For "y", the strokes are not parallel. The size slightly decreases near the intersection point. 

Figure 2.2, Deconstruction of letters - Futura Std Book, Week 7 (10/10/2021)

- Lower x-height compared to Univers LT Std.
- Larger ascender height compared to Univers LT Std.
- Horizontal stroke is thinner than the vertical stroke.
- For "n" and "y", there is equal weight for all strokes. 

Figure 2.3, Deconstruction of letters - Bembo Std Regular, Week 7 (12/10/2021)

- This serif font used more curves to construct.
- Has greater contrast compared to the first two typefaces.
- For "n", the right vertical stroke has nuance curve.
- Horizontal stroke is thinner than the vertical stroke.

Sketches

Figure 2.4, Rough sketches, Week 7 (12/10/2021)

Figure 2.5, Rough sketches, Week 7 (12/10/2021)

After receiving feedbacks from Mr. Vinod, I studied a little about ink trap typefaces and make another sketch. I decided to go with sans serif font. 

Figure 2.6, Rough sketch, Week 8 (16/10/2021)


Digitisation in Adobe Illustrator
The next step is to digitise all the letterforms in Adobe Illustrator. We are free to use any tools like Shape Builder Tool, Pen Tool and Shape Tool to design the letterforms. The first letter I designed is the letter "O". "O" may seem easy but I found it a little tricky to get smooth curve as it is not a perfect circle. 
Figure2.7, Digitisation of "O", Week 8 (17/10/2021)
 
Figure 2.8, Digitisation progress, Week 8 (17/10/2021)

Figure 2.9, Outline of type design, Week 8 (17/10/2021)

I have to make sure that all the vertical strokes are in the same width so that the design will look consistent. The letters which have curve shape ("e" "a" "o") slightly exceed the median line and baseline (overshoot) to make sure they are visually balanced in x-height. 


Figure 3.1, Ink trap typeface design, Week 8 (17/10/2021)


Figure 3.2, Original typeface design, Week 8 (17/10/2021)


After receiving some feedbacks, adjustments were made accordingly. 

Figure 3.3, Adjustments were made at the descender, Week 9 (20/10/2021)

Figure 3.4, Adjustments were made at the terminal, ink trap is added, Week 9 (20/10/2021)

Figure 3.5, Increased thickness, Week 9 (20/10/2021)
Outcome of Typeface Design

Figure 3.6, Ink trap typeface design final version, Week 9 (20/10/2021)

Figure 3.7, Original typeface design, Week 9 (20/10/2021)


Development of Final Typeface in FontLab

I then copied and pasted my type design from Illustrator to FontLab 7, referring to the video tutorial provided by Mr. Vinod. It is time to name our typeface and key in the font info. I named my typeface "Ferrostal". 

Figure 3.8, My "O" design is landed at FontLab, Week 10 (20/10/2021)

Figure 3.8, My type design in FontLab, Week 9 (22/10/2021)

Then, manual kerning for each letterform is made in Metrics Tab. 

Figure 3.9, Before kerning, "Ew", Week 9 (22/10/2021)

Figure 4.1, After kerning, Week 9 (22/10/2021)

I kept getting out from my chair to look at the phrase from a distance to make sure they look consistent. 

After that, I simply typed out some letters to adjust the kerning. I found that between 2 curved-shape letter, I will normally reduce 20pt of kerning. If there are 2 vertical strokes facing next to each other, I will normally add 50pt of kerning. If there is 1 curve + 1 vertical stroke, I will keep the kerning/-5pt. 

Figure 4.2, Random phrase for manual kerning, Week 9 (22/10/2021)

Figure 4.3, Random phrase for manual kerning, Week 9 (22/10/2021)

Figure 4.3, Endless manual kerning combinations, Week 9 (22/10/2021)

After that, I exported the typeface and installed it in my laptop. I typed out the given phrase to showcase all the letterforms I have designed.

Figure 4.4, Poster layout in Adobe Illustrator, Week 9 (23/10/2021)

Figure 4.5, Chosen poster layout, Week 9 (23/10/2021)

Font Tester

Try typing out " a i m e t y p g d o b ! , . " 


Font Tester - referred to the video tutorial by Lim Jia Sheng



Final Submission - Task 3 (A) / Type Design and Communication


Figure 4.6, Final type design in JPEG, Week 9 (23/10/2021)

Figure 4.7, Final poster in JPEG, Week 9 (23/10/2021)
Figure 4.8, Final type design in PDF, Week 9 (23/10/2021)

Figure 4.9, Final poster in PDF, Week 9 (23/10/2021)


FEEDBACK

Week 8 :

General Feedback
We need to create at least 5 sketches. Before we digitise them, we need to think of the shape of the character. Draw the basic shape and explore its forms. It is better to have strong characteristics in our design, for example, condensed, wide, or rounded. To make our design look like a font, it has to be some level of consistency of the weight distribution of the letterforms.

Specific Feedback
The third sketch (in Figure 2.4) is a good attempt, it has some interesting features. It would be better to increase the contrast. Mr. Vinod also suggested to look for "ink trap" typeface design. Whenever there is convergence of two strokes, the typographer would introduce the ink trap. For the fourth and fifth sketch (in Figure 2.5), my Blackletter design is not entirely accurate, and it might end up too similar with the existing fonts. So, I can further explore with the third sketch.

Week 9 :

General Feedback
Mr. Vinod said a lot of us can avoid some minor mistakes by analysing the existing typeface. For example, punctuations may look easy but there are something to take note. Most of the students make them too small. We should also take note that the ascender of "d" and "b" should be extended upwards over the x-height (to reach the cap line). 

Specific Feedback
Interesting work. Mr. Vinod suggested me to add ink trap at the terminal of "t". The descender of "g" looks a bit "fat", which can be further improve on that part. The thickness for "a" could be increased. Also, I was advised to bring up the bowl of "a". During the second round of feedback session, Mr. Vinod said my work looks much better. I could slightly adjust the terminal of "t" to more curvy (similar to "g"). One more thing to take note is that my "," is too thin. I was advised to maintain the thickness similar to other letters. Other than that overall is good. 

Week 10 : 

General Feedback
No general feedback was given.
Specific Feedback
Well done. Good job on the type and poster (although the use of the "i" and "!" were not similar in size, it seems to work for your poster. The font is consistent in stroke, look and feel. Good job.


REFLECTION

Experience
It was a very tiring process to design the typeface but the rewards are satisfying. I was happy to see the results. In the process, I struggled to get the specific "curve" I wanted. It requires a lot of patience to adjust the anchors and focus on tiny details. This is also my first time using the FontLab. I think I will need to explore more on this software in the future. I faced a little issue when copy pasting my design, which is it didn't stick on the baseline although I followed the tips provided by Mr. Vinod. All I need to do is to manually move the letter sticking to the baseline.

Observation
Through the deconstruction of letterforms, I observed that some letters may look symmetry but in fact they are not. There are nuance adjustments made so that the letters are visually balance. Now I understand why Mr. Vinod said some "curves" may seem simple but it could take few years to construct them. I also observed that small details can affect the whole design. For example, by adding more curve to the terminal of "t", I feel it looks more "harmonious" when I zoomed out. 

Findings
I have definitely learnt a lot in this project. From scratch, I managed to design my very own typeface. I used a lot of references and get inspired from them. Although the results may not be perfect, this practical was a fruitful experience as I get to understand the structures of each letter. Through the process of designing the typefaces, I learnt to appreciate the hard work of every typographers. The knowledge I gained in this module can definitely apply in other fields, includes entertainment design or animation. It is important to learn observing and determining the consistency in any form of design.


FURTHER READING

A Visual Guide to the Anatomy of Typography

Figure 5.1, Cover image of the article, Week 8 (12/10/2021)

In this article shows the different parts that make up letters and their real-life counterparts, and visualised them with some fun analogies. I found the infographics are pretty useful and help me to remember some common typography terminology. It also explains about how type is styled to better suit a purpose. For example, bold styles are great for headlines and highlighting the text.  


Typography design 101: a guide to rules and terms

Figure 5.2, Cover image of the article, Week 8 (12/10/2021)

This article briefly explains the history of typography, its anatomy, rules of type design and its illusion. The part I found interesting is the typographic illusions. 

Figure 5.3, Illusion of "S", Week 8 (12/10/2021)

The letter "S" seems symmetrical but it is not. The smaller top and larger bottom makes it looks stable and confident. 

Figure 5.4, Height illusion, Week 8 (12/10/2021)

Even though all letters seem to be the exact same height, the round shapes are actually slightly bigger. This is due the contact surface area of a curve and a flat surface. We need to overshoot the "O" a little so that they will be visually equal in height.

Figure 5.5, Illusion of "A", Week 8 (12/10/2021)

Similarly to the letter "O", the letter "A" is actually not symmetrical. Sometimes we do not need to "trust" the numbers/value, slightly against the mathematical rule will make the design visually pleasing.

There are a few more examples provided in the original article. The information can be easily digested (at least for me) due to the use of pictures followed by a brief explanation. 


The Best Ink Trap Typefaces for Websites

Figure 5.6, Cover image of the article, Week 8 (15/10/2021)

This articles show a great amount of ink trap typefaces which I never encounter before. I was attracted by Tomato Grotesk and Neue Machina. 

I learnt about the purpose of ink traps is to retain legibility at smaller sizes in print. They’re carefully designed parts of type, which disappear when printed—due to the ink bleeding and filling in the gaps.

It can also serve the same purpose on the web. Looking at the examples at smaller type sizes, ink traps help by opening spaces in the letters further. This can make legibility better at those sizes.