TYPOGRAPHY / TASK 3 - TYPE DESIGN & COMMUNICATION

17/10/2022 - 07/11/2022  /  Week 8 - Week 11
Chew Zhi Ern / 0358995
Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 3 / Type Design & Communication

---

LECTURES

Lecture 11: Task 3A

Typeface Construction (Shapes)

The letters to design: a e t k g r i y m p n ! # , .

The process to digitize and create or construct the sketch that has developed:

1. Open a new file in Illustrator (New > File > Rename: Typeface Design > Width&Height: 1000points)
2. Drag the artboard to the top left and duplicate more artboards (about 4)
3. Bring down the 4th artboard and extend it a little more to provide space to develop all the characters and letterforms
4. Create a rectangle: Width: 5000points, Height: 500points
5. Letters and the Rectangle sit within the artboard
6. Create the basic structure (Ctrl + R > Drag and Drop the guide from the top to identify the median line, baseline, ascender height, cap line and the descender line)
7. Lock the guides (Right Click > Lock Guides)

Example of the settings

Two ways to design letterforms: 

1. Shape tools
• Shapes them all 
• Duplicate all of them including the guides to a new artboard after done making the rudimentary construction to maintain the original parts
• Always finesse it in the second artboard that has been duplicated
• Combined all the shapes (Pathfinder > Shapes Mode > Unite)
2. Pen tools

Illustrator To Fontlab 5 & Fontlab 7 Demo

1. Measure the height of letters in the cap height, ascender height and the descender height
2. Combining the shapes of the letterforms
3. Begin the process of importing those glyphs into Fontlab
1. Create a new font file (File > New Font)
2. File > Font Info > Names & Copyright > Family Name: Named it > Weight: Regular > Width: Normal > Style Name: Named it > PS Font Name: Named it > Full Name: Named it > Menu Name: Named it > Save it by clicking OK
3. Metrics and Dimensions > Key Dimensions: Key in the values > OK
4. Edit > Preferences > Paste & Duplicate
5. Import the letters (Copy & Paste)
6. Double-click on the letter cell
7. Go back to Illustrator > Drag the x-coordinate and y-coordinate, place it left down of the letterform > Copy and Paste all letters to Fontlab
8.  Windows > New Metrix Tab > Open Show Text Bar & Show Metrics Table
9. Adjust all letter's left and right bearings & Kerning
10. File > Export Font As > Open Type TT > Save

---

INSTRUCTIONS

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

---

Task 1: Exercises - Font Design

WEEK 8

Independent Learning Week. No Class!

Below are some of my sketches of typeface design:

Figure 1. Sketches of my design (18/10/2022)

WEEK 9

Public Holiday. No Class!

• Provide feedback for Task 3 via Zoom

Figure 2. Digitalization for Task 2 (20/10/2022)

WEEK 10

This week's class was online. Mr. Vinod has gone through each student's work on Facebook and given some feedback on the typeface design. He also demonstrated digitizing using Illustrator to show us the better results.

Figure 3. Redesign sketch work (26/10/2022)

Figure 4. Digitalization outcome (28/10/2022)

Figure 5. Poster design using own designed letters (28/10/2022) 

WEEK 11

In week 11, we posted our digitalise work on Facebook and Mr. Vinod had gone through them one by one with some feedback and comment as well. Then, he briefed us on the submission date and some requirements of this task. After that, we have a discussion session on the special task.

I was not satisfied with the previous design, so I designed a new letter font by using the shapes tool. Every letter is constructed by a pointed rectangle.

Figure 6. The frame of the font design (04/11/2022)

Figure 7. Padded the internal fill (04/11/2022)

Figure 8. Redesign final outcome in JPEG Format (05/11/2022)

Figure 9. Redesign final outcome in PDF Format (05/11/2022)

Figure 10. Some important measurements (06/11/2022)

• Ascender: 732.23 pt
• Cap Height: 693.87 pt
• Median Line: 499.15 pt
• Baseline: 0 pt
• Descender: -230.04 pt

After digitalising the font in Illustrator, we are required to generate our typeface in Fontlab. I followed the steps in the lecture and here is my outcome:

Figure 11. Copy Paste to Fontlab and adjusted the kerning (06/11/2022)

Figure 12. Poster using own typeface - JPEG Format (06/11/2022)

Figure 13. Final Poster Design - JPEG Format (14/11/2022)

Figure 14. Final Poster Design - PDF Format (14/11/2022)

Click me to download the font ~

---

FEEDBACK

Week 10

Specific Feedback: 

• The hashtag's slant and height are wrong.
• The letter 'T' is wrong too.

General Feedback: 

• It's too rudimentary. 
• For it to work, need to have a mix of curves as well as sharp fonts.
• Need to redesign it carefully as it's not working in its current shape.

Week 11

Specific Feedback: 

• The serifs are not united, it's got all kinds of things in it.

General Feedback: 

• It's quite a long way from having a consistent character and a really good understanding of typeface design.
• There are three different typefaces in there, need to decide which should stay and which should go. 
• Ensuring some levels of consistency in the gaps, as there are none right now.

Week 12

Specific Feedback: 

• The arrangement such as the name, font name and year is too far away from each other. Should rearrange it.

General Feedback: 

• The poster should be balanced and symmetry.
• The point size of the details should be 12pt

---

REFLECTIONS

Experience:

It was a very different experience. The typographic design may seem simple, but it is very difficult in practice, especially when digitalise. There have to be many steps in this process, from doing some referencing, exploring ideas, designing, and then learning how to convert the draft to digital and make sure the typeface is clear and functional. I think it's very good to improve after others' feedback because when designing typefaces, there are many small details that cannot be discovered by ourselves sometimes. Through this project, I learned some basic knowledge of font design, and what is a good font, also exercised my operational ability.

Observations:

Through this task, I observed that some fonts seem to be the same, but in fact, they are not, and there are many small details hidden in them. Sometimes changing small details can give a font a better look. The thickness, length, and width of fonts must be studied carefully and slowly.

Findings:

I found that designing typefaces takes a lot of time to learn and research. Furthermore, patience and observational skills are indispensable in this task. This is not an easy process, with many techniques and details to consider. Designing a good font turns out to be such a difficult task.

---

FURTHER READING

Screenshot of the website - When Typography speaks louder than words (12/11/2022)

https://www.smashingmagazine.com/2012/04/when-typography-speaks-louder-than-words/

This article explores when the visual elements of typography speak louder than words. It discuss a range of examples, from verbal language that inspires and shapes visual treatment to visual language that dominates verbal meaning.

Visual Language:

(Professional graphic design) Refers to the meanings created by the visual appearance of both text and image. 

(In this article) Refers to the character and significance created by carefully selected typography. 

Verbal language: The literal meaning of words, phrases and sentences.

Manipulating Feelings And Reactions

The visual language established when designing with type can bring into play not only emotions, but also physical responses. The following examples are simple illustrations of the varied and emotive effects and highly dominant control that can be achieved by changing the visual language of a message, while still presenting the same verbal language.

This first of a pair of illustrations shows a single large bold word, set in lowercase and closely kerned. The positioning in the frame makes the word dominant and loud, and the message comes across as enthusiastic, friendly and confident. The person speaking is pleased to see you and is coming towards you with a big smile on their face.

The second illustration contrasts dramatically with the first, despite featuring the exact same greeting. The font, case, scale, color and positioning all suggest a considerably more distant and hesitant meeting. In fact, you would be forgiven for thinking that the person speaking here is not at all sure they even want to acknowledge you and would have preferred to ignore you completely.

- There is an infinite range of typographic alternatives that achieve subtle or dramatic changes in volume and tone of voice.

Making The Most Of Visual Language

Verbal language is often used to inspire and shape design and typography in order to get a message across, with the goal being to make the most of the viewer’s reaction. Carefully mixing a design’s implication with literal meaning can lead to a memorable outcome. Typography is used to communicate tone of voice, personality, age, gender and mood, and it can be easily manipulated. 

The Power Of Typography Cannot Be Underestimated

Typographic treatment works alongside verbal language to create, enhance and alter meaning. While the aesthetic value of design is always important, the significance of type in influencing meaning should not be underestimated.