Typography - Task 3: Type Design and Communication

19.6.2025-7.13.2025/( week8-week13)

YANG SHUO / 0384037

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

TASK 3: Type Design and Communication

LECTURES

Typo Task 3A Typeface Construction (Shapes)

This session introduces how to digitize our handwritten font drafts in Adobe Illustrator. Mr. Vinod mentioned that we need to pay attention to the canvas and whether the x-height dimensions are correct. Then the professor introduced how to create letters using shapes in AI.

Typo_Task 3A_Illustrator To Fontlab5 Demo (WATCH FIRST before FontLab 7 Video)

Mr. Vinod introduced how to create fonts in FontLab 5. Although we were asked to use FontLab 7, this tutorial in the lecture video is still very important.

Typo_Task 3A FontLab7 Demo (Watch FontLab 5 Demo First)

This video introduces how to create fonts in FontLab7 and how to adjust the side-bearings of each letter.

Typo Task 3A (optional) – Preview & Type Your Font on Blogger by Lim Jia Sheng

This video introduces how to embed the HTML of a font preview into an e- portfolio blog.

INSTRUCTIONS

TASK 3

Type Design and Communication

Research

First, I read the material provided by Mr. Vinod:

Typography: theory in practice (notes & thoughts), Keith Tam (2014)


Figure1.1 Typography: theory in practice (notes & thoughts), Keith Tam (2014)(2 Jun/W7)

I want to study sans-serif fonts, so I chose the Univers LT Std. I found relevant information on Wikipedia.

👉 https://zh.wikipedia.org/wiki/Univers

Univers LT Std belongs to the sans-serif typefaces, characterized by a modernist style, strong geometric sense, and clear structure. I chose Bold Condensed as the subject for further study and deconstruction.

Bold Condensed is more vertically stretched in style, with a compact structure and strong contrast.

Figure1.2 Univers-lt-std-67-bold-condensed-sample

(2 Jun/W7)

Next, I will analyze the letters H, o, g, b in detail using Adobe Illustrator (canvas size: 1000pt x 1000pt) as required.

Figure1.3 Deconstructed "H" - Univers Bold Condensed

(2 Jun/W7)

Font structure characteristics:

Stroke thickness is almost uniform.
The vertical lines on the left and right are vertical, with a small spacing, creating an overall compact appearance.
The horizontal line in the middle is slightly above and lower than the x-height, presenting a "center of gravity elevation" effect to balance visual weight.

Figure1.4 Deconstructed "o" - Univers Bold Condensed

(2 Jun/W7)

Font structure characteristics:

It is a vertically compressed oval, not a standard circle.
The thickness of the left and right strokes is consistent, presenting symmetry. The top and bottom strokes taper.
The internal negative space is also approximately oval in shape (but it actually resembles a rounded rectangle that is close to an oval), corresponding to the outer shape while leaving visual white space.

Figure1.5 Deconstructed "g" - Univers Bold Condensed

(2 Jun/W7)

Font structure characteristics:

The part at height x is a closed approximated elliptical shape, and the walls of the connecting part narrow.
The vertical boundaries of the character shape are aligned, and the oval at the top is slightly higher.
The lower layer is an oval-shaped, slightly flattened bowl with inner space.

Figure1.6 Deconstructed "b" - Univers Bold Condensed

(2 Jun/W7)

Font structure characteristics:

On the left is a straight vertical line (stem).
On the right, the bowl part is a vertical oval, connected to the upper middle part of the stem and the walls of the connecting part narrow.
The overall appearance is compact and symmetric in its strokes.

We were also asked to try designing fonts on paper using three different thicknesses of markers that are above 3.0mm.

Letters:

H, O, G, B, h, o, g, b

My first attempt did not go very well, because I always had trouble precisely controlling the direction and force of my strokes. This lead me to had to rewrite a letter several times to achieved a relatively acceptable appearance. Many times what I 'write' looks like something 'drawn,' which was very bad and did not conform to writing standards.

Figure1.7 The first attempt on paper

(2 Jun/W7)

In the feedback online meeting of week 8, Mr. Vinod indeed pointed out this issue of mine. I was told that I should not change the stroke direction while writing a letter - this was about 'drawing' the letter. And he also suggested some research directions to me.

In the second attempt, I tried my best to adhere to the writing rules. Here is my second attempt .

letters and punctuation:

A E P Y I T G D M O B / a e p y i t g d m o b , . !

Figure1.8 The second attempt

(9 Jun/W8)

After basically determining the direction, I used Adobe Illustrator for font design.

I used the pen tool and created a new brush presets to made the lines looked like they had bends and variations in thickness.

Figure1.9 Brush parameter settings (9 Jun/W8)

Next, I referred to the structure of the font Univers LT Std and set five reference lines for the font. I didn't completely refer to the style when writing by hand. Because when I use electronic tools to create letters, there is a more precise result (stroke direction, thickness, etc.).

I tend to design sans-serif letters that resemble handwritten bold type. In the end, I had come up with these preliminary letter designs.

Figure1.10 Typeface design (9 Jun/W8)

In the feedback, Mr. Vinod pointed out my issues with lowercase letters. I need to work more on the consistency of my strokes. For example, since my letter 'o' is relatively complete, it should influence my letters b, d, g, p, and q.

I adjusted my letters based on this suggestion.

My revision process is as follows: I first broke down the basic strokes (as shown in the second drawing board of Figure 1.11).

Figure1.11 Process screenshots in Illustrator (16Jun/W9)

Finally, I made adjustments to the details of the strokes. First, I expanded the path into a contour. Then, I used the smoothing tool to process the angular parts of the stroke, resulting in smooth turning curves. Finally, I deleted the excess anchor points and adjusted the contour with the anchor point handles.

Figure1.12 Final design in AI(23Jun/W10)

Next, I downloaded FontLab7 according to the instructions, and I would complete my remaining steps here.

First, I need to ensure that the letter paths in the AI had been converted to outlines. Then manually aligned them to the reference lines - this was to obtain the correct positioning when importing the letters into FontLab.

Figure1.13 FontLab process example: the letter "a"(30Jun/W11)

Figure1.14All letters and punctuation marks imported
into FontLab(30Jun/W11)

After importing all ten letters and three punctuation marks, I adjusted the side-bearings of my lowercase letters according to the kerning adjustment rules given by Mr. Vinod. After the adjustments were completed, I input some words made up of these letters, and further fine-tuned them by observing the spacing and balance between the different letters.

Figure1.15 Adjustment process of the side-bearing
for lowercase letters(30Jun/W11)

After everything was ready, I exported the font to the computer and installed it.

We are required to create a typography poster using our own designed fonts. We must use all the letters we have designed, and maintain the same font size.

I sought help from Chat GPT and received a sentence that meets my requirements: "a big poet obeyed a deep image, paid good debt by adept ego." It feels like a proverb or a piece of poetry. Then I tried different layouts in Illustrator.

Figure1.16 Adjustment process of the side-bearing
for lowercase letters(7Jul/W12)

I personally like the fifth and the seventh the most. However, since the fifth one is not convenient to read, I ultimately chose the seventh poster. During the tutorial in week 13, Mr. Vinod provided feedback on my poster: to increase the font size and reduce the top margin.

SUMMERY

Link to download font

👉 https://drive.google.com/file/d/1b5kyFbPa6iVdVu-RE8q-aUuwm7Qb8U-r/view?usp=sharing

Figure1.18 Initial sketch (7Jul/W12)

Figure1.19 Screen Grab of FontLab process
(side-bearings)(7Jul/W12)

Figure1.19 Final Type construction in Ai JPEG
(1024px, 300ppi, Grayscale)(7Jul/W12)

Figure1.20 Final Type construction Ai in PDF(7Jul/W12)

Figure1.17 Final JPEG A4 black & white poster(7Jul/W12)

Final PDF A4 black & white poster (7Jul/W12)

Font Sarava Preview

FEEDBACK

Week8

General feedback： This week we conducted online guidance and feedback. Mr. Vinod introduced us to the writing standards of the English alphabet, including the five important lines in typography (such as ascender line and x-height line), which we must adhere to when designing fonts. At the same time, as we explore fonts, we can consciously search online for writing styles of that particular font style.

Special feedback： Mr. Vinod pointed out that my biggest problem is the letter 'H', and the correct approach is to write them. When writing, the direction of the pen should not change; I think this reflects the standardized 'writing feeling'. Secondly, based on the typeface I wrote which leans towards a semi-Gothic sans-serif style, the lowercase letter 'g' should not have a descender that is too long.

Week9

General feedback： In this lesson, we held an online feedback meeting about the font design assignment. Mr. Vinod first briefly explained the requirements of the assignment, then he provided comments on the fonts designed by the students who volunteered to present their work, pointing out issues and suggesting revisions.

Special feedback： In the fonts I designed, uppercase letters perform better than lowercase letters. However, when Mr. Vinod asked me which one I preferred, I chose lowercase letters. There are several issues with lowercase letters. Firstly, the letter 'o' is good, but its structure and strokes need to influence the letters p, g, d, and b, meaning that the body parts of these four lowercase letters need to be unified with 'o'. At the same time, I should also adjust the angles of some lowercase letters to make them a bit more slanted. Finally, I need to pay attention to the fact that the main part of the symbol '!' is wide at the top and narrow at the bottom. Overall, I need to do a better job of unifying the lowercase letters.

Week10

General feedback： Mr. Vinod told us that we need to keep the font design process, as it is a necessary condition to prove originality.

Special feedback： My lowercase letters still have some issues. My strokes have too many corners and are not smooth. I need to adjust the outlines using a smoothing tool. Additionally, removing unnecessary anchor points during the adjustment process can make this work easier.

Week11

General feedback： This tutorial mainly teaches how to import letters designed in Illustrator into FontLab 7.

Special feedback： My font design process in Illustrator is basically complete, and I can start designing in the FontLab. I need to pay attention to adjusting the letter spacing.

Week12

General feedback： The typography project continues this week. After importing the designed letters into FontLab7, adjust the side-bearings of the letters as needed. After that, we export the font of our own name and install it on the computer. Then go to Illustrator to start poster design. Mr. Vinod showed us an example of the final assignment, highlighting some specific requirements.

Special feedback： The font I designed didn't look perfect when I imported it into Fontlab. So I went back to Illustrator and adjusted the glyphs. Once that's done, I export the font in Fontlab and start making the poster. Mr. Vinod reminded me to pay attention to line spacing.

Week13

General feedback： This week is the second to last tutorial. Mr. Vinod continues to guide us on the assignment for Task 3 and elaborates on the specific requirements for our e-portfolio's Final Compilation & Reflection.

Special feedback： I have basically completed my task 3. The professor suggested that I further enlarge the letters on the poster. After finishing that, I started to write the final blog as required.

REFLECTIONS

Experiences

I think this is the most interesting and challenging task in my typography course so far. We were asked to design a font ourselves, and the whole process involved a series of explorations from handwritten drafts to digitization. I have to admit that this requires a certain understanding of letter composition, as well as a lot of time and effort to refine the design. Even though I encountered many problems during the process, I felt a great sense of accomplishment when I finally completed the black and white poster using my own font.

Observations

Through my observations, I have found that balance in letter composition is very important. A good sense of visual balance is one of the standards of a good typeface. There is much knowledge involved here. For example, when setting the side-bearings of letters, I found that the strokes of the letters also affect the balance of the letter's structure—when letters form words, it further impacts the overall visual effect. Therefore, when designing a typeface, the weight of each stroke needs to be taken into consideration.

Findings

I found that designing a good font not only requires one’s own aesthetic style, but it is also important to fully study existing excellent fonts. Although this does not mean to completely imitate, for a beginner like me, those excellent font styles can always provide a lot of inspiration. Besides the basic rules of letter composition, they can tell you what kind of designs will yield good visual effects, and what kinds of problems should be avoided during the design process.

Yang Shuo (0384037)

搜索此博客