10/11/2025 - 15/12/2025 (Week 8 - Week 13)
Cher Pei Ying (0389055)
Typography
Task 3: Type Design and Communication
TABLE OF CONTENTS
1.
Instructions
1.1
Letter Dissection
1.2
Font Design
1.2.1
Research
1.2.2
Sketches
1.2.3
Observations
1.2.4
Digital Work
1.2.5
Font Lab
1.2.6 Font Tester & Download Link
1.2.7 Poster
2.
Feedback
3.
Reflection
4.
Further Reading
1. INSTRUCTIONS
1.1 Letter Dissection
For this part of the task, we are required to select a preferred font from
the 10 fonts provided, which are Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC
Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std and
Univers LT Std. By using the following letters "H","o","g" and "b", a detail
dissection of the letters in Adobe Illustrator had to be
created. The artboard size should be set to1000pt x 1000pt.
I chose to do Bembo Std:
Figure 1.1.1 Letter Dissection of Bembo Std "H"
My observations:
1. The top and bottom serifs are not the same length (bottom is longer)
2. The top left serif extends to align visually with the right side of the
bottom serif
3. The crossbar does not sit on the midpoint of the letter, it is slightly
moved down
4. The brackets connect with the serifs with a curve, not 90 degree angle
5. The vertical strokes does not connect at the midpoint of the serifs
Figure 1.1.2 Letter Dissection of Bembo Std "o"
My observations:
1. It is not a perfect circle
2. The bowl is slightly angled, giving the letter a slight tilt feeling
3. The top and bottom strokes are placed diagonally and are thinner than the
side strokes
Figure 1.1.3 Letter Dissection of Bembo Std "g"
My observations:
1. The bowl is slightly angled, giving the letter a slight tilt feeling
2. The ear is flared bigger at the end and moves slightly upwards
3. The stroke at the two necks are thin and flares into bigger strokes
4. The loop is not symmetrical
Figure 1.1.4 Letter Dissection of Bembo Std "b"
My observations:
1. The ascender exceeds the x-height
2. The bowl is not a perfect circle and is angled
3. The stroke flares into a thinner stroke when connecting to the stem
4. The stem connects with a curve
5. There is no spur
1.2 Font Design
This part of the task is to design our own font using Font Lab. Before
getting into designing, some research had to be done.
1.2.1 Research
I went into Adobe Illustrator and looked through all the fonts with using
both the lowercase and uppercase letters for "h", "o", "g" and
"b". I also searched online for more references, these are the fonts I liked:
Figure 1.2.1.1 Fonts for reference
I chose three styles of letters, the first being fonts that are more
handwritten, the second are non-serif fonts and the third are bold sans
serifs.
Links to references searched online (according to order)
1.2.2 Sketches
I did some sketches with two methods: drawing with pencil and writing with
markers.
Figure 1.2.2.1 Design Sketches 1
Figure 1.2.2.2 Design Sketches 2
After receiving feedback, I will use #3 and #15 to create my font.
1.2.3 Observations
Before creating my font, I looked for the existing font closest to my
sketch to use for reference, and created letter dissection for letters "h"
and "o" for observation. I used Agency FB:
Figure 1.2.3.1 Letter Dissection of Agency FB "h"
Figure 1.2.3.2 Letter Dissection of Agency FB "o"
1.2.4 Digital Work
First, I drew out different strokes with different weights and lengths
to conduct the letters.
Figure 1.2.4.1 Attempt 1 basic strokes
After that, I combined the strokes into letters and punctuations
(o l e d s n c h t i g , . !) :
Figure 1.2.4.2 Attempt 1 letter designs
The strokes are not combined, so I had to combine them together.
Figure 1.2.4.3 Attempt 1 strokes
Figure 1.2.4.4 Attempt 1 combined strokes
Then, I rounded each edge of the letters to around 17pt.
Figure 1.2.4.5 Attempt 1 rounding edges
This is the outcome:
Figure 1.2.4.6 Attempt 1 letter design outcome
After receiving feedback, I am advised to explore and study more on existing
fonts or letters as my work can be better. I removed the curves on the edges
and cut off some of the strokes diagonally. It looks more like calligraphy
fonts now.
Figure 1.2.4.7 Attempt 2 letter design
My feedback upon this was to have consistency on the edges for letters
"h" and "n". The letter "e", "s", "t" and "!" was also modified with the
help of my lecturer. The "#" should be changed too.
Figure 1.2.4.8 Attempt 2 adjustments
Before combining the strokes into one complete letter, I checked if they
were correctly placed and aligned, and no edges were poking out.
Figure 1.2.4.9 Attempt 2 checking
Figure 1.2.4.10 Attempt 2 combined strokes
Figure 1.2.4.11 Attempt 2 letter design outcome
After last review from my lecturer, the "#" has to be bigger, at least
reaching the cap height.
Figure 1.2.4.12 Attempt 2 letter design final outcome
1.2.5 Font Lab
Before going into Font Lab, I have to measure the height of the descender
line, cap line, median line, base line and descender line respectively.
These are the informations:
Figure 1.2.5.1 Letter design heights
Measurements
- Ascender line: 776pt
- Cap line: 690pt
- Median line: 366pt
- Descender line: -182pt
Then, I have to name my font. I named it Caby and set the weight class to
regular.
Figure 1.2.5.2 Naming font
Next is to apply the measurements into Font Lab.
Figure 1.2.5.3 Measurements 1
Figure 1.2.5.4 Measurements 2
Then, I inserted all the letters I designed one by one into Font Lab.
Figure 1.2.5.5 Inserting letters
After that, I had to set the right and left side-bearings for each
letter. A chart was given for reference, I followed it to make adjustments.
Figure 1.2.5.6 Side bearing reference chart
Figure 1.2.5.7 Side-bearing adjustments
After that, I applied kerning to some of the letters to make the space
between letters more even.
Figure 1.2.5.8 Kerning adjustments
After receiving feedback, there is too much kerning applied, that should be
avoided. Therefore the amount of side bearings needed to be adjusted.
Figure 1.2.5.9 Final side bearing adjustments
The original hashtag symbol was too wide too, I corrected it in
Adobe Illustrator.
Figure 1.2.5.10 Adjustment for hashtag symbol in Adobe Illustrator
Before exporting my font for download, I added a font note with using
Chat GPT and refining the sentences myself.
Figure 1.2.5.11 Font note reference
Figure 1.2.5.12 Font note
This is the final outcome of my font Caby:
Figure 1.2.5.13 Final Outcome of Caby
1.2.6 Font Tester & Download Link
Here is a font tester to test out Caby:
Click here to download Caby:
1.2.7 Poster
After completing work in Font Lab, the next step is to create a black and
white poster in Adobe Illustrator with the designed font.
My first attempt was to use "the design school" with the word "design"
placed diagonally and with other words continuing its first letter. I tried
it out in both white and black versions.
1.2.7.1 First attempt on poster design
1.2.7.2 Outcome of first attempt on poster design
The lecturer reviewed my work and suggested to try out more designs
with different words and sentences. i tried out a couple more designs:
1.2.7.3 Additional attempts on poster design
I like how the third poster looked, so I went with that.
1.2.7.4 Outcome of third attempt on poster design
After receiving feedback from lecturer, the exclamation mark should reach
the ascender line, so I adjusted it in Adobe Illustrator and also corrected
it in my poster.
1.2.7.5 Adjustment on exclamation mark
1.2.7.6 Final adjustments of poster design in Adobe Illustrator
1.2.7.7 Final outcome of poster design
Week 8
General Feedback
Do research before designing letterforms and look for references, input
knowledge before creating output.
Specific Feedback
The thickness of the letter strokes has to be consistent.
Week 9
General Feedback
Check feedback upon E-portfolio in Google Sheets and make corrections,
make sure all the files embedded are accessible and always update
E-portfolio constantly for each task.
Specific Feedback
I am advised to work on digital explorations. Further research and
exploration will give better options for my work. Studying fonts or
letters that exist and then understanding the strength and weaknesses
from my own study is important. After getting that knowledge I should
apply it on my work.
Week 10
General Feedback:
Always check if the strokes are aligned properly. Also make sure the
artboard is 1000pt before continuing work in Font Lab.
Specific Feedback:
Mr. Vinod suggested me to go with the second design I created and also
helped me with the letter “e”, "s", "t" and "!". The letter "h" and "n"
should have consistent strokes for both left and right and the "#" still
needs refining.
Week 11
General Feedback:
Refer to the tutorial videos provided to conduct work in Font Lab and
always read the instructions in Microsoft Teams.
Specific Feedback:
The letters I design have good consistency, but the hashtag symbol
should be bigger, at least reaching the cap line, or it can be bigger
than that. Refer to the table provided in Microsoft Teams to continue
work in Font Lab and start with the letter "o" and "n" first.
Week 12
General Feedback:
Avoid applying too much kerning for the letters.
Specific Feedback:
There is too much amount of kerning done, Mr. Vinod led me to correct the
left and right bearings for each letter to achieve a better result. Besides,
the hashtag symbol should be corrected as it is too wide.
Week 13
General Feedback:
Check all the e-portfolio posts and make sure all the embed files are
accessible. Complete the 4th post with final compilations and reflections
for all the tasks. For the poster, make sure all the text has the same font
size and the byline is in the correct font required.
Specific Feedback:
The exclamation mark should reach the ascender line.
<back to top>
3. REFLECTION
Experience
I've always wanted to customize my own font, I had a chance to do that for
this task so it was quite fun and interesting. Studying fonts and implying
their characteristics into my own design was a bit hard because I had to
limit myself to not copy the whole font and to add my own design and changes
into the design.
Observations
There are so many customized font already existing, the font I created may
already been designed before, but there are still minor differences and
characteristics in every font design, from how it is constructed to the
amount of side bearings and kernings, that's what makes every font special
in their own way.
Findings
The most commonly used fonts are very well designed and constructed, I can
see why they are so widely used in type. There is still a lot for me to
learn and apply to create good fonts that look cohesive, readable and balanced across different sizes and contexts.
Just My Type: A Book about Fonts by Simon Garfield
Figure 4.1 Book Cover of Just My Type: A Book about Fonts by Simon Garfield
Figure 4.2 Page 175 of Just My Type: A Book about Fonts by Simon Garfield
After reading this page of the book, I understand why the lowercase
"g" is one of the most revealing letters in typeface design. Designers
often express a font’s personality most clearly through this letter and it
gives out the most characteristics among all the letters. That being said,
the letter "g" is the key letter for identifying and comparing typefaces.
Rather than starting with simpler letters, many important stylistic
decisions are resolved in how the "g" is shaped.
Comments
Post a Comment