Typography - Task 3: Type Design and Communication

Week 8 – Week 13

MOO RENEE / 0359595 / Bachelor of Interactive Spatial Design 
Typography 

Task 3: Type Design and Communication

• 1. Assignment Instruction 
• Assignment / Task Brief

• 2. Work process
• 2.1 Research
• 2.2 Ideation / Exploration
• 2.3 Develop Process 
• 2.4 Deconstruction 
• 2.5 Digitalize Process
• 2.6 FontLab process
• 2.7 Poster Process

• 3. Final Outcome
• 4. Feedback 
• 5. Reflection  
• 6. Future Reading

1. ASSIGNMENT INSTRUCTION

Figure 1.1 MIB - MODULE INFORMATION BOOKLET

In this task, we are required to design a limited set of alphabets. The process begins by selecting an existing font that aligns with our desired design direction. After analyzing its anatomy, we develop rough sketches and explore multiple design options. Once approved, we digitize our sketches using Adobe Illustrator and later refine them in FontLab.

Design For the letter/ symbol 

• A E P Y I T G D M O B  or  a e p y i t g d m o b  and punctuation: , . ! #

2. WORK PROCESS

2.1 Research

Font Research

I began this project by researching various existing fonts online to gather inspiration and understand different typographic styles.

Figure 2.1.1 Font Research 

After some consideration, I decided that I wanted to incorporate visual elements inspired by eyes, waves, or shapes/volume into my design. I conducted further visual research on these elements but focused more deeply on eye compared to the others.

Eyes Research

Figure 2.1.2 Eye Research

2.2 Ideation / Exploration

I explored four different sketches focusing on the letters 'a,' 't,' 'g,' and 'b' at first :

Sketch 01: Focused on experimenting with varying thicknesses within the letterforms, combining both thick and thin elements.

Sketch 02: Incorporated wave-like forms with heavier circular endings to create a sense of visual weight.

Sketch 03: Explored using geometric shapes on one half of the letters, creating a contrast between structured and organic forms. The upper sections featured irregular, melting, droplet-like effects.

Figure 2.2.1 Sketch 1/2/3

Sketch 04: Inspired by the element of eyes, using the shape of the word itself to create frames that look like eye shapes. I added a circle to present the eyeball in the middle. On the right side, I applied the same idea but made the word look sharper, adding some thin spaces in the thick parts. The eyeball touches the letter, while on the left side it’s separate not touching the letter itself (except for the one on the bottom left).

Figure 2.2.2 Sketch 4

With all four sketches done, the lecturer selected the two below and told me to further explore them. The small letters are preferred over the big capital letters because the big capital letters don't look as good. Also, for the letter "T," I need to make some changes since it doesn’t blend well with the eyeball, and the thickness is also not quite right.

Figure 2.2.3 Selected Sketch

2.3 Develop Process

Based on the selected sketch, I have developed several design variations on my iPad. Below is the exploration:

Figure 2.3.1 Eye-Inspired Version 1 Sketch

Figure 2.3.2 Eye-Inspired Version 2 Sketch

Figure 2.3.3 Eye-Inspired Version 3 Sketch

Figure 2.3.4 Moon-Inspired Sketch

I showed these sketches to the lecturer, and he suggested that the Moon-inspired concept would be stronger and more effective. At the same time, he pointed out that the letters y, i, t, and m need to be redesigned, as they lack consistency within the set.

Figure 2.3.5 Initial Sketch for Letters y, i, t, m

Among these, the letter y is acceptable, but i, t, and m require further exploration and refinement.

Figure 2.3.6 Second Version Sketch for i, t, and m

T and M Exploration

The previous versions of the letters T and M were not quite acceptable, so I explored further variations of both letters.

Figure 2.3.7 Third Sketch For t and m (exploration)

In this sketch, I circled T4 and T5 in red, as well as M3 and M5, which were selected for potential digitization. These versions will be digitalized to test which ones match best with the rest of the letter set.

• Symbol Exploration

Figure 2.3.8 Symbol Sketch (. , ! #)

For the symbol designs, I explored various styles and created multiple versions. After thorough sketching, I selected the following for refinement:

• Comma: version 3
• Period (dot): version 1
• Exclamation mark (!): version 5 (with some adjustments needed)
• Hashtag (#): the one on the far right

These selected versions will be further developed and digitalized to test their compatibility with the letterforms.

Final Sketches (Overview)

Figure 2.3.9 Final Sketch

2.4 Deconstruction 

Before starting the digitization process, the lecturer taught us how to deconstruct letters using Adobe Illustrator. The lesson focused on how we can break down and analyze the structure of individual letters to better understand their form and design.

Demonstration Outcome:

• Deconstruction of Futura Std (Book) letters a, e, and g

Figure 2.4.1 Deconstruction In Adobe Illustrator 

Figure 2.4.2 Deconstruction Letter

2.5 Digitalize Process

To start the digitalization process, I used the deconstruction method taught in class. This involved using basic shapes and the Shape Builder Tool. Below is an example of digitalizing some letters:

Figure 2.5.1 Creating letter outlines using the deconstruction method

For the letters T and M, I created two versions, as mentioned earlier, to determine which one fits best with the other letters.

Figure 2.5.2 Digitalizing the letters T and M (two versions)

Once all the outlines were completed, I filled them with black using the Live Paint Bucket Tool and checked the overall details.

Figure 2.5.3 First digitalized version

Figure 2.5.4 Zoomed-in view of the letters (noticeable spacing differences)

In this version, the spacing between the circular and straight elements varied, so I needed to readjust them to ensure a more neat and consistent look.

To achieve this, I created three reference circles:

• The outer circle defined where the straight line should end.
• The middle circle outlined the main shape of the line.
• The innermost circle defined the thickness of the line.

Figure 2.5.5 Adjusting the gaps between elements

Figure 2.5.6 Example of spacing between shapes (the gap)

Figure 2.5.7 Example of spacing between shapes (the gap) - For Symbol

After completing the initial digital version, I presented my work to the lecturer for feedback. He suggested that the letters 'e', 't', 'i' and the symbol '#' needed some improvements, as they didn’t fully align with the overall style of the font family. Based on this feedback, I made several adjustments:

Figure 2.5.8 Left: original version; Right: improved version

For the letter 'e', the original design didn’t visually pair well with the other letters—particularly because of its tail and structure. In the revised version, I added a straight horizontal stroke to the middle bar and simplified the bottom curve into a thinner line, which made it look more balanced and cohesive with the rest of the font.

Figure 2.5.9 From left to right (rightmost is the final version)

For the letter 't', the primary change was to enlarge the moon-shaped top element and slightly rotate it. This made the shape more prominent and consistent with the visual language used in other letters.

  

Figure 2.5.10  letter "i" Adjustment (left : original , Right: After Adjustment)

For the letter 'i' i only did some slight adjustments . Since after further consultation, the lecturer suggested that when all the letters were assembled together, 'i' appeared too short compared to the others. Therefore, I only extended it slightly to improve visual balance and maintain consistency.

Figure 2.5.11 From right to left (leftmost is the final version)

The symbol '#' took the most time to refine. The initial design (far right) lacked consistency with the rest of the typeface. Based on the lecturer’s suggestion, I incorporated the signature moon shape as part of the intersecting strokes. I also layered the moon shape in front to create a visual hierarchy, which better aligned with the typeface’s unique stylistic elements.

•  Final Outcome For Digitalize 

Figure 2.5.12 Final Outcome

2.6 FontLab Process

After completing the digitalization process, I proceeded to set up my font in FontLab. This process involved creating a new font file, importing the finalized glyphs, and organizing them in the Font Library for further refinement and adjustments.

Figure 2.6.1 & 2.6.2 Setting Up FontLab

Once the setup was complete, I began importing each letter into FontLab one by one. The screenshot below shows the Font Library in FontLab, where all the characters are arranged and prepared for refinement.

Figure 2.6.3 Font Library Overview

After importing all the letters in to FontLab, I tested the spacing and kerning between characters using the reference graph provided by the lecturer. This step allowed me to adjust the letter spacing and improve visual balance and readability.

Figure 2.6.4 Testing Kerning and Letter Spacing

With all the the initial spacing applied, I manually adjusted the kerning between specific letter pairs that appeared either too close or too far apart, ensuring a more consistent and balanced appearance across the typeface.

Figure 2.6.5 Adjusting Kerning Manually

Lastly , The screenshot below shows the overall progress of the font after making the kerning adjustments, demonstrating the improved flow and letter spacing.

Figure 2.6.6 Overall Progress (checking Kerning Between Letters)

2.7 Poster Process

With the font created in FontLab and installed on my laptop, the sentence for my poster will be:

• "Pay it, be a good aim."

Based on this, I designed several different poster layouts:

Figure 2.7.1 Exploration of Poster Layouts (1/2)

Figure 2.7.2 Exploration of Poster Layouts (2/2)

After reviewing these poster ideas, the lecturer suggested that the second poster from Figure 2.7.2 would be the better choice. Therefore, I used that design as my final poster.

3.FINAL OUTCOME

Font details :

• x-height : 500pt
• ascender : 878pt
• descender : -279pt

Google Drive Link For All - CLICK HERE

Link to download font - CLICK HERE

Figure 3.1 Screen Grab of FontLab process (side-bearings)

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

Figure 3.3 Final Type construction Ai in PDF

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

Figure 3.5 Final PDF A4 black & white poster

4. FEEDBACK

Week 8 - This week we started on Assignment 3 by sketching the font. I have sketched four different fonts and did some research (font inspiration: shapes, waves, eyes).

Specific Feedback:

• I can go forward with the "eyes" one, but the small capital "t" cannot.
• For the other one, also, the letter "t" cannot.

Week 9 - Based on last week’s sketches, I have explored all the letters using the two styles that the lecturer approved last week — the "eye" one and the "moon" one. I showed the updated sketches to the lecturer in class this week.

Specific Feedback:

• The letters y, i, t, and m need to be readjusted and redesigned for both styles.
• Use the moon style as the concept is stronger than the "eye" style.

Week 10 - Showing the Sketch for the letters "T" and "M" as well as the symbol. The lecturer selected two sketches for each letter, and I digitized them in Adobe to see which versions looked better. As for the hashtag, it needs more exploration and refinement to improve its design.

Specific Feedback:

• Use T1 and M1 for the final version. Also, try applying digitization to the hashtag to observe its visual impact.
• Adjust the Space Between each shape for all letter make it the same 

Week 11 - Showed all digitized letters to the lecturer and made some changes

Specific Feedback.

• The letters e and t, as well as the symbol #, need to be change with some minor adjustments.
• Once everything is completed, I can start working in FontLab.

Week 12 - Started putting everything into FontLab and adjusting the kerning and other details.

Specific Feedback:

• The letter "i" can be made taller.
• The spacing between "d" and "a" can be wider to match the spacing of other letters.

Week 13 - Working on Task 3 Poster

Specific Feedback:

• Use the middle poster as the final version.

5. REFLECTION

5.1 Experience

For this assignment, designing my own font was a fun and enjoyable experience. Creating each letter individually and then importing them into FontLab to make the font installable and usable for typing was especially interesting. However, throughout the process, there were moments of frustration, particularly when I got stuck on how to design certain letters, such as "t," "m," "i," and the symbol "#"Maintaining consistency throughout these letter was also challenging.

Other than these difficulties, this assignment have provided me with many valuable experiences in font creation. I have learned the key aspects to consider, such as consistency, attention to detail, and the importance of refining each letter carefully. Overall, it was a fun, enjoyable, and meaningful learning experience.

5.2 Observation

Before this assignment, I did not fully realize the importance of elements like ascenders and descenders in font design. I also became more aware of how kerning affects readability even when kerning seems consistent for one pair of letters, it may not work well for others. While adjusting kerning in FontLab, I observed that some letter combinations appeared either too close or too far apart, even if the individual letter spacing was already set. This made me more conscious of how small adjustments impact the overall readability of the typeface.

5.3 Findings 

I found that designing a font is not only time-consuming but also challenging, especially when it comes to adjusting kerning and maintaining consistency throughout the letterforms. Ensuring that each letter fits well within the overall typeface while maintaining a cohesive style required careful thought and revisions. Some elements that worked well for one letter did not always suit others, making consistency a continuous challenge.

6. FURTHER READING 

Figure 5.1 Thinking with Type Book Cover 

BOOK LINK - PDF

• Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students (2nd Edition) — by Ellen Lupton

Thinking with Type by Ellen Lupton is a really useful and engaging book about typography and how it’s used in design. It's written mainly for designers, editors, writers, and students, but honestly, I think anyone working with text can learn something from this book. What I liked most in this book is that it's not just a technical manual—it also explains why type matters and how it will affects the way we communicate using typography.

The book is split into three main parts: Letter, Text, and Grid.

• In the Letter section, the author breaks down the structure and history of letterforms. There’s also a discussion about typefaces (such as serif vs. sans-serif), which I found really helpful in understanding how fonts convey mood and meaning.
• The Text section focuses on how letters function when combined into paragraphs and layouts. Topics like spacing, alignment, kerning, and leading are all covered. I have also took some note of how small adjustments in these areas can significantly improve readability. Made me think differently about how I can format written content—especially online, where attention spans are short.
• The Grid section is about the layout—how we can organize elements on a page using columns, margins, and other structures. Knowing how grids help create visual order and consistency. It also reminded me that sometimes breaking the grid can be powerful, but only when done intentionally.

What stood out to me most is that typography isn’t just decoration—it’s communication. Every typographic choice we make, from font selection to spacing and alignment, affects how the message is received. The author uses real-life examples, quotes, and visual experiments that make the concepts more easy to understand.

Thinking with Type : A Critical Guide for Designers, Writers, Editors, and Students (2nd Edition)

Thinking with Type : A Critical Guide for Designers, Writers, Editors, and Students (2nd Edition)

Thinking with Type : A Critical Guide for Designers, Writers, Editors, and Students (2nd Edition)