Labels

Typography / Task 3(A): Type Design & Communication

08.10.2021 - 29.10.2021 (Week 7 - Week 10)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Typography
Task 3(A) / Type Design & Communication

LECTURES

Fig 1.0: Thumbnail, 05.09.2021


Link to previous posts (containing all lecture notes and task submissions):

Task 1: Exercise 1 & 2

Task 2: Typography Exploration & Communication


To begin and complete this task, students are required to watch the tutorial videos from Mr. Vinod's Lecture Playlist. Here's the link.

Typeface Construction (Shapes)

Fig 1.1: Anatomy of a Typeface

Fig 1.2: Sketching Typefaces

Fig 1.3: Deconstructed letter

Fig 1.4: Guidelines

Illustrator to FontLab5 Demo

FontLab7 Demo

*additional video (optional)

Preview & Type Your Font on Blogger

INSTRUCTIONS


Task 3(A): Type Design & Communication

For the first part of this task 3, we were given an assignment to create our own typeface. We can find references from internet or try deconstructing the 10 typefaces. The characters we need to design are: a i m e p y t g d o b ! , .

Fig 2.0: Task Requirements, 15.10.2021


Research

When Mr Vinod gave us this assignment, I already had two ideas in my mind, Retro Serif and Modern Serif. Since I really like serifs, especially those two, so I explored for references in internet. Actually, both of them look similar to people, but I feel like Retro Serif somehow has the cute/funny vibes, while Modern Serif looks more stiff and clena, and has a minimalist feel, that's why I love both.

Fig 2.1.1: Retro Serif

Fig 2.1.2: Modern Serif


Exploration

I created 5 different sketches for this task with different medium. At first, I drew 2 sketches manually on a paper because it was nearest thing that time. I sketched what was on my mind, and only did it for the letter: a, m, p, and y.

Fig 2.2.1: Rough Sketch, 08.10.2021

The next time, I managed to draw 3 more sketches of typeface, but this time I did it digitally. And also this time I designed for all the characters provided by Mr Vinod (I missed out the letter g on the first sketch).

Fig 2.2.2: Sketch #1, 16.10.2021

Actually, I was really out of idea when doing this, except for the first sketch which is my original intention since the beginning. So I ended up looking around to find inspiration like Mr Vinod said. Surprisingly, I got inspired by some brand logos.

For the second sketch, I was looking at a mineral water bottle "Pristine" and thought that it would also be nice to create a rounded font. And I also got inspiration from the logo on my mouse. I went for another research to have more references and found a rounded font called Arista. 
Fig 2.2.3: Pristine logo

Fig 2.2.4: Logitech logo

Fig 2.2.5: Arista Typeface

I got inspired from those typefaces but I tried to make it with my own taste because I don't like seeing it too ordinary.

Fig 2.2.6: Sketch #2, 16.10.2021

The third sketch was inspired by a gummy bear candy "HARIBO" logo. It is also a rounded font, almost the same as the previous one but thicker so i guess it looks more like a bold rounded font.

Fig 2.2.7: HARIBO logo

Fig 2.2.8: Bold Rounded Typefaces

I tried to sketch with my own style and later found that it looks not so rounded anymore and has a bit of futuristic vibe.

Fig 2.2.9: Sketch #3, 16.10.2021


Digitization

Finally I decided to use the second sketch as my next work because after I took a look again at those 5, I felt like this one is the best choice. The first manual sketch looks too stiff and somehow feels weird. The second one seems too common, can be found anywhere. Actually the first digital sketch, the serif one looks good but I just felt like it would be hard for me to digitalize later. For the last one, I don't think it is the best choice if we look at all the sketches, so I just believed it's not this one.

I began puting the guide lines and then started moving the sketch immediately.

Fig 2.3.1: Guides, 20.10.2021

Fig 2.3.2: Making letter a, 20.10.2021

I am using 80 pt for the typeface thickness.

Fig 2.3.3: Typeface thickness, 20.10.2021

Fig 2.3.4: Making letter y, 20.10.2021

Fig 2.3.5: Outlines from letter y, 20.10.2021

Fig 2.3.6: Giving serif to letter g, 20.10.2021

From this attempt, I have two designs. One with serif, and the other one without it.

Fig 2.3.7: 1st outcome, 20.10.2021

Fig 2.3.8: 2nd outcome, 20.10.2021

After getting feedback from Mr Vinod, I tried to modify some letters (a, p, d, b) a bit. I also increased the size of the dots (for letter i, exclaim mark, comma, and period). The thickness increased from 80 points to 120 points so it'll be easier to see.

Fig 2.3.9: Outcome after feedback, 22.10.2021

Fig 2.3.10: Outlines, 22.10.2021

Measurements (from baseline)
Ascender: 730 pt
Capital height: 696 pt
Median: 500 pt
Baseline: 0 pt
Descender: -230 pt

Fig 2.3.11: Measurements, 22.10.2021


FontLab Progression

After finish doing it, I moved my work from Illustrator to FontLab7 by following the same steps as Mr. Vinod. The process was easier than I thought. We only need to copy from Illustrator and paste the letter into FontLab7. But before that, the file should be customized first, and I again followed Mr. Vinod video.

Fig 2.4.1: Adjusting the size, 27.10.2021

I named my typeface "Plutee" with no reason. I just feel like the name fits the font well so I named them Plutee.

Fig 2.4.2: Naming the typeface, 27.10.2021

Fig 2.4.3: Importing letters, 27.10.2021

Fig 2.4.4: All characters arrived safely, 27.10.2021

Next step I did after finish importing the characters was kerning them. To do kerning, we need to open New Metric Tab from the window.

Fig 2.4.5: Characters before kerning, 27.10.2021

The original version a.k.a before the kerning was very messy, so I did re-arrangement for the characters. Most of the positions (both left and right) were changed to 50, but I also made 75 for some of them. And finally this is the final result.
Fig 2.4.6: Characters after kerning, 27.10.2021


Font Generation & Posters

The very last thing to do is applying our typeface to poster. We were given some examples of the application from Mr. Vinod and were free to explore it ourselves.

Fig 2.5.1: Poster examples

So, I came out with 4 different posters, 2 of them are using the text, "i am, a type god. obey me!" and two others are just my random ideas.

Fig 2.5.2: Poster #1, 28.10.2021

Fig 2.5.3: Poster #2, 28.10.2021

Fig 2.5.4: Poster #3, 28.10.2021

Fig 2.5.5: Poster #4, 28.10.2021

For the final submission, I picked the second poster. However, I just realized that I used the wrong size for the artboard, I chose Poster size instead of A4, so I resized them. I also modified the size of some words since Mr. Vinod told us to use the same point size for all the words.

Final Outcome

- Letterforms

Fig 2.6.1: Final Outcome in .jpg, 22.10.2021


Final Outcome in .pdf

- Poster

Fig 2.6.2: Final Outcome in .jpg, 28.10.2021


Final Outcome in .pdf

Total hours spent on this task: 12 hours


Generated Typeface Download

Download Plutee by clicking here.


Let's try out Plutee!

FEEDBACK

WEEK 8

Independent Learning Week

WEEK 9

General Feedback: 
- Use bigger point size to get better result (thicker font)

Specific Feedback:
- That's a very consistent typeface
- It's a very cute typeface and got a lot of smiles
- The 'corner' part in letter a, b, d, p is a bit complicated, it is too close to each other
- Maintain the same gaps for all parts
- The dots in exclaim mark, comma, and period, and letter i need to be bigger

WEEK 10

General Feedback: 
- Maintain the use of same point size for the statement in the poster
- Don't use other than A4 size for the poster

Specific Feedback:
- The font has a open and quirky disposition. Its fun and also consistent in stroke and style
- The poster is awesome!
- Please submit the final version toward the end: Ai letterforms on the baseline (JPG and PDF), the poster (JPG and PDF) and the download link together at the end

REFLECTIONS

Experience
This task is the most interesting one and also becomes my favorite typography task. I can experience creating new typefaces by my own and later can be applied in many ways. By having this task done, I get to learn a lot of new things, especially the process in FontLab7 software which is new to me.

Observations
I realized that the aim of this task is to test students' creativity in executing their own ideas, not just copying the original design and modify a bit.

Findings
Realized that doing design stuffs need a lot of patience. Sometimes it could be stressful, but just let it flow. It will be much more stressful if we are distracted with other things so we need to have our mind relax.

FURTHER READING

Fig 3.1: Typographic Design: Form and Communication

Reference:
Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.
(2015). Typographic design: Form and Communication
Hoboken, New Jersey: John Wiley & Sons, Inc.

[Chapter 2: The Anatomy of Typography]
Letterforms Analyzed
The proportions of the individual letterform are an important consideration in typography. Four major variables control letterform proportion and have considerable impact upon the visual appearance of a typeface: the ratio of letterform height to stroke width; the variation between the thickest and thinnest strokes of the letterform; the width of the letters; and the relationship of the x-height to the height of capitals, ascenders, and descenders.

Stroke-to-height ratio
The roman letterform, above, has the stroke-width-tocapital-height proportion found on Roman inscriptions. Superimposition on a grid demonstrates that the height of the letter is ten times the stroke width. In the adjacent rectangles, the center letter is reduced to one-half the normal stroke width, and the letter on the right has its stroke width expanded to twice the normal width. In both cases, pronounced change in the weight and appearance of the letterform occurs.

Fig 3.2: Stroke-to-height-ratio


Contrast in stroke weight
A change in the contrast between thick and thin strokes can alter the optical qualities of letterforms. In the Old Style typography of the Renaissance, designers attempted to capture some of the visual properties of pen writing. Since the writing pens of the period had a flat edge, they created thick and thin strokes. Stress is the term used to define this thickening of the strokes, which is particularly pronounced on curves. Note how the placement of weight within the Old Style O creates a diagonal axis. As time has passed, type designers have been less influenced by writing. By the late 1700s, the impact of writing declined, and this axis became completely vertical in many typefaces of that period. In many of the earliest sans serif typefaces, stress disappeared completely. Some of these typefaces have a monoline stroke that is completely even in weight.

Fig 3.3: Contrast in stroke weight


Expanded and condensed styles
The design qualities of a typographic font change dramatically when the widths of the letterforms are expanded or condensed. The word proportion, set in two sans serif typefaces, demonstrates extreme expansion and condensation. In the example, the top one, set in Aurora Condensed, the stroke-to-height ratio is 1 to 9. While the bottom one, set in Information, the stroke-toheight ratio is 1 to 2. Although both words are exactly the same height, the condensed typeface takes up far less area on the page.

Fig 3.4: Expanded and condensed styles


x-height and proportion
The proportional relationship between the x-height and capital, ascender, and descender heights influences the optical qualities of typography in a signifcant way. The same characters are set in 72-point type using three typefaces with widely varying x-heights.

Fig 3.5: x-height and proportion