TYPOGRAPHY - TASK 3: TYPE DESIGN AND COMMUNICATION

TYPOGRAPHY - TASK 3: TYPE DESIGN AND COMMUNICATION

10/11/2025 - 21/11/2025 (Week 8 - Week 9)
Nur Adila binti Nazary / 0377352
Typography / Bachelor in Design (Honours) in Creative Media / Taylor's University
Task 3

TABLE OF CONTENTS

1) Lecture
2) Instructions
3) Process work
4) Feedback
5) Reflection
6) Further reading

LECTURE

All lecture notes are done in Task 1.

INSTRUCTION

PROCESS WORK
TASK 3 EXERCISE 1: DISSECTION 
For this exercise, we have to dissect a set of letters which are H, o, g and b using only basics shapes such as circles and straight lines. The purpose was to break down the letterforms into their geometric shape/structure. We were only allowed to use the 10 fonts provided by the lecturer.

RESEARCH
Based on our lecture on Week 2 (Typo_2_Basics) we had to learn about the 5 lines in typography which are:

1) Baseline - the line where all text rest.
2) Cap line - It is the height of the uppercase letter measured from the baseline.
3) X height - height of the lowercase letters measured from the baseline.
4) Ascender line - the part of the lowercase letters that extend ABOVE the x height.
5) Descender line - the part of the lowercase that drop below the baseline.

Figure 1. Lines in Typography

IDEATION
The first thing we had to do was to choose the fonts, I chose:
1) H - Univers LT Std 55 Roman
2) o - Univers LT Std 49 Light Ultra Condensed
3) g - Univers LT Std 59 Ultra Condensed
4) b - Futura Std Medium

From there, we needed to do the lines.

Figure 2. Added guides to H

Figure 3. Added guides to o

Figure 4. Added guides to g

Figure 5. Added guides to b

The Dissection Process
The task required us to trace the structure of the chosen letters. By doing this, we can study the proportions and the construction of each letter which is important when we are designing our own fonts later on.

Figure 6. Adding dissection red lines for H

We also needed to do the outline for the inside of the letters

Figure 7. Adding dissection red circles for o

We have to do the same for all of the letters.

FINISHED DISSECTION FOR ALL LETTERS, JPEG:

Figure 8. Dissection of H

Figure 9. Dissection of o

Figure 10. Dissection of g

Figure 11. Dissection of b

FINISHED DISECTION FOR ALL LETTERS, PDF:

TASK 3 EXERCISE 2: TYPE DESIGN AND COMMUNICATION
For this task, we had to design our own typeface based on any theme that we found interesting. The main rule was that readability must remain as the top priority.

RESEARCH
From this instruction, I decided to come out with 3 different concepts which are:
1) Tile motifs
2) Cute fuzzy monsters
3) Ocean / Waves

I explored each concept through research and sketches, but in the end we only needed to fully develop one of them.

1) Tile motifs
Tile motifs caught my attention because of their curves, rounded forms and floral like patterns. These motifs usually appear in Asian household items such as vases, tiles, plates and mugs.

Figure 12. Motif tiles image reference #1

Figure 13. Motif tiles image reference #2

Figure 14. Motif tiles image reference #3

Figure 15. Typeface inspiration image reference #4

2) Cute fuzzy monsters
This concept relates to my usual art style, which is towards to cute and cartoon like designs. Working with fuzzy monsters is enjoyable and more natural for me. This style also maintains readability because the letters are based on full bodied monsters shapes

Figure 16. Cartoon monster image reference #1

Figure 17. Cartoon monster image reference #2

Figure 18. Cartoon monster image reference #3

Figure 19. Typeface inspiration image reference #4

3) Ocean / Wave
For the ocean concept, I have always been interested in how waves curve and how bubbles form as the crash onto the shore. The fluidity makes them very adaptable for unique font styles.

Figure 20. Waves image reference #1

Figure 21. Waves image reference #2

Figure 22. Waves image reference #3

Figure 23. Typeface inspiration image reference #4

IDEATION
Before sketching, I created a template grid to maintain consistency for all of the letters. The lecturer reminded us that maintaining baseline, x height, cap height, ascenders, descenders and stroke thickness is very important when designing typefaces.

To do this, I designed a 10 x 10 grid, divided into two rectangles:
1) The larger rectangle (2 cubes for all of its width). The height is 9 cubes and the length is 6 cubes
2) The smaller rectangle, its in the middle / center of it, (2 cubes for all of its width). The height is 5 cubes. 

Figure 24. Box typeface diagram

The only part where i would design the letters would be in the area of bigger rectangle.

Figure 25. Box typeface diagram example

Note: Only curves were allowed to be slightly extended beyond the grid. Straight horizontal and vertical lines had to be strictly inside the box.

We had to design the letters O, D, N, C and G for each concept first. Using my research as reference, I sketch out all three concepts while following the grid structure.

1) Tile Motifs
INSPIRATIONS:

Figure 26. Typeface inspiration image reference #1

Figure 27. Motif tile image reference #2

Figure 28. Motif tile image reference #3

MY IDEAS: 
Use the rounded shapes and curved lines to make somewhat like a floral style motif design. Try to incorporate the lily like forms to the design, and add dots for consistency on all of the letters. Add an extra stroke towards the edge so it gives off a calligraphy style.

MY SKETCHES:
Based on the inspirations, the sketches were designed using smooth rounded shapes and flowing curves to create a floral inspired style. Elements such as lily like forms and circular dots were added into each letter to maintain the consistency for all of the letters. The extra stroke at the edge was also added influenced by calligraphy style. All of the letters gives off elegant feel that shows the traditional tile motif patterns.

Figure 25. Motif tile sketch with no box diagram

Figure 29. Motif tile sketch with box diagram

COMMENTS FROM MR MAX:
All are consistent. Try to think another different style of the letter G to further explore. Then show back to Mr. Max to choose which G is nicer.

2) Cute fuzzy monsters
INSPIRATIONS:

Figure 30. Typeface inspiration image reference #1

Figure 31. Cartoon monster image reference #2

Figure 32. Cartoon monster image reference #3

MY IDEAS: 
All letters should have a fuzzy monster style. Add extra fur details on the letters. Make sure that the letters are thick in width so that we can add faces on the letters and most importantly because of the readability. Keep the style consistent but add some monsters traits like teeth and horns and all to make the monsters somewhat different from each other.

MY SKETCHES:
For the fuzzy monster concept, each letter was sketched with a thick, rounded structure to have some space for the face and the furry textures. The letters have some small fur strokes to show the fuzziness appearance. Each monster has a different trait, like the teeth, horns and sharp claws but still keep the consistent style on all of the letters. The overall design is meant to be cute and playful but still maintain the readability of the letter.

Figure 33. Cartoon monster sketch with no box diagram

Figure 34. Cartoon monster sketch with box diagram

COMMENTS FROM MR MAX:
Cute and easy to read. Not much to comment.

3) Ocean / Waves
INSPIRATIONS:

Figure 35. Typeface inspiration image reference #1

Figure 36. Bubble waves image reference #2

Figure 37. Waves image reference #3

MY IDEAS: 
Use the wave aspect towards one of the sides of the letters. Add a tiny circle like bubble as the consistent style. Make sure to have lines and a closed shape for all. Add some curved lines to give that flap to show.

MY SKETCHES:
For the ocean inspired concept, the sketches has some wave like curves flowing on one side of each letter to show the motion of the water. Small circular bubbles were consistently added as for the design on all of the letters. Curved lines and flaps are used to create movement similar like waves curling. 

Figure 38. Wave sketch with no box diagram

Figure 39. Wave sketch with box diagram

COMMENTS FROM MR MAX:
Not consistent since the letter D has the one random line/stroke, while the others has fully enclosed shape.
 
CHOSEN CONCEPT AND AFTER FEEDBACKS:
In the end, Tile Motif was the chosen concept, and Mr. Max asked me to design for the other letters.

Figure 40. Completed motif tile sketch with no box diagram

Figure 41. Completed motif tile sketch with box diagram

COMMENTS FROM MR MAX:
Readability is there, for G Mr. Max chose the 1 one. Make sure that the end strokes are the same for all of the letters for consistency. Now time to digitize.

The Digitization Process

Figure 42. Typeface sizing

The first part is to do the sizing of the letters. All of the letters MUST have the same sizing so that there consistency throughout the whole letters. For the Cap line I've made it 500 px and for the Width is 325.9574 px. Then, I added the guides following the sizing I've made.

Figure 43. Pen tool stroke sizing

When digitizing, I used the Pen Tool and used the sizing of 21 pt. Since my type design has no sharp corners, I used Round Cap and Round Join for the Cap and Corner. I also used the Shape Tool, Ellipse for the circles in my type design.

AFTER DIGITIZATION:

Figure 44. Completed digitization view #1

Figure 45. Completed digitization view #2

INFO
Stroke size: 21 pt
Width Profile: Uniform
Shape: Used Ellipse to Uniform Circle
Colour: Black

All of the letters are converted into a shape, by changing the path into outline stroke then shape build it and then group all of it together.

FONTLAB 7
After digitizing the letters into Adobe Illustrator, we had to move all of  letters into FontLab 7. Some of the letters were kerned to visually maintain consistent spacing.

Figure 46. Fontlab 7 with metrics table

POSTER
For the poster, we had to use all of the letters and the punctuation (O L E D S N C H T I G , . ! #) to make a sentence and then create a poster from it.

I used AI to create the sentence and it came out with this #CLOSING NIGHT. LED LIGHTS, ON!

From there, I created a poster that somewhat resembles the meaning of the sentence. I tried to create lights and a flashlight to fit with the sentence.

Figure 47. Background poster design

Then I added the sentence using my font, Motif Regular. At the bottom left corner, I put my font name, my full name and this years date. In the end, it turned out like this.

Figure 48. Poster design with typeface

FINAL OUTCOME

TASK 3 EXERCISE 2: TYPE DESIGN AND COMMUNICATION, TTF:

https://drive.google.com/file/d/1hRMpqpj5av-7yKZEJ-9DJryXLL8wL2LJ/view?usp=sharing

TASK 3 EXERCISE 2: TYPE CONSTRUCTION, JPEG:

TASK 3 EXERCISE 2: TYPE CONSTRUCTION, PDF:



TASK 3 EXERCISE 2: TYPE DESIGN AND COMMUNICATION POSTER, JPEG:

TASK 3 EXERCISE 2: TYPE DESIGN AND COMMUNICATION POSTER, PDF:

FEEDBACK
Week 8:
General feedback: Mr. Max introduce us about Task 3 on what we have to do. He told us the specific elements that we needed in our Task 3 and that the counting of the boxes in the grid matters a lot. He is searching for consistency in our work. We have to start on our research for this week and send it to him for feedbacks.

Week 9:
General feedback: Mr. Max mentioned that we need to do an exercise which is called dissection and then we need to add that into our e portfolio. He showed us the steps on how to do the exercise properly. We need to finish this exercise before next week Thursday before 12pm.
Specific feedback: Mr. Max approved my sketches for the type design which is following a motif tile theme. He asked me to continue and design for the other letters. The only letter design I needed to change was the letter G since it looked like the design for C. When I'm finished with the others, I have to send it to him for more feedbacks.

Week 10:
General feedback: Mr. Max showed us on how to digitize our letters one by one in Adobe Illustrator. He gave us a couple of techniques to try out. Once we are done we showed our works to him. Try to finish up everything so that we can continue to Font Lab next week.
Specific feedback: The digitization is good, just need to fix the stroke towards at the end of the letters to make it consistent through out the whole letters.

Week 11:
General feedback: Mr. Max gave us a tutorial on how to put our digitized letters into FontLab. He showed us on how to kern the letters if needed and how to export the font and download it. He also told us a list of the things we need to put in our blogs.
Specific feedback: Mr. Max told me to type down my letters into a sentence for the poster then send to him for approval.

REFLECTION
Experience
This assignment was really a rollercoaster. The first task, which focused on dissection which was unexpectedly challenging. Even though the instructions were clear, I kept redoing it because the lecturer reminded us to minimize the number of circles and lines. That made me realize how detailed the process actually is. I used to think font were perfectly symmetrical, but when you zoom in and break them apart, you can see how uneven the letterforms are.

The second task designing my own fonts, was the most enjoyable part. Since we were allowed to use any theme, I felt like I had a lot of freedom to explore creative ideas. 
However, I also learned that type design needs a lot of control and consistency. Even a tiny change to one letter can make the whole set look mismatched. Everything had to be digitized and typed out properly, I had to really pay attention to every small detail. Overall, the assignment helped me understand how much thought and attention to detail goes to creating typefaces and even though it was though, I really enjoyed the process.

Observations
Throughout this whole assignment, I noticed how detailed type design is. Small adjustments like the curve of a stroke and the spacing between the letters  can really change how the font look. I also realized how important consistency is, every letter needs to follow the same style so the typeface look like its in the same family. Working in Illustrator made me more aware how useful the guides and the grids tools are for keeping everything neat and balanced.

Findings
From this assignment, I learned that typography is both creative and very technical. Designing a font is not just about the theme or the look, but also making sure everything letter is readable and visually connected to the others. I also found that planning is very important, especially when moving the sketches into the final digital format. This task helped me appreciate how much precision goes into designing a typeface. With this, it strengthen my attention to detail.

FURTHER READING
Extra reading:
The Anatomy of Typography, Letterforms analyzed

Back then Typography comes from handwriting like reed pen, brush and chisel to shape the thick thin stroke patterns. The Roman capital letters were originally based on simple geometric shapes such as square, circle and triangle which give them the clean structure

Figure 46. Reed pen

Figure 47. Chisel

Figure 48. Roman Capital example #1

Figure 49. Roman Capital example #2

Typography also uses the invisible guidelines to keep everything aligned.
These are the guidelines:
- Baseline – where letters sit
- x-height – body height of lowercase letters
- Capline – top of capital letters

There are also anatomy terms that help to describe how the letters are built. Each stroke and each part of the letterform has its name for it which are:
- Stem – main vertical/diagonal stroke

Figure 50. Stem diagram

- Serif – small finishing stroke

Figure 51. Serifs diagram

- Counter – enclosed space (e, o, p)

Figure 52. Counter diagram

- Bowl – curved stroke enclosing a counter

Figure 53. Bowl diagram

- Ascender/Descender – strokes above/below the x-height

Figure 54. Ascender and Descender diagram

- Terminal – end of a stroke without a serif

Figure 55. Terminal diagram

The letterforms are also depend on proportions. The contrast between thick and thin strokes affects the overall style. Usually a larger x-height usually makes a text easier to read. The width of the letter can also change too (condensed or expanded) can create a very different style.

When designing a text, designers also make optical corrections so that the letters look visually nicer, even if its not perfect. 

Figure 56. Optical correction example

My comments:
I find its interesting how much construction goes into a letterform. Even the smallest details can really change how the readability is or how balance a typeface looks and feels. This also shows that typography isn't just about making a text look pretty, but about making it clear and easy to read.