Typography - Task 3 : Type Design and Communication

15.11.2025 - 19.12.2025 (Week 8 - Week 13)

Lim Jia Yu 0357873

Bachelor of Business (Hons) in Digital Marketing   l   Creative Media Design (Minor)

GCD60104 Typography (sec 02)

Task 3 (Type Design & Communication)

---

TABLE OF CONTENTS

1. Instructions

2. Feedbacks

3. Reflections

4. Further Readings

---

Instructions

<iframe src="https://drive.google.com/file/d/1cLDKQn6hY0SLxbcTtn5xY2bMshOHa45P/preview" width="640" height="480" allow="autoplay"></iframe>

Task 3 - Type Design & Communication

A) Research

Step 1

fonts explorations

From the 10 provided fonts, I typed out the letters "H", "o", "g", "b" to compare their characteristics and observe the differences in style, weight, and form among them. 

Figure 1.1.1 : Fonts Explorations

Step 2

requirements

- select one preferred font from the 10 fonts provided

- do detail dissection, using letter "H, o, g, b", in Adobe Illustrator

- artboard size : 1000 pt x 1000 pt

- write down observations

Step 3

selected font for font dissection 

Figure 1.1.2 : Selected Font For Font Dissection

Step 4

font dissection

1. Letter "H" 

Figure 1.1.3 : Letter "H"

I noticed how strong and grounded the letter "H" looks. The vertical strokes are thick and sturdy, giving the letter a solid, confident presence. The horizontal bar in the middle is slightly thinner, which adds a nice balance and prevents the letter from feeling too heavy. The rounded corners where the strokes meet show a soft touch (it's not overly mechanical). It feels like the designer paid attention to how the lines connect naturally, which reflects the typeface's humanist roots. Overall, the "H" feels structured but still warm, not too rigid. 

2. Letter "o" 

Figure 1.1.4 : Letter "o"

The letter "o" is beautifully shaped. It is not a perfect circle but more of an oval. That little imperfection makes it feel more organic and hand-drawn, which fits with Bembo's calligraphic background. I can see there is a subtle contrast between the thick and thin strokes, giving it rhythm and movement. The inner counter (the white space inside) feels nicely balanced and consistent, which helps the letter look smooth and clean. It is simple but very refined. It shows how much thought goes into making a shape look effortless. 

3. Letter "g" 

Figure 1.1.5 : Letter "g"

The letter "g" really stood out to me because of its double-storey structure. It looks quite complex compared to the other letters, with the top and bottom bowls connected by a gentle curve. The top part is smaller and neater, while the bottom bowl has more space and flows beautifully. The tail at the end curls in a graceful way feels elegant but also very controlled. I also noticed that the whole form is built using overlapping circles, which shows how precise the design is despite looking natural. This letter really highlights the classical and timeless beauty of the Bembo typeface. 

4. Letter "b"

Figure 1.1.6 : Letter "b"

I noticed how the design of letter "b" beautifully balances elegance and structure. The vertical stroke (stem) is slightly thick, giving the letter a strong and stable appearance. The rounded bowl contrasts with the straight stem, creating a nice sense of movement and softness. The construction grid reveals that the curves are not perfectly circular, they follow subtle variations that make the form look more natural and less mechanical. The counter (the inner space) is slightly oval, which adds warmth and flow to the shape. I also observed that the top terminal has a delicate tapering that connects smoothly to the vertical stroke, showing the influence of calligraphic strokes. 

B) Ideation

Step 1

requirements

- sketch letters "HOGB" & "hogb" 

- two methods (choose one) : 1. draw letters on a graph paper 

                                                      2. write letters using a marker pen on a graph paper (nib size 3.0)

- pen used : 1. the broad-edge pen (aka. flat nib)

                     2. the flexible pointed pen (aka. pointed nib / brush)

                     3. the pointed pen (aka. ball point pen, rounded felt-tip)

- set a baseline, ascender, descender, cap line

- create 3-5 design options

Step 2

font sketches explorations (first version)

Figure 1.2.1 : Font Sketches (First Version)

Step 3

font sketches explorations (second version)

Figure 1.2.2 : Font Sketches (Second Version)

Step 4

sketch approved by Ms. Vitiyaa

Figure 1.2.3 : Approved Sketch

Step 5

more sketches explorations

- letters : A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

- punctuations : ,   .   !   #

Step 6

A-Z letters & punctuations sketches 

Figure 1.2.4 : A-Z Letters & Punctuations Sketches

C) Font Digitisation

Step 1

requirements

- two methods (choose one): 1. shape tool

                                                    2. stroke tool 

- tools: cut, width, shape builder, pen and brush

- windows: pathfinder, align, stroke

- two actions (choose one): 1. menu > object > path > outline stroke

                                                 2. menu > object > compound path > make 

- keep the raw shapes/strokes

- show process work

Step 2

guides

These guides were created following the demo video by Mr. Vinod, using letters "T", "y", "d" in font Myriad Pro Regular. 

Figure 1.3.1 : Guides

Step 3

digitised exploration (Shape Tool)

Figure 1.3.2 : Digitised Exploration (Shape Tool)

Step 4

without unite modes (Pathfinder)

Figure 1.3.3 : Without Unite Modes

Step 5

with unite modes (Pathfinder)

Figure 1.3.4 : With Unite Modes

Step 6

with outline stroke

menu > object > path > outline stroke

Figure 1.3.5 : With Outline Stroke

Step 7

comparisons

Figure 1.3.6 : Without vs With Unite Modes

Figure 1.3.7 : Without vs With Outline Stroke

Step 8

final digitised fonts (without guides)

Figure 1.3.8 : Final Digitised Fonts (Without Guides)

D) FontLab7

Step 1

requirements

- place all created letters and punctuations in FontLab7

- adjust side bearings (left and right of your letter)

- when importing letterforms from AI  1. do not "Round", click on "Keep"

                                                                   2. turn on import position (preferences > paste & duplicate)

Step 2

insert created letters and punctuations in FontLab 7

Figure 1.4.1 : Created Letters and Punctuations Inserted in FontLab 7

Step 3

without vs with kerning & side bearings

Figure 1.4.2 : Without vs With Kerning & Side Bearings

Figure 1.4.3 : Without Kerning & Side Bearings

Figure 1.4.4 : With Kerning & Side Bearings

Step 4

favourite sentence

Think of sentence / phase that I want for the poster.

Figure 1.4.5 : Favourite Sentence / Phase

Step 5

type in FontLab7

Figure 1.4.6 : Sentence Typed in FontLab7

Step 6

do side bearings

Figure 1.4.7 : Kerning & Side Bearings

Step 7

give a name to my font

Figure 1.4.8 : Name My Font

Step 8

export & insert my font in Font Book

Figure 1.4.9 : Font Exported & Inserted in Font Book

E) Poster 

Step 1

requirements

- A4 size poster

- in black and white

- must in same font size for sentence / phrase / words

- byline <yourfont's name> <your name> <2025>, in Univers LT Std at 8pts 

 

Step 2

layout explorations

Figure 1.5.1 : Layout Explorations

Step 3

layout approved by Ms. Vitiyaa

Figure 1.5.2 : Approved Layout

Step 4

chosen layout

Figure 1.5.3 : Chosen Layout

F) Final Type Design & Communication

(1) Link to download font

~ Hi, I'm HERE ~

(2) Initial sketch

Figure 1.6.1 : Initial Sketch_Grid Paper_Writing (Week 13, 19/12/2025)

Figure 1.6.2 : Initial Sketch_Adobe Illustrator_With Guides (Week 13, 19/12/2025)

Figure 1.6.3 : Initial Sketch_Adobe Illustrator_Without Guides (Week 13, 19/12/2025)

(3) FontLab process (side-bearings)

Figure 1.6.4 : FontLab Process_New Metric Window_Side Bearings (Week 13, 19/12/2025)

(4) Final type construction

Figure 1.6.5 : Final Type Construction, JPEG 300ppi, Grayscale (Week 13, 19/12/2025) 

Figure 1.6.6 : Final Type Construction, PDF (Week 13, 19/12/2025)

(5) Final A4 black & white poster

Figure 1.6.7 : Final A4 Black & White Poster, JPEG 300ppi, Grayscale (Week 13, 19/12/2025)

Figure 1.6.8 : Final A4 Black & White Poster, PDF (Week 13, 19/12/2025)

<back to top>

---

Feedbacks

Week 9

General Feedback :

I developed five different design concepts for the letters "H", "O", "G", "B", and the review process helped me evaluate which style worked best. One of the designs was approved, giving me the green light to move forward confidently with my digitised font. 

Specific Feedback :

Out of the five "H", "O", "G", "B" designs I presented, Ms. Vitiyaa approved sketch 4 (from second version) for its clarity and strong potential, and now I can continue by digitising this selected version. 

Week 10

General Feedback :

We continue working on our fonts digitisation from A-Z & punctuations (. , ! #). 

Week 11

General Feedback :

The digitised fonts look clean and consistent. Overall, the letterforms are clear and well-shaped.

Specific Feedback :

The outlines are smooth, the proportions look accurate, and the stroke transitions are consistent. Everything is ready for the next steps in FontLab. 

Week 12

General Feedback :

I have inserted and exported my font (Root Box) from FontLab7 to Font Book, and I applied it to several poster designs with caption "LIFE IS BEAUTIFUL! WALK AND SEE THE WORLD." It is focused on a motivational message, but it did not match the typographic direction expected for the project. 

Specific Feedback :

My posters carried a positive theme, but Ms. Vitiyaa said the phrase I used was more lifestyle-oriented than typographic. Since the feedback highlighted the need for a phrase that relates to design or typography, I now need to rethink and adjust the caption to better fit the direction of the project. 

Week 13

General Feedback :

Layout 3 has been approved by Ms. Vitiyaa and is ready for final submission.

Specific Feedback :

Layout 3 had been approved and met the project requirements with no major revisions needed. Ready for final submission.

Week 14

# Final Check

# Done Submission

General Feedback :

Submit Task 3 & Task 4, update it on google sheet, and E-portfolio.

Specific Feedback :

No feedback. 

<back to top>

---

Reflections

1) Experiences

Throughout Task 3 - Type Design and Communication, I went through the full process of developing my own typeface, which I named “Root Box”. From researching existing fonts to sketching initial letterforms, I gained firsthand experience in how a typeface grows from simple drawings into a complete system. Digitising the sketches in Adobe Illustrator and refining them in FontLab7 required precision and patience, especially when adjusting outlines, and spacing. Working with my own font made the process more meaningful because I could see my concept slowly taking shape via applying in a final poster layout. The experience taught me how technical type design really is, beyond just drawing attractive shapes.

At the same time, the creative process of exploring different letterforms was enjoyable. Sketching multiple ideas allowed me to understand what kind of personality I wanted the font to have. Even though some parts were challenging, especially when cleaning up paths and adjusting kerning, the overall experience was rewarding. Seeing my hand-drawn letters transform into a functional digital typeface gave me a strong sense of achievement.

2) Observations

Through careful observation of existing typefaces, I noticed how subtle variations in letter anatomy can significantly impact readability and style. For example, the oval shape of the letter “o” and the contrast between thick and thin strokes contribute to a typeface’s personality and rhythm.

During sketch exploration, I observed that consistency across letterforms is critical. Letters needed to have coherence in stroke weight, proportion, and style in order to work as a collective system rather than individually. Any small inconsistency disrupted the flow of words when typed together.

While digitising, I learned that spacing adjustments like kerning and side bearings are just as important as the visual shape of the letters themselves. Without proper spacing, even well-designed letters can look awkward in text. The detailed work in FontLab7 made me appreciate the precision involved in professional type design. 

3) Findings

I found that the type design process is iterative and requires both analytical thinking and creative judgment. Observation and refinement at each stage, including research, sketching, digitisation, and poster design are necessary to produce a cohesive typeface. 

Another finding was that practical skills, such as using shape builder tools, outline strokes, and side-bearing are deeply connected to theoretical understanding like shape harmony and visual balance. Combining these aspects strengthened my understanding of how type conveys meaning visually. 

Finally, this task helped me appreciate typography not just as letter shapes but as a system of communication. The design and spacing of letters influence how a message is perceived, and this awareness will guide me in future typography projects.

<back to top>

---

Further Readings

Book title : 

Designing with Type : The Essential Guide to Typography

Author : 

James Craig and Irene Korol Scala

Abstract :

Designing with Type is a comprehensive introduction to the fundamentals of typography. It explains the anatomy of type, classification of typefaces, principles of legibility and readability, and essential practices for effective typographic composition. The book breaks down core concepts and demonstrates how typography functions in real design contexts, using clear examples and visual illustrations to support learning.

How it relates to my work :

This book directly supports the key stages of my type design project, from understanding letter anatomy and spacing to applying type in communication design. Since my task involved creating own font "Root Box" and using it in poster design, the book’s explanation of type fundamentals and layout principles connects with both technical process, digitising in FontLab7 and visual communication outcomes. 

Key takeaways :

- type anatomy and classification helps me understand how letter structures and proportions work together

- legibility and readability shows how spacing and side bearing affect how people read text, useful for refining Root Box in FontLab7

- typographic practice provides practical tips for using type effectively in layouts, supporting my poster design

- real examples and visual case studies make the concepts clearer and help me reflect on my own typographic decisions

<back to top>

---

--> Press Link to (Final Compilation & Reflection)