11.05.2022 - 31.05.2022 [Week 8 - Week 10]
Janaan Ahmed (0353333)
Typography / Bachelor of Design (Hons) in Creative Media
Task 3a: Type Design & Communication
Lectures
Week 7
Typo 3a: Typeface Construction (shape)
We are advised to watch the videos in the lecture playlist relating
to our task at hand. In this particular video, Mr. Vinod teaches us
how to digitise and example sketch. It is best to start by creating
the letter 'o' and our letterforms off of that.
Week 8
Independent Learning Week.
Week 9
Mr. Vinod gave feedback to the class's sketches.
Week 10
The class showed their digitisation of the fonts. Mr. Vinod showed us how to approach constructing a letterform if we had any difficulties on Illustrator. He also briefed us on Task 3B.
Instructions
Task 3a: Type Design & Communication
Task Info:
- We are to design our own typeface. We are required to make a minimum of 5 sketches and choose to digitise the one that thrills us the most.
- Before digitisation, we deconstruct 1 typeface from the list of 10 provided fonts, which most closely matches our typeface (done to understand the nuances that go into designing a letterform).
- The characters we are required to design are as follows: a e t k g r i y m p n ! # , .
- They can be one of either uppercase or lowercase.
Visual Research:
Google fonts
Process:
Sketches
I quite liked the geometric shapes in Cako and
stroke contrast in Magnat, so tried to implement
some of those characteristics into my
sketches.
|
| Fig 2.1: Sketches (06/06/22) |
I chose to digitise sketch #3 as I liked it best
from among everything else.
Deconstructing Letterforms
From the 10 provided typefaces, ITC
Garamond Std (Bold Condensed) had the most
similarities with sketch #3. I chose to
deconstruct the letters r,g, and
a:
|
| Fig 2.2:Deconstruction of Garamond 'r' (07/06/22) |
|
| Fig 2.3:Deconstruction of 'g' (07/06/22) |
|
| Fig 2.4:Deconstruction of 'a' (07/06/22) |
Setting the guidelines
After creating a new document (1000pt x
1000pt), we first draw a rectangle to establish
the mandatory 500 pt x-height. The other guides
(ascender, descender, capline) are then
referenced off of Myriad Pro's Tyd at 500pt
x-height.
Digitisation
I started by creating a template layer of my
sketch image.
 |
| Fig 2.5: Sketch image made into Template (08/06/22) |
Since I chose to design lowercase
letterforms, I started by creating the letter
'o', as advised by Mr. Vinod.
I then proceeded to create the letters g, a,
however came across some difficulties
especially with the a. I had a hard time
getting it to look like my sketch, so tried
searching for some resources online to trouble
my problem
 |
| Fig 2.6: Progress of creating a,o, g (10/06/22) |
From a bit of reading, I learned that when
designing lowercase letterforms, it is best
that we initially create the letter 'n'
along with the 'o' (as mentioned by Mr.
Vinod). These are crucial as all the other
letterforms will be based off of
them.
 |
| Fig 2.7: final design for o and n as base letterforms (10/06/22) |
I learned it is important to maintain a
consistent overshoot across letterforms, and
so created an extra guideline from the ruler
bar.
 |
| Fig 2.8: Measuring space between counterform edge and overshoot (10/06/22) |
 |
| Fig 2.9: Measuring overshoot (10/06/22) |
 |
| Fig 2.10: Overshoot across letterforms (10/06/22) |
When setting the counterform of the letters,
I had to rely on optical visual adjustments to
see which one was more balanced and
complementary to the rest of the
letterforms.
 |
| Fig 2.11: Variations of 'a' (10/06/22) |
After all characters were created, we then merge each one so that the individual shapes are all united into one letterform. Any excessive anchor points should also be deleted so they appear smooth on Fontlab.
Transferring to Fontlab
On Fontlab, we first head to the font
info and set a name for our font.
We also set the metric and unit
dimensions for it by referencing the
values from Illustrator.
 |
| Fig 3.1: Font Info (11/06/22) |
 |
| Fig 3.1: Font Info 2 (11/06/22) |
After the guides are created, we head
back to Illustrator to copy paste each
glyph into Fontlab. Simply move
the x,y axis on the ruler bar towards
the edge/baseline of each letterform
before copy-pasting it directly onto
Fontlab.
 |
| Fig 3.3: Dragging ruler axes to letterform edge (11/06/22) |
Funnily enough, it was only after
completing them that I realised that I
forgot to change the copy-paste settings
on Fontlab *facepalm*.
 |
| Fig 3.4: Correct Duplicate Settings (11/06/22) |
Apart from that, the counter space for
the letter 'p' was oddly not showing
despite me having merged all its
constituent shapes on Illustrator.
However, seeing as how the tools on
fontlab and Illustrator are similar, I
managed to use the fill tool to create
the counter space.
 |
| Fig 3.5: Weird mishap of counter on exporting (12/06/22) |
 |
| Fig 3.6: Counter is corrected using the fill tool (12/06/22) |
After importing all the glyphs, we
adjust the kerning for them on the
metrics window. We first reset the side bearing values
of each glyph to 0 (or directly set to a
standard value of 50 pt).
 |
| Fig 3.7: Resetting left and right bearings to 50 pt (12/06/22) |
We then proceed to adjust the individual
kerning between letter pairings.
 |
| Fig 3.8: Kerning individual letter pairings (12/06/22) |
 |
| Fig 3.9: Creating a value for space (12/06/22) |
|
| Fig 3.10: Testing the font (121/06/22) |
We are now ready to generate the font
after double checking the font info.
Since we aren't allowed to use
colour or point size variation, I
thought to create visual hierarchy
by shifting the
values.
After the side by side comparison
of the white vs black background,
I decided I liked the black
background better. Maybe I got a bit too obsessive
with the details but here are more
subtle variations of the chosen
compositions.
Poster Design
After adding the font into our
computer's fontbook, we proceed to
showcase it in an A4 poster
design. We are required to
maintain the point size for all
letterforms. I made several compositions and
narrowed down from what I liked
best.
 |
| Fig 4.1: Poster compositions (13/06/22) |
 |
| Fig 4.2: Poster compositions (14/06/22) |
 |
| Fig 4.3: composition variations (14/06/22) |
 |
| Fig 4.4: More subtle variations because I'm indecisive (14/06/22) |
In the end though, I preferred to
keep things simple and opted to
maintain the value. To choose a
winner for the 3 finalists, I
considered alignment and visual
flow.
 |
| Fig 4.5: The top 3 finalists (14/06/22) |
Final Outcome:
 |
| Fig 5.1: Mintea Letters Final JPEG (14/06/22) |
Font info:
Name: Mintea
Ascender: 734
Capline: 697 pt
X-Height: 500 pt
Baseline: 0 pt
Descender: -228
 |
| Fig 5.2: Mintea Poster Design Final JPEG (14/06/22) |
Fig 5.3: Mintea Poster Design Final PDF (14/06/22)
Feedback
Week 9,10
GENERAL FEEDBACK
- Bowls should be consistent. Try to base letters off of 'o'.
- Keep point size consistent in poster design
SPECIFIC FEEDBACK
(Some feedback to my peers that applies to my work as well):
- The curve of the y though it follows 'o', can be pulled in a little more since there is too much 'blackness' i.e. looks too condensed in that edge.
- Hashtag has to be slightly slanted. Better to keep vertical stroke thin and horizontal thick.
Reflection
EXPERIENCE
Starting off was a bit hard as I had no idea which direction I wanted to go in terms of font design. It was also a bit difficult to navigate Fontlab initially since I only watched the tutorial for Fontlab 5. It wasn't until I was almost done that I discovered the tutorial for Fontlab 7 so it was quite a laugh. Overall though I had a lot more fun than I anticipated doing this project, despite getting frustrated by the little intricacies in type design (those pesky anchor points!).
OBSERVATION
It is actually a lot harder to avoid jaggedness along a stroke and achieve smooth curves along it. Each time my letterform looked unbalanced, I had to zoom in and adjust anchor points or add little curves to make the transition from one part of a stroke to another look seamless. Also, while adjusting the kerning between letter pairings I realised just how much time it would take to actually craft a complete set of a font and it just blew my mind.
FINDINGS
This was a very humbling experience as I never really considered how many decisions and time go into crafting the parts of a letterform. Though at first glance fonts often look effortless to the eye, I now know that a lot of work and iteration is required to craft a unified letterform that looks harmonious and 'effortless'.
Further Reading
Bettering your Lettering Tip #1 : Overshoot
In this article I learned about the importance of overshoot in achieving visual balance between glyphs.
 |
| FIg 6.1: Rounded glyphs create illusion of being smaller despite being same height. |
Character design standards: Lowercase for Latin 1
In this article I learned about some rules that apply throughout designing a typeface. For example, lowercase round characters (that have the same top and bottom feature) should overshoot the baseline of the flat characters the same amount as the top overshoots the lowercase flat characters. However, it is better to balance them optically instead of mathematically.
I also learned that for lowercase letters, o and n are used as the model characters to space the rest of the group. They are used in chains to test out how other characters with rounded or straight stems would sit between the space.
--
Comments
Post a Comment