Typography // Project 2A: Font Design
6/10/20 -25/10/20(Week 7 - Week 9)
Caitlyn Aurelia Tjandra (0339381)/BDCM
Typography
Project 2A - Font Design
Lectures
Lecture 6: Introduction (29/09/20)
This week we were briefed about Project 2. Firstly, for project 2 , we need to do an excercise which is dissecting letters. Mr Vinod showed us some of the senior's work in order for us to get an idea of what we needed to do. Here is some of the things I understood and learned:
- design western alphabets
- analysing anatomy part (dissect)
- any three letters for disect ( a i m e p y t g d o b ! )
We were told that we can start dissecting the letters on our own time and next week Mr Vinod will show us the tutorial of how it is done.
Lecture 7: Understanding (5/10/20)
1. Letters/ Understanding Letterforms
-Uppercase from suggesting symmetry
-but in fact, it is not symmetrical
-It is easy to see two different strokes of weight in Baskerville stroke form
- each bracket connecting the serif to the stem has a unique arc
-but in fact, it is not symmetrical
-It is easy to see two different strokes of weight in Baskerville stroke form
- each bracket connecting the serif to the stem has a unique arc
- examine low a two similar sans serif ( Helvetica and Univers)
-comparison of lowercase is shown in how the bowls meet the stems
-comparison of lowercase is shown in how the bowls meet the stems
2. Letters/Maintaining x height
- x-height: size of the lowercase forms
- curved strokes (s) must rise above median in order to appear the same size
- curved strokes (s) must rise above median in order to appear the same size
- simple contrast: small+organic/large+machined - Small+dark/large+light
Lecture 8: Project 2 Brief & Text Part 2 (12/10/20)
Project 2 (AI)
2000 x 1000 pt
Letter T = Cap line
Letter h = ascender line
Other letter ends at = baseline
G,y,j ends at = descender line
Rectangle 500 x 500 > make a guide for Capline and baseline
General measurement:
Ascender = 700
Cap line = 675
Baseline = equal as ascender (- 225 pt)
Curve needs to oexceed the guide a little bit
Creates letter O first
To make C > line at 45 degrees and make an X > command Y > cut the section > command J to Joined it
Lecture 9: Text Part 2 (19/10/20)
Text Part 2
Text/type formatting text
Flush left:
- asymmetrical aspect of handwriting.
- each line Strats at the same point but ends wherever the last word on the line ends
- space between words consistent
Flush right:
- emphasis on the end of a line
- useful where the relationship between text and image might be ambiguous without a strong orientation to the right
Justified:
-centering
- symmetrical shape
- occasionally produce rivers
- line breaks and hyphenation needs careful attention
Text/indicating paragraph
- pilcrow = a holdover from medieval manuscript seldom
- Line space =paragraph space = cross alignment
- line space: defender of one sentence to defender of the other sentence
- Leading: space between two sentences
- ident is the same size as the line spacing or the same as text point size
Text/widows and orphans
- widow: a short line of the type left alone at the end of a column of text
- Orphan: a short line of the type left alone at the start of the new column
- in justified text widows and orphans are considered serious gaffes
- the only solution to widows is rebreaking line endings throughout the paragraph
- orphans require more care, make sure that no column text starts with the last line of the preceding paragraph
Text/headline within the text
- typographer task: to make sure the beds clearly signify to the reader the relatives importance within the text and to their relationship with each other
- A head: the clear break between topics
- B head : new supporting arguments
- c head: highlight a specific facet of material within B head text
-hierarchy: putting together a sequence of subheads
Instruction
Letter Dissection (Week 7)
First, we were told to do a letter dissection as shown from the senior's work. We were told that we can do some on our own time and try out a few things. Therefore, before class next week, I tried to do some on my own. We are able to choose our own font family and letters, either uppercase or lower case. The letter I have chosen is P,M and O. I've tried out the font family of Gill Sans and Caslon Pro.
First Tryout
 |
| Fig 1.0 Try out 'P' Caslon Pro (4/10/20) |
 |
| Fig 1.1 Try out 'O' Gill Sans (5/10/20) |
 |
| Fig 1.2 Try out 'P' Gill Sans |
 |
| Fig 1.3 Tryout 'M' Gill Sans (6/10/20) |
Font Design (Week 8)
Sketches
After briefing, we were told to sketch 5 font design. I did mine digitally on my ipad. I was inspired by the font family of Gill Sans.
 |
| Fig 1.4 Font sketch draft 1 |
After researching into emigrey I decided to make more fonts sketches. Here is the result:
Mr Vinod chooses number 2, which then I need to digitalize in Adobe Illustrator.
 |
| Fig 1.5 font sketches draft 2 |
Mr Vinod chooses number 2, which then I need to digitalize in Adobe Illustrator.
Digitalize
firstly, we need to make a guide for the font design. It consists of the things that we learned in our typography lecture week 7. we need to determine the descender line, baseline, x-height, cap line, and ascender line size for our font.
 | ||
Fig 1.6 Digitalize draft 1 outline (12/10/20)
Rework Digitalize |
 |
| Fig 1.8 Digitalize draft 2 outlines (17/10/20) |
 |
| Fig 1.9 Digitalize draft 2 Fill In Final Font Design After Correcting some minor adjustments of the inconsistent strokes between the letter a,e,I,m,t, and Y. furthermore, correcting the placement of exclamation mark, full stop and comma to base line. This is the final font design.  |
Fig 1.91 final font outcome (18/10/20)
Importing Font (Week 9)
After design our font we were told to import our font into the software which could create our font available to use. we were given two option which is calligraphr or fontlab 5. After importing we need to create a4 poster of the phrase "I am a type god, obey me!" using our font design.
Calligraphr
First time creating font design, I decided to use Calligraphr since my laptop is mac Catalina and it cant hold FontLab 5. I watch Mr. Vinod lecture on how to use calligraphr and import my design on it. However, I run into some problems. When I use Calligraphr, my font design was traced and therefore created a distortion in some of the letters. I tried to manually corrected it however it still doesn't look good.
 |
| Fig 2.0 draft 1 (20/10/20) |
 |
| Fig 2.1 draft 2 |
Since I tried to correct the distortion, there is some consistency in the strokes of my letters. The strokes could be vividly seen in the letter M and the inconsistency of letter Y.
Fontlab 7
Mr. Vinod suggested that I use font lab 7 for my design and see how it turned out. Therefore, I installed font lab and Mr. Vinod also posted a new lecture tutorial on how to use FontLab 7
 |
| Fig 2.2 Importing letter '0' |
 |
| Fig 2.3 Importing all Letters |
 |
| Fig 2.4 final adjustments after watching the lecture and following on them on FontLab 7, I manage to import my design in and eventually able to make a decent font design. Here is the result:   |
Feedback
Week 7
General Feedback: Mr. Shamsul told us that when designing this project we shouldn't be too ambitious. We need to look at ourselves and determine our own level of how well we are able to use illustrator to convey our design.
Specific Feedback: Mr. Vinod told me if I want to stick with the geometrical shape I can look at Emigre and take inspiration from there.
Week 8
Specific Feedback: Mr. Vinod told me that my P is wrong, T looks weird, comma and full stop should start from baseline and ! start at ascender.
Week 9
General Feedback: It is Important to set Margin and consistent font when setting up posters.
Specific Feedback: Mr. Vinod told me that my M and Y are inconsistent. This is because I was using Calligraphr. Therefore, I should try my font in FontLab 7.
Reflection
Experience: This project was fun however much harder than another project. I had difficulties determining which font I wanted to do and it has been hard personally and emotionally conducting classes online. I had no problem with the lectures and projects, however, I think that emotionally it was pretty lonely and I have no emotional support that my friends usually give.
Observation: I observe that there is a lot of font design out there that is unique. It is also hard to design a font ourselves and through this project, I was able to observe a lot of progress of what my friend goes through regarding making a font design. It takes time and practice to actually create a decent font design. It was my first time designing a font and exploring adobe illustrator much further. Therefore, I do feel that I was lacking skills when I was doing this project.
Findings: I find that the most used software in design is adobe illustrator and photoshop. I am a beginner at that software in which I must learn and quickly adapt. Mr. Vinod's feedback and Mr. Shamsul's demo have been helpful for a beginner like me. When I was confused I would go back to their recordings and I would understand 10x much better. When I was at my lowest moments I always remember when Mr. Vinod told us that we can't be too happy when lecturer gives us a compliment and we can't be too sad when they scold us. We must focus on improving and remain neutral.
Further Reading
For this week I read the book 'Letter Fountain, published by TASCHEN' through a website https://www.letterfountain.com/index.html I learned a lot of things, and here is what I have learned and understood.
Anatomy of the letter
1. The first capitals
The Roman inscriptional capitals, the mother of all western capital or majuscule scripts (see also the chapter ‘The Roman and the Roman Empire’), have a geometric construction with a square base.
2. What you measure is not what you see
Many different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved (and protruding) forms past the baseline and top line. This also applies to vertical alignment between curved and straight forms.
A visual correction is also needed for the distance between letters. It is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform ‘visual’ white space. This means that the white space between the letters should appear the same.
3. The letter ‘o’
This letter appears simple in construction. Looking at Futura, this could quite easily be true, but even the construction of this version is not exactly geometric. The circles and ovals have been visually corrected in the ‘corners’ and curves.
4. The letter ‘l’
Just as the letter ‘o’ is defining in the form of the curves in a type design, so is the lowercase ‘l’ defining in the thickness of the stem. Just as with the curves, it does not follow that everything with a similar form is equal in thickness, but it is a starting point for similar forms.
5. The letters ‘c’ and ‘e’
When the proportions, contrast, maximal curve thickness and thickness of the stem have been defined, the related forms can then be designed. The logical steps from the ‘o’ are the ‘c’ and ‘e’.
6. Rounded letters with a stem
Four letters of the alphabet – the ‘d’, ‘p’, ‘b’ and ‘q’ – appear quite simply to be a blend of the ‘o’ with a vertical stem. The ‘p’ looks like a rotated version of the ‘d’ and likewise the ‘q’ a rotated ‘b’. But this could not be more wrong. Even the most geometric typefaces contain subtle differences. The greatest differences can be seen in the seriffed types.
Comments
Post a Comment