Chuah Kwai Pin / 0348376
Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3A: Type Design and Communication
LECTURES:
Week 8: Typo Task 3A Typeface Construction
In this week's class we were tasked to watch the demo video from the playlist and learn how to create a typeface using strokes and shapes.
.png)
|
| Fig. 1.1 Deconstruction of letter "r" |
After coming up with a few sketches, we have to choose a font out of the 10 downloaded fonts that is closest to the sketches we have done. Then we have to deconstruct a few letters, preferably the ones with ascender and descender as well. This is to observe in details how the letters are formed with shapes and the difference in strokes due to any optical or technical reasons.
.png)
|
| Fig. 1.2 Setting guidelines |
We were also shown how to set the guidelines which comes in very handy
when constructing our typeface. The lines set the guide for: ascender
height, cap height, median line, baseline and descender line.
INSTRUCTIONS:
Task 3A: Type Design and Communication
To do:
To do:
Create a typeface with good subtlety, character, presence,
legibility and readability. Start with rough sketches and upon
approval, begin digitization of drawings using Adobe Illustrator
and FontLab.
The letters and characters to design include: a e t k g r i y m p n ! # , .
1) Visual Research
To get some ideas of what typeface I wanted to create, I
first went to search the existing typefaces that are
available. I found a few which I liked and saved them so I can
move on with my sketches.
|
| Fig. 2.1 Margot Font, Week 8 (20/5/22) |
|
| Fig. 2.2 Mitra Font, Week 8 (20/5/22) |
|
| Fig. 2.3 Just Comic Font, Week 8 (20/5/22) |
2) Sketches
I started my first sketch by exploring with serif fonts since
my visual research were all serif fonts. I wanted the font to
have a distinguishable accent, which was I have decided
incorporate a circular droplet into each letter.
|
| Fig. 3.1 First sketch, Week 8 (20/5/22) |
However, I realised that serif fonts may require a lot more
work and detailing to do, so I also tried sketching out a few
sans serif fonts. I referred closely to my visual research and
tried to create fonts that bring out the same elegant vibe to
it.
|
| Fig. 3.2 Four other sketches, Week 8 (22/5/22) |
3) Deconstructing References
Since I have sketched out both serif and sans serif fonts, I have
chose to deconstruct Bembo Std for serif font and Univers LT Std
for sans serif font.
|
| Fig. 4.1 Deconstruction of letters "a", "h" and "g"- Bembo Std, Week 8 (22/5/22) |
|
| Fig. 4.2 Deconstruction of letters "e", "d" and "g"- Univers LT Std, Week 8 (22/5/22) |
4) Digitisation
I started digitising my font on Adobe Illustrator after my
sketch idea was approved. I began with the letter "o" using the
pen tool and curvature tool to make the curves. At first, it
took a long time to adjust the letter "o", but as I progressed
with the other letters, it became easier. I also typed out the
letters in Univers Lt Std font below for an overall
comparison.
.png)
|
| Fig. 5.1 Digitisation, Week 9 (23/5/22) |
.png)
|
| Fig. 5.2 Fixing curves using curvature tool, Week 9 (23/5/22) |
I found letter "e" to be the most difficult to construct as the stroke thickness vary at different parts of curve. I did try to keep the whole letter at the same stroke weight, but it did not look consistent with the rest of the letters as it looked too thick and bold. Therefore, I only thickened the stroke towards the bottom curve of the letter to add weight and stability to the overall form. After digitising the set of letters and characters, I united the paths and strokes to be transferred into Fontlab 7.
.png)
|
| Fig. 5.3 Uniting shapes and strokes before transferring to fontlab, Week 9 (29/5/22) |
.png)
|
| Fig. 5.4 Determining heights, Week 9 (29/5/22) |
Before transferring each letter to fontlab, I adjusted the font dimensions to suit my designed fonts.
Measurements (from baseline):
Ascender: 739 pt
Cap Height: 700 pt
x-height: 500 pt
Descender: -228 pt
.png)
|
| Fig. 5.5 Transferring into fontlab, Week 9 (29/5/22) |
After Week 10's feedback
Based on the feedback given, I have removed the droplet curved
from these 2 letters. The reason behind it is because it takes
up space between two letters, and it appears to serif for a
sans serif font. Other than that, I also adjusted some minor
parts of the letters for it to have a smoother curve and less
pointy edges.
|
|
Fig. 5.6 Removing the droplet curve from letters "m"
and "n", Week 10 (30/5/22) |
|
| Fig. 5.7 Compilation of letters and characters in fontlab, Week 10 (30/5/22) |
I also adjusted the kerning following the Fontlab video in the Typography YouTube playlist. I typed out many combinations of letters to check that all of the spaces have been adjusted before I exported the font to proceed with my A4 poster.
.png)
|
| Fig. 5.8 Adjusting kerning, Week 10 (30/5/22) |
For my A4 poster, I came up with 3 different layouts to see which one suits my font better. I personally like the second and third option, but I have decided to go with the second one as the final because it looks clean cut and straightforward.
.png)
|
| Fig. 5.9 A4 posters with the generated font, Week 10 (30/5/22) |
FINAL OUTCOMES:
Download link for Droplets font:
https://drive.google.com/file/d/1dvusJzpGzxDw3-916xPAhO9ABfDeM0Bo/view?usp=sharing
|
| Fig. 6.1 Final Task 3A- Droplets Font Design, Week 10 (30/5/22) |
|
| Fig. 6.2 Final Task 3A- Droplets Fonts A4 Poster- JPEG, Week 10 (30/5/22) |
| Fig. 6.3 Final Task 3A- Droplets Fonts A4 Poster- PDF, Week 10 (30/5/22) |
FEEDBACK:
Week 9
Specific Feedback: Pay attention to the
serif of letter "m". It leads the eye to two
directions and it also takes up space that clashes
with the next letter. If proceeding with sketch
#2, it introduces a serif element to a sans serif
letter which requires some study and exploration
so that it does not appear too serif.
General Feedback: Make sure the strokes of
the letters are consistent when digitising. Pay
attention to the proportions of letters.
Week 10
Specific Feedback: The droplet curves on
letters "m" and "n" have to be removed. The curve
for "t" can be smoother. The dot for "i" is too
curvy and should be reduced. The tail of the comma
can be thicker.
General Feedback: Not all the letters have
to have the droplet curve. Letter "r" looks good.
REFLECTIONS:
Experience
While doing this task, we had to design our typeface on Adobe
Illustrator and then transfer it to FontLab to generate the
font. Never have I ever imagined a day where I would construct
my own typeface myself, and I have to admit that although there
were challenges, the final outcome made me happy and satisfied.
It was a very fun experience creating my typeface design from
scratch and putting into use later on in the A4 poster.
Observation
I have observed that type construction requires a lot of
profound knowledge on letterforms itself. Different typefaces
have different rules and guidelines and only by deconstructing
them, we can see that it is not as symmetrical as we think. It
is all part of our optical illusions to think that all letters
in the same typeface are consistent and perfect to a
fault.
Finding
I have also found that although we are designing our own
typeface, we still have to follow the standardized rules
particularly for type designing. We were advised to do some
readings posted over Facebook as it helps us to understand
further about these basic rules that we need to follow while
designing our typefaces.
FURTHER READING:
|
|
Fig. 7.1 Punctuation, 2021 @grillitype |
Reference: @grillitype, https://www.instagram.com/p/CRjdPtSjz5K/?utm_medium=copy_link&fbclid=IwAR1470npce1THfJl-b_TtqTCKVJLT3usNW93rcp4nqz6otVzfcFAYp6zJH8
 |
| Fig. 7.2 How to Design A Typeface, 2020 @worldoftype_ |
This is another post that was featured in the Facebook page that guides us how to design a typeface. There are 4 steps to this which are research, using a suitable software, designing a specific letter as a start and proof and refining. Throughout the process of constructing our letters, we have gone through all 4 of these steps. I find that it is important to do research to see the existing typefaces out there and get inspiration on what style we want to go for. For proof and refining, it is also very important to check the kerning between each letter so that all of them are consistent when typing a sentence or word later on.
Reference: @worldoftype_, https://www.instagram.com/p/CDBubzsho3D/?igshid=af37z0lyb4lp&fbclid=IwAR03uaX471ucRMpCQ5Y3sOoMgwRWxjAVsTGymXAG-G6aJ1N8vGhGy47jWVc
Comments
Post a Comment