Typography Task 3: Type Design and Communication

11/11/2024 - 1/12/2024 (Week 8 - Week 10)
Felice Jolin / 0373636
Typography / Creative Media / School of Design
Task 3 - Type Design & Communication

---

TABLE OF CONTENTS

• Lectures

• Instructions

• Task 3

• Feedback

• Reflection

• Further Reading

---

LECTURES 

Week 8
Online class (Independent learning week), Mr.Max gave feedback for Task 2

Week 9
Mr.Max explain to us per table on how to execute Task 3. He first explained to us about important of uderstanding the anatomy of type. There are 7 imortant thing that we should always remember such as: baseline, x-height, ascender, descender, uuppercase, lowercase and cap height. All the letters should fall on the same baseline. Uppercase lenght could be the same as lowercase or twice more.

 Fig 1.1.1 Anatomy of Type (Week 9 18/11/24)

 

Week 10
Mr.Max showed us tutorial how to do disection on letter. Using straight lines (horizontal, vertical and diagonal) and eclipes to disect the letter. Then simply use shape builder to select the shape you want to form.

 Fig 1.1.2 Letter Disection (Week 10, 25/11/24)

 

Mr. Max also showed us the template for doing our task 3. He reminded us that baseline and x-height should be lock to ease working in Illustrator. 

 

 

 

 Fig 1.1.3 Template (Week 10, 25/11/24)

---

INSTRUCTIONS

 

<iframe src="https://drive.google.com/file/d/1hEZqAWHcsPzN3_6lobCOlY4nVPiY45Om/preview" width="640" height="480" allow="autoplay"></iframe>

---

TASK 3

For task 3, we were told to prepare A4 grid paper and 3 different marker pen. With this we are to design the letters H, O ,G, B with at least 9 different font styles with each consist of uppercase and lowercase.  Start by sketch first and finalize one style in digital. Below is the 3 markers I use: 

 

Fig 1.1.1 Artline 90, flat nib (2-5mm), (Week 8, 11/11/24)

Fig 1.1.2 Artline 517, rounded felt-tip (3mm), (Week 8, 11/11/24)

Fig 1.1.3 Artline Decorite, pointed nib/brush, (Week 8, 11/11/24)

 1. Reference 

To find inspiration befor sketching, I search 'typography alphabet design' in pinterest. 

Fig 1.2.1 Reference,  (Week 8, 11/11/24)

2. Sketches

 

I started practicing using the 3 pens I have and tried some ideas of typfaces. 

 

 

Fig 1.2.2 Sketch Practice  (Week 9, 18/11/24)

From that I revolve my idea into 17 sketches. 4 using rounded felt-nib pen, 7 using brush and 6 using flat nib pen. 

 

 

Fig 1.2.3 Sketches (Week 9, 18/11/24) 

Afterward, Mr. Max chose design 2 and 12, and told me to choose either one.

 

 Fig 1.2.4 Chosen Sketch (Week 9, 18/11/24) 

I practice using the typface and decided to choose font number 2 capital letters. 

 Fig 1.2.5 Practice for final sketch (Week 9, 18/11/24) 

Next Mr.Max told me to proceed to make the other letters and punctuation (o l e d s n c h t i g , . ! #).

 Fig 1.2.5 Final Sketch (Week 9, 18/11/24) 

 

3. Digitise

I proceed to digitize in Illustrator. I use storkes, pen tool, shape tool and direct selection tool to shape the font. Below is the process of making :

- Make 1000px high artboard, however I extend to 1500px

- Create 500px x 500px square for x-height 

- Set guidlines for descender, baseline, x-height, ascender and caps height
- Put picture of my sketch into AI for guidlines.

  Fig 1.3.1 Process (Week 10, 25/11/24)  

These are the main shapes I use to make my font. I use round cap strokes, and adjust the stroke size similar to my sketch.

 

  Fig 1.3.2 Process (Week 10, 25/11/24)   

Before settling on the final look, I tried many variations.

  Fig 1.3.3 Process (Week 10, 25/11/24)  

Finally, I found the similar size as my sketch. But some of the letters like E, D, S, C, and G are detached. so I use pencil tool to close the gap and direct selection tool to tidy up the shape.

  Fig 1.3.4 Process (Week 10, 25/11/24)  

But some of the letters like E, D, S, C, and G are detached, therefore I use pencil tool to close the gap and direct selection tool to tidy up the shape. 

  Fig 1.3.5 Process (Week 11, 2/12/24)  

After trials and error, here is the final outcome. 

 

  Fig 1.3.6 Final Outcome (Week 11, 2/12/24)   

4. Font Lab
After finalising my font in AI, I proceed to export in Fontlab. 

 

- Copy and paste the letter one by one from AI into Fontlab.

 

  Fig 1.4.1 Progress (Week 12, 9/12/24)  

- Adjust kerning of each glyphs in Fontlab.

  Fig 1.4.2 Kerning (Week 12, 9/12/24)  

 - After adjusting kerning, I try to type words to see how it looks. Some words looks quite odd and I need to adjust it individually using edit kerning tool. 

 

  Fig 1.4.3 Kerning (Week 12, 9/12/24)  

- Proceed to export my font into otf file.

  Fig 1.4.4 Export (Week 12, 9/12/24)  

- I name my font 'Felz', fonts ready to be install and use. 

 

  Fig 1.4.5 Install Font (Week 12, 9/12/24)  

5. Poster

As I export my font into otf file, I download it into my laptop and create a poster in AI. I tried several quotes and styles with my font.

  Fig 1.5.1 Poster Progress (Week 12, 9/12/24)   

After trials of the poster, and showed Mr. Max, he said that some kernings need corrections, because there are some that is quite far appart, some have very narrow space.

 

  Fig 1.5.2 Poster #1 (Week 12, 9/12/24)  

Initially, I decided to use this as my final poster, however Mr. Max said that we should include all the other alphabets. Therefore, I decided to make another one with all the letters.

Fig 1.5.2 Poster #2 (Week 13, 16/12/24)

Final Task 3
Download font here : https://drive.google.com/file/d/1bAY_PAbWvIMf2kAihATEu3v3AQzl_TNq/view?usp=sharing

 

  Fig 1.6.1 Fontlab Screenshot (Week 12, 9/12/24)  

  Fig 1.6.2 Final Task 3, JPEG (Week 12, 9/12/24)   

  Fig 1.6.3 Final Task 3, PDF (Week 12, 9/12/24)

Fig 1.6.4 Final Poster, JPEG (Week 13, 16/12/24)

 

  Fig 1.6.5 Final Poster, PDF (Week 13, 16/12/24)

---

FEEDBACK

WEEK 8 : Independent learning week

 

Week 9 

General Feedback : Mr. Max briefed us about task 3 and came to each table to explain to usdifferences of pen and clearer explanation of task 3. 

Specific Feedback : Mr.Max came to each table to demonstrate to us example usage of different kind of pen andtold us to at lease have 9 sketches by next week.

 

Week 10
General Feedback : Good sketches

Specific Feedback : I love sketches number 2 and 12, however sketch number 12 capital letter 'g' could be using the actual capital form to make it clearer. While for sketch number 2, I love both the uppercase and lower case. You can either use one of them to proceed to digitise. 

 

Week 11 

General Feedback : Overall good.

Specific Feedback : You should makesure the width of every stroke is same/similar, all the strokes should fall on the baseline. While for the hashtag, maybe you could make it straight, since the rest of the letters are in straight form. Then you can proceed to download fontlab.
  
Week 12
General Feedback : Mr.Max showed us tutorial for fontlab. letter spacing and export into otf file.
Specific Feedback : Mr.Max showed us how to export our letter from AI into fontlab, next is letter spacing. After kerning all the glyphs, some might look odd, Mr.Max I can edit certain part only that looks weird by edit kerning tool on left side tool bar. Last step is export it into otf file to be downloaded in out laptop.

Week 13

General Feedback : Consult about kerning metric in Fontlab and final poster design.

Specific feedback : It is already good, but to make it perfect maybe you could adjust the kerning between o & n in 'song'. Because the space within n & o in 'more' is bigger. The letter h & e in 'the' can also be closer. Other than that you can proceed to submit. 

Week 14 

Finish Task 4 - Compile all task into one.

---

REFLECTION

Experience : This last task was quite challenging for me. This is my very first time making my own typface from scketches. Hoever, I really enjoyed because we are free to make up our own type creativity. I was having some challenges while digitising, I practice and at last would able to bring out a satisfying outcome. 

Observation : Throughout this task, I get several findings through observing at various of typefaces. For instant, in some typefaces, the ascender is higher than caps height. Other than that, I could see my peers work, everyone has their own uniqueness and styles, we are able to share thoughts too. 

Findings : I think the most difficult part is settle on one idea/sketch. How are we to make the letters to look as one family. I have learned new insight while developing the typface itself. While constructing each letters one by one, I notice that little things matters, such as the same widht of every strokes to make it look as a family. Lastly, feedback from Mr.Max play a very crucial role for my typeface development.

---

FURTHER READING

 

  Fig 2.1 Typographic design : Form and Communication (Week 13, 16/12/24)

This time I choose the book Typographic design : Form and Communication. I start reading from letterform analysis since Task 3 require us to make our own typface. 

 

  Fig 2.2 Typographic design : Form and Communication: Letterform Analysis (Week 13, 16/12/24)

Over the centuries, letterform already have specific names for their parts such as 'baseline, x-height and capline'. However in medieval times, the horizontal lines were drawn whereas now the lines are only imaginary guidlines.

   Fig 2.3 Typographic design : Form and Communication: Proportion (Week 13, 16/12/24)

The proportion of letteform is very important : ratio of height and width, thick and thin, width of letters, and relation of x-height to caps-heihgt, ascender and descender. The proportion of the x-height significantly affects the appearance of type.

  Fig 2.2 Typographic design : Form and Communication: Typographic Font (Week 13, 16/12/24) 

Within the process of developing my font, this section is really helpful. The weights of thick and thin strokes must be consistent, and the optical alignment of letterforms must be even because a font need to be the same size and style to exhibit structural unity and relate to one another visually.

  Fig 2.2 Typographic design : Form and Communication: Optical Relationships within a Font (Week 13, 16/12/24)

Next, I found this section talking about optical relationships within a font. I found out that horizontal strokes are slightly thinner than vertical strokes to avoid looking thicker. Also curved strokes are usually thicker at their midsection to give an even appearance.