Typography - Project 2
Abigail Bea Chong Ka Yee (0333966)
Typography
Project 2 - Font Design
LECTURE NOTES
Lecture 7: Text tracing, kerning and letterspacing
17.5.19 (Week 7)
Kerning is a term that refers to the automatic adjustment of space between letters. Letterspacing is often mistakenly referred to kerning, but the difference between them is that letterspacing is used to add space between the letters. Other than that, tracking is a term used when there is additional or removal of space in a word or a sentence.
When dealing with uppercase letters, it is important to give letterspacing. Using left alignment creates right ragging whilst using centered text may cause ragging on both sides. Moreover, while using right alignment it will create rivers which are irregular gaps in the body text. Although when using large amount of text flush right and centered text isn't recommended.
Lecture 8
24.5.19 (Week 8)
No lecture was conducted.
Lecture 9: Working with type
31.5.19 (Week 9)
There are a few ways to indicate paragraphs.
- The pilcrow which is a paragraph symbol was created to be placed in front of a paragraph to save space on lamp skin.
![]() |
| Fig 9.1 Example of 'Pilcrow' |
- Line spacing vs leading
![]() |
| Fig 9.2 Line spacing vs leading |
Indentation is good for a large amount of text but too many of them can lead to awfully formatted paragraphs. For example, creating indents using left alignment is not recommended because there will be a right rigging in the body text. It is only advisable to use indents when using left justification so that it won't be hard on the eyes to read.
- A widow is a short line of type left alone at the end of a column of text
- An orphan is a short line of type left alone at the start of a new column
![]() |
| Fig 9.3 Example of widow and orphan in a body text |
Moreover, there are a few ways to highlight text:
- Using bullet points
- Highlighting a field of colour at the back of a text
- Bold or italicise short body of text
- Make the text bold or even change the typeface or typefamily
INSTRUCTIONS
PROJECT 2
Week 7
We began our Project 2 by dissecting 4-5 letters that we had to choose from the 9 typefaces Mr Vinod gave to us at the start of our semester. So I chose to dissect the letters A R E S using the typeface Futura as my selected font. He showed us how to analyse a letter properly using Adobe Illustrator by using either circular strokes or straight lines, this is to study how the letter is made up of different kind of strokes or simply on how the design was supposed to be. Here are my Futura letters that I dissected:
![]() |
| Fig 7.1 Font dissection of the letter a |
![]() |
| Fig 7.2 Font dissection of the letter r |
![]() |
| Fig 7.3 Font dissection of the letter e |
![]() |
| Fig 7.4 Font dissection of the letter s |
After analysing and dissecting the strokes of the 4 letters I chose for the typeface Futura, Mr Vinod asked us to sketch them out. I had many ideas for the font designs, even though they look almost the same I tried to make the letters slightly thicker or even thinner but I chose the thicker letters and re-drew them big enough to trace it on to Illustrator. Here are my sketches for Project 2:
![]() |
| Fig 7.5 Sketches for my font design |
I couldn't think of any ideas than to make Futura thinner or thicker so I changed the typeface into Serifa. Here are my dissection for the letters M, O, A and R.
![]() |
| Fig 7.6 Font dissection of the letter m |
![]() |
| Fig 7.7 Font dissection of the letter o |
![]() |
| Fig 7.8 Font dissection of the letter a |
![]() |
| Fig 7.9 Font dissection of the letter r |
![]() |
| Fig 7.10 Sketches for my design #2 |
Week 8
We had to digitised our fonts using Illustrator. Here are my fonts:
![]() |
| Fig 8.1 Digitisation of font in Adobe Illustrator |
Week 9
After digitising our fonts we had to move them into font lab to generate it.
![]() |
| Fig 9.1 A view of my fonts in Fontlab |
![]() |
| Fig 9.2 Final look of the fonts designed by me |
![]() | |
|
![]() |
| Fig 9.3 I survived Mr Vinod and Mr Sam's class, Abigail's Regular Regular Font by Abigail Bea Chong Ka Yee, 2019 (Final Outcome) |
PDF submission of Project 2
FEEDBACK
Week 7
General Feedback:
Mr Vinod told us that on our e-portfolios under our exercise for lettering under the images make sure to state your personality type.
Specific Feedback:
Mr Shamsul said that I should format the body text properly so it wouldn't look so jagged; Mr Vinod also told me that the body text looked too complexed and squeeze in together.
Week 8
General Feedback:
Mr Vinod told us that we should've given our fonts designs to him to be approved before this week so we could have shown him our digitised fonts because 80% of our work is making the fonts digitally; he also reminded us about the listed books in the MIB could help us in making our own fonts and he mentioned that before we move our fonts into Font Lab we should check our strokes (if we made our fonts using strokes instead of drawing the shapes with a pen tool) to make sure it's all connected and to convert it to outline strokes or not it won't show up properly in font lab.
Specific Feedback:
Mr Vinod said I shouldn't make the fonts look really weird and try to make normal looking fonts. He suggested that maybe I could make the sides a bit rounder.
Week 9
General Feedback:
Mr Vinod told us that we should always write our feedback in the feedback sheet and our blog. He also told us to take reflection seriously and write more than one sentence whether it should your thoughts or what you learned about in the class. This is to help ourselves and our lecturers to understand better.
Specific Feedback:
Mr Shamsul told me that my typeface had problems for the letters (a,s,n,u,m and r). The letter A had a weird looking hook; the letter S was too thick and it did not follow the shape of the letter O; letters N, U, and M had a slanted line in the middle of the letter and the letter R was too long. After I showed him the typeface again he approved all the letters but the letter S because it was slightly thicker than the others.
REFLECTION
Experiences
Week 7: I noticed that I had an easier task with using 3-4 pages for project 1 than 2 pages. Surprisingly, I wasn't good at making the layouts as I thought I would since I have quite a good visual layout. I also had a hard time choosing a font that I wanted to dissect. But in the end, I went we what I found was a good fit for me.
Week 8: This week was tough on me because I struggle quite a bit in making my letters look consistent and my ideas were all over the place and I decided to change my current font into a different typeface to dissect and sketch
Week 9: When I was digitising my letters in Illustrator the most annoying and difficult letters to construct was A and S because I could not make it look right the strokes and sizes looked really off-putting. But when I finally got my letters approved and typed out onto FontLab it was really satisfying to see my font come to life.
Observations
Week 7: The class had a lot of different varieties of layouts that I saw which were pretty interesting to look at and observe. The class also felt longer than usual.
Week 8: I noticed that a lot of people chose the typeface Futura and most of us were confused about how to design a font. Making a single letter is hard without a base to start with.
Week 9: I realised that after spending so long making and looking at my font I can't help but noticed all the different type families that are all around us. Thus, adjusting the letterspacing was quite tricky because of the different sizes and the serifs.
Findings
Week 7: I found myself getting distracted between fixing my blogs, project 1, dissecting the letter and trying to sketch it at the same time. I managed this by working on dissecting the letter first since we started working on that activity.
Week 8: I found that designing a font type isn't as easy and that it must belong to the same type family. Making the base letter O makes it easier to keep a consistent the letters consistent
Week 9: It is important to keep the same stroke width throughout making all the letters so it maintains consistent. The letterspacing should be adjusted accordingly to each letter so that it will look consistent in the body of text.
FURTHER READING
1. LETTERING & TYPE by Bruce Willen and Nolen Strals
17.5.19 - 24.5.19 (Week 7 - Week 8)
![]() |
| Fig 10.1 LETTERING & TYPE |
This book taught me how to look at fonts individually and dissect it. It also showed examples of how to create and design your own fonts. These are a few pages that helped me a lot while making my own typeface. Building the fonts using the letter O as a base letter is what helped me in creating the letters C and E.
![]() |
| Fig Making letters work #1 |
![]() |
| Fig Making letters work #2 |
2. TYPOGRAPHIC DESIGN: FORM AND COMMUNICATION by Rob Carter, Sandra Maxa, Mark Sanders, Philip B.Meggs and Ben Day
31.5.19 - 7.6.19 (Week 9 -Week 10)
![]() |
| Fig 10.2 TYPOGRAPHIC DESIGN: FORM AND COMMUNICATION |
I found this book very knowledgeable it had all the necessities you needed to understand typography precisely for new beginners like me. The chapter that caught my interest the most was about the evolution of typographic technology. It all started with hand composition, to machine composition; phototypesetting; digital typesetting; digital typeface file formats; screen-based typography; generative typography; and hybrid typography.
As you can see typography begin with Gutenberg when he invented movable type in the 1450's; then came machines like the linotype invented by Ottmar Mergenthaler in 1886 and also monotype invented by Tolbert Lanston in 1887; which then lead to phototypesetting where they exposed films negatives of characters onto photographic paper; then came digital typesetting where typographic characters are digitally placed on a grid thus defining the shape of each letter; screen-based typography is where we see it on our electronic devices; on to generative typography where it allows designers to create their own typographic tools and last but not least hybrid typography is when text is being reinterpreted through digital fabrication technologies like 3D printing.

























Comments
Post a Comment