Typography - Task 3: Type Design and Communication

16/10/2022 - 30/10/2021 / Week 8 - Week 9

Hayato Saito / 0350466

Typography / Bachelor of Design in Creative Media

Task 3A: Type Design and Communication

---

LECTURES

Lecture notes - Task 1 Exercises

---

INSTRUCTION

Task 3: Type Design and Communication

We had to design the letters and create a typeface: a e t k g r i y m p n ! # , . 

and we also had to make an A4 poster with the letters that we designed by ourselves

Starting with sketches and digitalizing them. we must use adobe illustrator to digitalize sketches.

1. Research

Serif

Fig.1.1 typographic design: form and communication p.40 "Serif"

Serifs provide typefaces some of their most recognizable characteristics and, occasionally, they offer hints about how they developed. These are the most often used serifs in typefaces.

Weight

Fig.1.2 typographic design: form and communication p.40 "Weight"

Weight is a property that is determined by the proportion of the letterforms' relative stroke width to height. Normal weight letters typically have a stroke width of about 15% of their height, while bold and light weights have stroke widths of 20% and 10%, respectively.

Thick/thin contrast

Fig.1.3 typographic design: form and communication p.41 "Thick/thin contrast"

The relationship between the thinnest and thickest portions of letter strokes is referred to as this visual characteristic. There are many different visual textures in text type due to the different ratios between these components.

x-height

Fig.1.4 typographic design: form and communication p.41 "x-height"

X-height can vary greatly between different typefaces of the same size because it is dependent on the height of lowercase letters without ascenders or descenders. When they are at least two-thirds the height of capital letters, x-heights are typically regarded as "big." When their height is half that of capital letters, they are considered "little."

Ascenders/descenders

Fig.1.5 typographic design: form and communication p.41 "Ascenders/descenders"

Depending on how large the x-height is relative to other typefaces, ascenders and descenders may appear longer in some and shorter in others. Among letters of the same typeface, descenders are typically just a little bit longer than ascenders.

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.

2. Sketches

Fig.2.1 Sketches (12/10/2022)

These are the sketches for the typefaces that I came up with. My favorite was sketch 1 but I realized it was hard to make the overlapped fonts so I decided to proceed with Sketch 5.

Fig2.2 The first attempt at sketch 5 (30/10/2022)

I first tried to digitalize sketch 5. Basically, I just traced sketch 5 by using the pen tool. I found it very difficult to make typefaces with the pen tool and the outcome didn't look consistent. I also got feedback from Mr. Vinod that my typefaces have too many core features so I should have only 2 core features. I decided to give up digitalizing sketch 5 and proceed with sketch 2 because I felt it easier to make the fonts look consistent and to have less amount of core features.

3. Identify and deconstruct references

Out of the 10 typefaces, I chose the Futura Condensed ExtraBold as a reference because my sketch was so bold and I thought it looks most similar to my sketch.

Fig.3.1 Deconstructed "A" - Futura Condensed ExtraBold reference (5/11/2022)

Fig.3.2 Deconstructed "K" - Futura Condensed ExtraBold reference (5/11/2022)

Fig.3.3 Deconstructed "E" - Futura Condensed ExtraBold reference (5/11/2022)

What I've observed throughout these deconstructing was: 

・A

    - The 2 sides of the triangle in the middle are not straight and slightly curved.

    - The angles of the outer and inner lines of A are not the same.

・K

    - The right side of the bar on the left of the "K" is not straight. 

    - The right side of the K is a little thinner toward the middle.

・E

    - The two spaces are different sizes and the space at the bottom is bigger.

    - The middle part of the "E" is shorter than the other two bars.

4. Digitalise the final font design

Fig.4.1 The process of digitalization (6/11/2022)

Firstly, I created A based on the sketch and after that, I designed E with the elements that I saved when I created A. I saved elements to use for the rest of the letters.

Fig.4.2 The process of digitalization (6/11/2022)

For the letters P and N, I used the R structure for the P and the M structure for the N.

Fig.4.3 The process of digitalization (6/11/2022)

I made the most of the edges 30 pt.

Fig. 4.4 Guides and digitalised font design (6/11/2022)

Measurements (from baseline)
Ascender: 734 pt
Capital height: 670 pt
Median: 500 pt
Descender: -233 pt

・Development

Fig.4.5 The development of the period and comma (10/11/2022)

Since Mr. Vinod suggested making the period and comma slightly wider, I did make these wider a bit.

Fig.4.6 The process of structural development - outlines (10/11/2022)

Fig.4.6 The process of structural development (10/11/2022)

5. Developing the final font in FontLab 

Fig.5.1 Copying and pasting the letters into FontLab (10/11/2022)

After finishing to digitalise the typefaces, we had to put all letters into FontLab to make my font actually usable. I copied all letters from adobe illustrator and paste them into Fontlab while watching the recorded youtube video.

Fig.5.2 Letter kerning in FontLab (10/11/2022)

After pasting all letters, we were also asked to do kerning. I followed the recorded youtube video to do kerning.

6. Final Outcome

Final Task 3: Type Design and Communication

Font Download: https://drive.google.com/file/d/1ASuX3_Zy_CmXKFQsYa15mQ36YlL4pz4w/view?usp=share_link

Figure.6.1 Final Task 3 "Lazy" - JPEG (10/11/2022)

Figure.6.2 Final Task 3 "Lazy" - JPEG (10/11/2022)

Figure.6.3 Final Task 3 "Lazy" - PDF (10/11/2022)

Figure.6.4 -"Lazy" Typo Poster A4 - PDF (10/11/2022)

---

FEEDBACK

Week 10:

Specific Feedback ... Mr. Vinod said My fonts have so many core features that it looks inconsistent so I should take away the core features and retain at the most 2

General Feedback ... if we don't know how to manage many core features in fonts when we create these, we should only have 2 core features.


Week 11:

Specific Feedback ... Mr. Vinod liked my typefaces but he also suggested making the period and comma slightly wider.

General Feedback ... We must post the process of using font lab in our blog.

---

REFLECTION

Experience

When I saw this task for the first time, I thought it was too short to finish this task and I didn't think I could make font because I didn't have any experience but once I started doing it, it was quite fun and not that hard so I could do work really fast while having fun doing it. This task was a good experience for me because now I know I can make my own fonts by myself and have tips to make good typefaces, I am more confident about creating fonts. What I learned was to create consistent typefaces, I need to repeat and make most of the letters have the core features. It was hard to make the typefaces consistent but after I got used to it, it was easy to make them consistent. The feedback from the lecturer and others' work helped me to learn how to make the typefaces consistent.

Observations

As I worked on this task, I realized that the more amount of core features, the more interesting the fonts look. The first sketch that I tried to digitalise first had many core features and the reason why I chose that sketch was that it looked interesting. Also the more amount of core features, the harder it is to make the fonts consistent.

Findings

I've discovered that even if the letters look like they are on the lines from a distance, there are actually gaps sometimes when you get up close. So I felt we need to be careful to check if there is a gap or not when we create the typefaces especially when we are working with a small device like a laptop.

---

FURTHER READING

Fig.7.1 Typographic design: Form and communication (2015)

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

Fig.7.2 Unity of design in the type font (P. 37)

I found what I can most relate to and what I have learned throughout this task on this page which is "Repeated curves, verticals, horizontals, and serifs are combined to bring variety and unity to typographic designs using this typeface" I've learned that by making the letters have core features, they will look consistent automatically. I realized that trying to make all letters have core features is the most efficient way to make them look consistent and to make them good typefaces.