Typography - Task 3 : Type Design and Communication (Font Design)

11.11.2023 - 18.12.2023 / Week 8 - Week 13

Angel Tan Xin Kei / 0356117

Typography / Bachelor of Design (Hons) in Creative Media

Task 3: Type Design and Communication

---

INSTRUCTIONS

Task 3 Type Design & Communication (Font Design)  ( 30% ) - Individual Assignment

Exercise : 

• We were tasked to design a limited number of Western alphabets. To begin, choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analyzing its anatomical parts. Start with rough sketches, explore various options, and upon approval begin digitization of the drawings—software for digitization is Adobe Illustrator and later FontLab. 
• Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use. Watch the video before starting.

Marking Criteria : 

• Evidence of in-depth research and visual analysis is visible. Multiple ideas have been explored with great care and deliberation. The design process showcases knowledge of typographic convention, methodology and production. The designs are extremely well crafted, consistent, and technically sound.

Learning Goals : 

• To develop student’s ability to construct a readable and legible font.
• To develop student’s ability to design a font with consistent characteristics premised on research and analysis.

Timeframe : 

• Week 8 – Week 10 (Deadline on Week 10)

Find out more info below...

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

---

1. Research

Before embarking on my task, I intend to conduct thorough research to gain a comprehensive understanding of the historical evolution of letterforms. My initial step involves delving into the background of letterforms to lay a solid foundation for my upcoming task attempt.

1.1 Anatomy of Typography

Actually, Mr Vinod's video has covered this detail of letterforms, I am more familiar with the components after doing research and able to describe the visual elements that make up the letterforms within a typeface. 

Figure 1.1.1 Basic Anatomy of Typography, source Week 7 (8/11/2023)

1.2 Type Classifications

These are the most common typefaces that are seen in the classification. Serifs (semi-structural details), San Serifs (“without serifs”), Slab Serifs (serifs have no brackets), Didone (Serifs extreme contrast), Monospaced (San Serifs with fixed widths), display (large size display purpose), script (mimic handwriting), black letters (Old English or Gothic), Outline (special design appearance), Symbols (ZAF DINGBAT). 

Figure 1.2.1 Basic Types Classification, source Week 7 (8/11/2023)

1.3 Counterform 

The transparent (negative or white) space is enclosed inside a letterform.

Figure 1.3.1 Counterspace between alphabets, source Week 7 (8/11/2023)

1.4 Angle of Stress 

It describes the main strokes of a typeface aimed at the baseline, based on classic calligraphic writing, where a pen would make a different mark depending on the angle at which is held.

Figure 1.4.1 Counterspace between alphabets, source Week 7 (8/11/2023)

1.5 Contrast

It is shown in different thicknesses of the horizontal and vertical strokes of a typeface’s text.

Figure 1.5.1 Stroke Contrast, source Week 7 (8/11/2023)

2. Dissection of Letters

Ms. Low has assigned us the task of choosing a typeface to deconstruct and analyze how it is designed and observe which part was changed. 

Therefore, I decided to use dissection of the letters  H o g b with the typeface of UNIVERS LT Std.

Figure 2.2.1 Dissection of Hogb using Univers Lt Std, Week 7 (8/11/2023)

Figure 2.2.2 Dissection of Ho, Week 7 (8/11/2023)

Letter H: As it is a sans serifs typeface, straight lines can just easily dissect the alphabet. There is a high contrast between vertical strokes and horizontal strokes.

Letter o: The o is vertical stress and high contrast on the side. 

                

 

  

Figure 2.2.3 Dissection of gb, Week 7 (8/11/2023)

Letter g: I see the feature of a double-story "g," which means it has three distinct loops or bowls.

Letter b: As for the letter "b", the inner counter space is the same as "g" and the "o".

3. Sketches

In this exercise, we were tasked to sketch the following letters ODHNG either in uppercase or lowercase form using the 3 different types of pens to come up with 9 different sketches.

Then I started to sketch based on the 10 fonts we have learned as references. 

Fig 3.1 Brush Marker sketch 4.0mm, Week 9 (20/11/2023)

Fig 3.2 Artline sketch 3.0mm & Roundtrip Marker 6.0mm, Week 9 (20/11/2023)

Ms. Low said that sketch is actually kind of related to our personal characteristics and feed-backed that a letterform of mine could be input more detail in strokes and only by adding details can we see the quality of characteristics introduced.

Fig 3.3 Artline pens I have used, Week 9 (20/11/2023)

Fig 3.4 Artline pen that I have used, Week 9 (20/11/2023)

Thus, I've redrawn the letters again with different types of pens this time also included some mix and match of serifs and counter forms to various details.

Fig 3.5 Calligraphy pen sketch 4.0mm & Brush Marker 6.0mm, Week 9 (22/11/2023)

Fig 3.6 Marker pen sketch 4.0mm, Week 9 (22/11/2023)

Then, Ms.Low said that my improvised sketch was better and I could shift towards digitization. My preference is more towards the brush marker sketch #6 and Ms.Low taught me that this sketch is called wedged-serifs with the inter-curve lined at each letterforms' strokes.

4. Digitisation

After getting approval from Ms.Low, we had to digitalize our words using Adobe Illustrator, so I started by establishing a guideline so that I could more easily align the letterforms.

1st Draft: 

Fig 4.1.1 First draft of my digitisation, Week 10 (28/12/2023)

MEASUREMENTS (from baseline)

Ascender: 923 pt

Cap height: 855 pt

X-height: 500 pt

Baseline: 0 pt

Descender: -64 pt

After showing Ms.Low my work, we realised that my word should be organised according to their own counter form to maintain consistency which is "OCGD S NH TILE". Also there should be a contrast part between letter "N" and "H".The vertical stroke of letter "N" should be thinner and emphasis on the middle stroke and vice versa for letter "H".

Fig 4.1.2 Weight stroke contrast, Week 10 (28/12/2023)

Fig 4.1.3 Letterform contrast, Week 10 (28/12/2023)

Since my first draft of the letter looks no different in overall and not aesthetic, I narrowed it down by checking on the descender and adjusting the height from the first to the last letter. I enlarged the letter and changed the height at the bottom of letter "G" and "S. Besides, I also adjusted my "O" and "G" should be balanced while "C" and "D" should have heavier weights for the harmonious visual relationship between the two letters while maintaining the overall integrity of the typeface.

Fig 4.1.4 Descenders of different letters, Week 10 (28/11/2023)

2nd Draft:

After Ms.Low guided me in adjustment of overall weight and strokes, we moved onwards to the punctuation.

Fig 4.3.1 Second draft of my typefaces, Week 11 (5/12/2023)

As I watched the video, I realised that the curvature part of the comma should actually be the same as S thereby I try to reduce the size of s and illustrate out a same curvature s.

Fig 4.3.2 Process of illustration of comma, Week 11 (5/12/2023)

Nevertheless,Ms. Low mentioned that this method may not be entirely replicated, emphasizing the significance of representing it in text format for a comprehensive evaluation of its overall performances.

    

Fig 4.3.3 Process of illustration of comma, Week 11 (5/12/2023)

I have used the letter "I" as a reference for width of the stroke of exclamation marks.Then , I stacked it together but at the mean time adjust the ascender because I realised that most of the exclamation marks are having ascender that are slightly higher than other letter form , whereas the same dot size as comma.

Fig 4.3.4 Process of illustration of exclamation mark, Week 11 (5/12/2023)

Final Draft:

After done my digitisation:

Fig 4.4.1 Final Attempt of my Letterform, Week 12 (12/12/2023)

After done designing my letterform, Ms.Low tasked us to utilise our typefaces on words first to's visualise and make some adjustments as its preferable to enhance its visibility.

Fig 4.4.2 Attempt of my Letterform on Words, Week 12 (12/12/2023)

5. Development of Font in FontLab 7

Notes: 

1. evaluate the recommendations 
2. import the glyphs into FontLab5; 
3. create a new font file and name it; 
4. merge the glyphs, checking that no anchor points are too near to one another; 
5. enter the guidelines. measurements
6. emphasise: -10 points
7. use FontLab 5 to paste the glyphs and modify the kerning

Fig 5.1.1 Creating New Font in Fontlab, Week 12 (12/12/2023)

Fig 5.1.2 Creating New Font in Fontlab, Week 12 (12/12/2023)

After importing the digitisation font to FontLab, I adjusted the alphabets in accordance to the width and x-height as it was not accurately the same. Then after that, I start to widen the overall alphabets respectively.

Fig 5.1.4 Kerning and Tracking the Letter, Week 12 (12/12/2023)

Also for space , I have put 150 as my typeface is thin and tall so a wider space can make the words looks slight clear for vision.

Fig 5.1.5 Trying on the Letter, Week 12 (12/12/2023)

6. Poster

Link to Download my anza Font:

https://drive.google.com/file/d/1q7Gi9CpzawVgMB0vIS1PmIFuMAF79Vgw/view?usp=sharing

Fig 6.1.1 anza Regular Font, Week 12 (15/12/2023)

Fig 6.1.2 anza Regular Font, Week 12 (15/12/2023)

The typeface we designed are required to export into font (ttf) then compose into Black and White A4 size poster. Thus, it reignited me of few words "design" , "Shine" "to" "delight", "echo" and "night".

At the beginning, I came out with the idea of scattered the words, but Ms.Low commented that it would be better to have an alignment on either centre or left-right for better readability as current poster was slightly left-aligned.

Fig 6.1.3 B&W Poster using anza Regular Font in JPEG, Week 12 (15/12/2023)

Therefore, I have refine and centralised my words and so this is my final attempt :

Fig 6.1.4 B&W Poster using anza Regular Font in JPEG, Week 13 (18/12/2023)

Fig 6.1.5 B&W Poster using anza Regular Font in PDF, Week 12 (15/12/2023)

   

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

---

Feedback 

Week 9

General Feedback :

Ms. Low said that sketch actually kind of related to our personal characteristics. Thus, we can choose our own font which can really think there is potential in developing it further. Also, when we sketch we should notice the graph paper line acts as a guideline for our baseline, x-height, strokes, and counterform thus pay attention to the small details in strokes and avoid drawing letterform.

Specific Feedback : 

My letterform of mine could be input more detail in strokes and only by adding details can we see the quality of characteristics introduced. My work is quite something like Bodoni 72 Std Book. They can now be digitized.

Week 10

General Feedback: 

Organize the word according to their own counter form to maintain consistency which is "OCGD S NH TILE". It is vital to explore variations in stroke modulation, especially in areas where the strokes intersect or diverge which adds a dynamic visual to the overall font design. Watch the Instagram tutorials on how to indicate and visualize accurate punctuation. 

Specific Feedback: 

My letters "N" and "H" should be contrasted in terms of their thickness period, pay attention to detail in differentiating the stroke weights. Also, my "O" and "G" should be balanced while "C" and "D" should have heavier weights for the harmonious visual relationship between the two letters while maintaining the overall integrity of the typeface.

Week 11

General Feedback: 

Ms. Low mentioned that we can consult the video Mr. Vinod presented to understand the process of utilizing Font Lab. In the other link, demonstrated a technique for creating punctuation, like the comma's defender part, which aligns with the S shape. However, it's crucial to note that this method may not be entirely replicated, emphasizing the significance of representing it in text format for a comprehensive evaluation of its overall performances.

Specific Feedback: 

Regarding punctuation, it's acceptable for the dot to match the width of the body of letter "T". However, it is preferable for the comma to be slightly larger and wider, as it cannot precisely follow the curve of the "s." To enhance its visibility, it's recommended to make the comma more curvaceous.

Week 12:

General Feedback:

Make sure to adjust the size (pt) of space and letter first before we start to kern the letter.AFter that, install the typefaces and utilise the font to desifn a Black and White poster. DO mind that the punctuation can act as a graphic design elements on the background but make sure that it has the same font size. Try not to add too much line or other pictograph.

Specific Feedback:

The designs is good but maybe do find a way to alternate.Second design is better as the alighnment is focus on left and right together which shows a balanced visual.

Week 13 General Feedback : Everything is good and well-acomplished.Make sure to comeplete the final compilation.

---

Reflection

Experience

While conducting the research and observation journey, I have learnt that it is critical to understand the anatomy of typography before we begin designing our own typefaces.Along the exploration, I have comprehend the fundamentals of a typefaces especially when I want to decide my own font design such as angle of distress , either serifs or sans serifs. Then , I have chose the wedged serifs among all the written calligraphy pen as Ms. Low said it suits me the most based on my draft's readability. My typeface was created using a combination of technical accuracy and artistic skill. For me, each glyph told of innumerable of try and error, trying with shapes until a pleasing typefaces was achieved. I am delighted for the readability and smoothness of my typefaces approved and ensured by an uncountable of fine-tuning the kerning and tracking.

Observation

Every curve and every serif seen in various typefaces told a story because the intricacies of the strokes and counters, along with the empty spaces, conveyed a lot. I paid close attention to how each character interacted with the others, and I became aware of the subtleties of balance and harmony in type design.I also found out that it was more than just aesthetics; it was also about readability, comprehension, and successfully using design to communicate a message.

Findings

Every stroke in the field of letterform research reveals a new insight. I examined the subtleties with great attention to detail, researching historical forms, background, and contemporary tendencies. Playing around with typefaces helped me to refine my understanding and create a unique, meaningful design.The poster, a canvas to display my invention, was the result of my study and design process. By combining my own unique typeface with thoughtful weight adjustments and proper kerning, the poster was able to tell a story and go beyond just aesthetic appeal.

---

Further Reading

Exploring Typography (2nd Edition) by Tova Rabinowitz (2016)

1. Guidelines

To ensure that every character in a typeface is on a line and has the same proportions, guidelines are necessary. The ascender line, cap line, mean line, baseline, and descender line were among the fundamental rules.

Overshoot is included in the recommendations. Because the rounded and pointed letters (O, Q, C, S, A, V, and W) appear somewhat smaller than other letters of the same size, the purpose is to produce an optical illusion that the letters are the same size as other letters.

Guidelines with overshoot

2. Contrast

Contrast is the variance between the thick and thin letter parts. Extremely low-contrast fonts look dull and low in legibility, while extremely high-contrast fonts are dazzling the eyes and distorting the letterforms, making the letterforms difficult to be recognized.

To create contrast, the stroke weights should vary in thick and thin parts. For traditional fonts, 

• capital stem stroke: 13-18% of the cap height 
• capital hairline stroke: 5-8% of the cap height
• lowercase stem stroke: 80-90% of the vertical capital stem stroke 
• lowercase hairline stroke: 70-80% of the capital hairline stroke 

- curved and diagonal stems need to be slightly wider to optically match their straight counterparts

Different stroke weights to create contrast

Curved strokes are slightly wider to create an optical illusion

3. Angle of Stress

A font's angle of stress need to be visually consistent. An average typeface typically has a stress angle that ranges from 60 to 90 degrees in relation to the baseline.

Angle of stress

4. Terminals

The stroke endings of the characters. Serifs on terminals could be present or absent, and they could be bracketed or unbracketed. The sizes and forms of the barbs, beaks, and uppercase and lowercase serifs must be decided upon, as well as the height and slope of the brackets that join the serifs to the stems. 

It will be necessary to use uniform sizes and forms for tails, cars, apexes, vertexes, and swashes in all typefaces.

Bracketed serifs