Typography | Task 3A: Type Design & Communication

November 25, 2021

Typography | Task 3A: Type Design & Communication

6/10/21 - 20/10/21 (Week 7 - Week 9)
Jane Chong Yun Ann (0344255)
Typography/Free Elective in Bachelor of Design in Creative Media
Task 2: Typographic Exploration & Communication

LECTURE NOTES

All lectures are done in Task 1 and Task 2.

INSTRUCTIONS

EXERCISES

Task 3A: Type Design & Communication

To do list:

Research
Sketch the typefaces (5-6 designs, use o, a, t, h) and decide 1-2 strongest option
Look for a reference from the 10 typefaces provided that looks closest to our sketch

If your sketch does not look close to any of the 10, you may look for other reference **with caution**.

Deconstruct the letter of said typeface (looking at the DETAILS)
Digitize your sketch
Refine?
FontLab!
Poster?

We were instructed to make a typeface for the letters and punctuations: a i m e p y t g d o b ! , . A new term: overshoot!

Overshoot: The slight bit of a curved area that exceeds the baseline and/or median line. This is because curved forms look smaller in general than a straight-edged form.

Figure 1.1: Overshoot, Week 7 (6/10/21)

Research

Research is important, so we shall start with that first~

Figure 1.2: Font research, Week 7 (6/10/21)

I found myself leaning towards two main type of fonts: elegant, almost royal-like fonts and minimalistic, futuristic fonts that has geometric influences. The cat font was just included because I like cats, and I found it so so adorable. I probably won't make a cat-like font...probably; readability may not be its strongest suite.

The letters we need to create a typeface for are in lowercase form, so geometrical elements (such as Voyager) may not be suitable. Nevertheless, time to sketch :D A note to keep in mind: we are creating a ~display~ type of typeface, meaning it is not meant to be in long bodies of text but to be boldly ~displayed~.

Sketches

Mr Vinod said we should create 5-6 design sketches based on our research. I used a grid paper to maintain height evenness (though, not accurate in terms of cap height and ascender and descender).

Figure 2.1: Too many sketches, Week 7 (8/10/21)

Yeah...I did a little too many, but I believe I had good reason - I took so long to start, and once I started, suddenly I had so many ideas I want to try :,D. I think the progression of "how do I even start" to "what if I tried this variation or this variation" can be seen from the sketches top-down. Though quantity is a strong suit, some of its quality can be...questionable. I personally liked the ones that look like abstract shapes (1st & 2nd column, 5th row), the ones that had exaggerated contrasts on weights and the royal sans serif one (2nd column, 1st row). I also showed it to a few people to get their opinions; needless to say it was very varied.

SO after some deep thought, I settled on the ones that emphasized the different weights (row 7). Maybe when I have some free time I will try creating the wavy bold one. My reasoning behind this decision took the practicality and the amount of time it may take to create the font into account - time may not be on my side. The dynamic contrast between the thick and thin strokes looked very appealing as well. So I started deconstructing sans serif font types (using Futura Std Book) and also slab serif types (using Serifa Std Roman) just in case I wanted to change the font design in the future.

Figure 2.2: Finalized sketches 1, Week 8 (12/10/21)

Figure 2.3: Finalized sketch 2 (if there's enough time), Week 8 (12/10/21)

Deconstructing Typeface

Following Mr Vinod's tutorial we created guidelines including the baseline, median (forming an x-height of 500px), ascender, descender, and cap height.

Figure 3.1: Creating guidelines, Week 7 (6/10/21)

Sans Serif | Deconstructing Futura Std Book

Figure 3.2: Deconstructing Futura Std Book, Week 8 (12/10/21)

Observations:

The stroke of the curve in 'b' is not uniform and it is not a circle
The curves in 'm' is not identical; the right counter seems larger
The stroke of the curves in 'm' is not uniform too
The two strokes of y intersect above the baseline
Even stroke width in all vertical strokes of 'm'
Have relatively higher ascender

Slab Serif | Deconstructing Serifa Std Roman

Figure 3.3: Deconstructing Serifa Std Roman, Week 8 (12/10/21)

Observations:

Top slab widths were slightly larger than bottom slab widths, just slightly
The counters of 'm' are identical
Curved strokes in 'b', 'm' and 'P' are not uniform
Cap height and ascender height are the same
Has relatively shorter descender height

Digitize

Things to note:

Board must be 1000px in height
x-height of our typeface MUST be 500px.

Figure 4.1: First attempts of design #1, Week 8 (12/10/21)

Figure 4.2: First attempts of design #2, Week 8 (12/10/21)

Figure 4.3: First attempts of design #3, Week 8 (12/10/21)

Following the feedback given, I did realize the inconsistencies in my design and took note of them. Let's go through it font by font~

Design #1

Figure 4.3: Second attempt of design #2, Week 9 (19/10/21)

I felt this was just..'meh'. I did experiment a little with the 'O' as the original design began to look weird, small and out of porportion. But other than that, I decided to not continue with this font as 1) I lost inspiration for it and 2) the other designs felt more exciting.

Design #2

Figure 4.4: Second attempt of design #1, Week 9 (19/10/21)

As per feedback, I started with the base of the letters - just focusing on which part of the letter will have a heavy-weighted stroke and so on. I followed what Mr Vinod suggested and created copies of different shapes to be used throughout so that the consistency remains. You can find the behind-the-scenes screenshot below :D.

Next, I added a slanted edge to all of the bolded strokes (except e and o).

Figure 4.5: Anchor points in construction, Week 9 (19/10/21)

Figure 4.6: Edgy version of design #1, Week 9 (19/10/21)

The slanted edges definitely added more visual interest to the letters and the font as a whole. You may have noticed an extra 'h' and 'n', that was because I was too obsessed with the word 'oath' in my sketches that 'h' subconsciously stayed in my mind. The 'n' was just a quick by-product from 'h'. I struggled mainly with 'y' because of the tail-to-body ratio. In the end, the other 'y's either did not fit the font theme, did not fit the x-height, or was just had unfavourable proportions.

Figure 4.7: (Rejected) Variations of 'y' for design #1, Week 9 (19/10/21)

Figure 4.8: Word testing of potential font name, "entity", Week 9 (19/10/21)

Design #3

Mr Vinod said to attempt this when I feel like I have a lot of time. Well here I am, not with a lot of time but with a lot of other *uninterested* things I pushed aside for this (it's a good thing, don't worry).

Figure 4.9: Second attempt of design #3, Week 9 (19/10/21)

Figure 4.10: Anchor points in construction, Week 9 (19/10/21)

Wow this was..an experience. It was trickier to copy the shapes as each curve was different. I struggled with the tail of the 'y' for quite a bit as the original one had a much longer and 'flair'-ey tail. But the main design of it is still intact. The 'h' and 'n', as mentioned before, are additionals. Since I did it for design #2 I decided to add it here as well. The letter 't' went through some variations as well, but I felt that the other versions were a little complicated, and this one was consistent with the 'i' (and 'l', if there is).

Figure 4.11: (Rejected) Variations of 't' in design #3, Week 9 (19/10/21)

Figure 4.12: Word testing of potential font name, "blob" and "glob", Week 9 (19/10/21)

Figure 4.13: Behind-the-scenes - an organized mess, Week 9 (19/10/21)

After getting feedback and adjusting accordingly, the final type design:

Figure 4.14: Final typeface design, 'Glob' - JPG, Week 9 (22/10/21)

Ascender - 733px

Cap Height - 696px

X-Height - 500px

Descender - -245px

Generating Font

The process of integrating my font from AI to FontLab is anything BUT smooth. In other words, omygosh FontLab does not like me and I do not like FontLab. From missing counters, uGly watermark/logo placing because it is a demo version, files "unsaving" itself(???) and my other petty mistakes, it was something I don't think I want to do ever again :,)... Much respect to the typographers who create fonts with this.

Figure 5.1: Font generation went wrong, Week 9 (22/10/21)

Anyhow, my formula was not to use either FontLab5 or FontLab7, but BOTH; Copy-paste the shapes from AI to FontLab5 (because FontLab7 cannot recognize the counter shapes for some forbidden reason) AND adjust all the kerning BEFORE saving (because it "unsaves", I had to learn it the hard way). Open FontLab7 and open that folder you just saved, and export said font (to avoid the horrendous watermarks from FontLab5).

I got to kerning the letters and typed out some testing words to adjust those kerning as well.

Figure 5.2: Adjusting kerning of different combinations, Week 9 (22/10/21)

I am then able to export it using FontLab 7 and install the font in my computer :D. To test it I used it as a font for one of my long-worded assignments.

Figure 5.3: An example of how NOT to use this font, Week 9 (22/10/21)

Figure 5.4: Final kerned letters - JPG, Week 9 (22/10/21)

After adjusting its kerning, I moved on to creating a poster to showcase the font. I came up with several compositions with minimal graphical elements.

Figure 5.5: Poster 1 "I! am a type god, obey me!", Week 10 (26/10/21)

Figure 5.6: Poster 2 "Hi Glob!", Week 10 (26/10/21)

Figure 5.7: Poster 3 "Hi Glob!", Week 10 (26/10/21)

Figure 5.8: Poster 4 "Hello. I, am Glob!", Week 10 (26/10/21)

I personally liked Poster 1 and 3 (Fig 5.7) as it fitted the theme of the font. Poster 1 shows how the font can look in phrases with more words, while Poster 3 showcases that the font can be arranged in a playful style.

Final Submissions

Click me to download the font!

Figure 5.9: Final "Glob" font design - JPG, Week 10 (26/10/21)

Figure 5.10: Final "Glob" font design - PDF, Week 10 (26/10/21)

Figure 5.11: Final "Glob" poster(s) - PDF, Week 10 (26/10/21)

Font Playground - Type Something~

Only limited characters available (sry): a i e m p y t d g o b h n l ! , .

Video Tutorial Here by Lim Jia Sheng

Time Allocation

Sketch: ~1-2 hours

Type Deconstruction: ~1.5 hours

Digitization: ~ 4 - 5 hours

FontLab and its issues: ~3-4 hours

Adding Playground (and Debugging): ~1.5 hours

Total: ~11 - 14 hours

FEEDBACK

Week 8

Specific Feedback: Good exploration, should start from determining the key features and keep it consistent throughout the letters (such as the place of weight, shapes involved), need to use thicker strokes in general.

Week 9

General Feedback: We need to deconstruct and analyze the construction of a typeface more thoroughly to understand the basic shape and form of each letter.

Specific Feedback: (For Glob) the typeface is nicely designed! The dots in the letters (except o and e) can be removed and the dots for the punctuations need to be larger.

Week 10

Specific Feedback: Excellent sketch exploration. Good variety in exploration. Well done! O wow! you managed to figure out "font playground" |..|

REFLECTION

Experience

Creating and thinking of font designs were a little tough to start, but once I had it flowing it was hard to stop. I had a lot of fun (maybe too much fun) experimenting with different font types, from typical serif types to abstract shapes. Digitizing the fonts was pretty positive for the most part. I think as I constructed each letter, I started to realize the small details put into each letter, how it all relates to each other (eg: 'o' can influence 'a', 'b', 'p' and 'h' can influence 'm' and 'n', etc..) to create consistency. It increases my appreciation for good typeface designs and typographers in general.

FontLab was an experience birthed from an array of problems popping up here and there...never again.

Observations

Other students' also had very interesting and creative work! Some were deceptively simple but was very consistent and unique in its own way. It was very inspirational and fun to see what others came up with~

Findings

Creating a font required a lot more consistency than I had expected. There is a lot of attention spent on the small details of each letter and how it looks/compliments each other overall. Other than the design, the kernings also need to have some attention paid to it so that the spacings look consistent.

Search This Blog

Jane Chong Yun Ann (0344255)

Typography | Task 3A: Type Design & Communication

LECTURE NOTES