Typography - Task 3: Type Design and Communication

07/11/2023-18/12/2023 (Week 7-Week 13)
Lizzie Tanaka (0362065)
Typography | BDCM | Taylor's University
Task 3: Type Design and Communication

---

LECTURE

Week 7

On week 7, we were briefed on our third task; type design and communication. We were explained about the expectations, our task to be done by week 8. 

Week 8: Independent Learning Week

Week 9 

On week 9, we were given a demo on the different methods we can digitize our sketches. Feedbacks were also given and approvals to start the digitization process. Before we start digitizing, we spent more time refining our sketches and getting feedbacks. 

Week 10

On week 10, we had to show our progress on our digitization process to get feedbacks and then we further worked on to refine it. We were also introduced to FontLab on this week. 

Week 11

This week, we also kept on refining our typeface in Illustrator, getting feedbacks. We were given another week to finalize our letterforms before we have to start importing it to FontLab.

Week 12

On the final week of working on this task, we started importing our letterforms to FontLab 7 and began modifying the kerning and sidebearings, making sure everything looks optically neat and readble for the audience. We were also instructed to make a black and white A4 poster using only our font that we have finalized. 

---

INSTRUCTIONS

 

For task 3, our first exercise was to analyse letters H, o, g, and b in Adobe Illustrator, choosing 2 typefaces out of the 10 we were provided. Afterward, we are required to write letters o, d, h, n, and g on graph paper (can be lowercase/uppercase) using 3 different markers with more than 3.0 weight. We have to do a different style for each marker. Then, we have to digitalize our letters and refine them. 

A. Process Work

1. Analysing Type 

For the analysis of type, I chose to do Futura Book and ITC Garamond Light Narrow. I chose a sans serif and a serif type. 

Fig 1.1 Futura Book type analysis (W8 12/11/2023)

For 'H', I noticed that the left and right leg are equal in width. When adding the guidelines in Adobe Illustrator, I also noticed that the ascender of the lowercase 'b' is higher than the uppercase 'H'. For letter 'o', from a glance, I thought that it would be a perfect circle. However, when trying to fit in a perfect circle, it seems like the inner part is a little narrower on its sides. The stress in the 'o' is also upright because it all has the same width (no thinner/thicker stroke). 

For letter 'g', I noticed the finishing curved stroke of the letter is not vertically aligned to the bowl. The curved stroke is not as outwards as the bowl. The bowl itself isn't a perfect circle as well, it is narrower and the counter of the 'g' is placed more to the right, a little exceeding the stroke probably to optically adjust it so that it looks balanced and centered. For letter 'b', I noticed that the bowl is also not a perfect circle, it is narrower. And the left part of the bowl that overlaps with the stroke is also thinner than the right part of the bowl that is outwards. The more inner part of the bowl that is almost intersecting with the stroke is visibly thinner as well. 

Fig 1.2 ITC Garamond Book Narrow type analysis (W8 12/11/2023)

For letter 'H', I noticed that everything is relatively equal, only minor differences such as on the bottom right serif where it isn't exactly aligned with the one above it. For letter 'o', the weight of the thin and thick strokes are equal on both left and right as well as top and bottom. The shape of the letter is more oval than circle with un upright stress where the thin strokes are complete opposites. 

For letter 'g', the upper bowl looks like it is a perfect circle but it isn't, it's a little narrower. The counter on the upper bowl is also not exactly upright, it is a little tilted to the left, so the stress isn't really exactly upright. As it is quite visible, the top part and the lower part isn't exactly vertically aligned as well, the bottom part is wider. For the lower bowl, the oval shape is also not exactly upright and it is a little tilted to the right. The top stroke on the lower bowl is also noticeably much thicker than the bottom left stroke. For letter 'b' everything was almost aligned especially the left stroke and the thick stroke of the bowl. 

2. Letter Sketch

When starting out, I didn't have anything in mind so I started freely trying out as much styles as I can. I sketched the letters on a graph paper with three different markers. I chose a 4.0 Calligraphy Pen, a pointed brush nib, and a 5.0 round nib marker. Fig 2.3 until 2.5 are the 9 finalized sketches. 

Fig 2.3 Sketch (4.0 Calligraphy Pen) (W8 13/11/2023)

Using a 4.0 calligraphy pen, I tried exploring the different weights. On 1a, the contrast is on thicker vertical strokes and thinner horizontal strokes. On 1b, I worked on the same contrast but added a more italic style and modified the vertical strokes to look more wavy. On 1c, the contrast is on thicker horizontal strokes and thinner vertical strokes. 1C is my preferred sketch because I think it has more character to it since it's a reverse contrast, which is different to regular fonts. 

Fig 2.4 Sketch (Pointed Brush Nib) (W8 13/11/2023)

With the pointed brush nib, I wanted to explore thinner weights for my letterforms. In 2a, I wrote the letters in a regular size and width. In 2b, I wrote my letters in a more condensed width and finally in 2c, I made the letters even more condensed (1 square) and I wanted the letters to have a straighter edges. Compared to the first two sketches, they have rounded edges but 2c has straighter ends. 

Fig 2.5 Sketch (5.0 Round Nib) (W8 13/11/2023)

When using the 5.0 round nib marker, I began writing in the simplest form. 3a is a plain and simple lowercase set of letters with monoline stroke. When writing32b, I decided to write in script but in a more handwritten style with monoline stroke as well. For 3c, I wrote the letters in an extended style but still in a monoline stroke. I felt like it was hard to get a contrast in the strokes using this marker. 

After showing my sketches to Ms Hsin and Mr Vinod, they approved of 1C and asked me to write the rest of the letters and punctuations. Ms Hsin advised me to try writing both in condensed and more expanded styles as well as the uppercase letters. 

Fig 2.6 Condensed style (W9 21/11/2023)

Fig 2.7 Expanded/regular style (W9 21/11/2023)

Fig 2.8 Uppercase letters (W9 21/11/2023)

There were several feedbacks on the letters such as the 'S' which looks too rigid, where I should curve the top and the bottom more. Mr Vinod and Ms Hsin agreed that the more expanded/regular style is able to show the characters more than the condensed one and it is more readable as well. Afterward, it was approved to be digitized. 

3. Digitization

1. Adobe Illustrator

Below is my first attempt and rough draft of digitized version. I mainly used the ellipse tool and rounded the edges, the pen tool and the rectangle tool to create the first basic shapes. This first draft was unclean and still messy. The goal was just to see the basic shapes of the letterforms.  

Fig 3.1 First attempt at digitalizing (W9 21/11/2023)

I proceeded to clean the letters up and make the curves smoother such as the ones in 'n' and 'h'.

Fig 3.2 Second refinement (W9/21/11/2023)

Below is after I adjusted the spacing and modified the widths in 'e'.

Fig 3.3 Third refinement (W9 21/11/2023)

Here is my progress on week 10 (28/11/2023). I modified the letter 'o' to be a little condensed because it looked a lot bigger than the rest of the letters, however this is still something to be worked on. I've also modified the dot on the letter 'i' and the curve on letter 'g' since I felt like it was too rigid. 

Fig 3.4 4th refinement (W10 27/11/2023)

Fig 3.5 is more refining in class. I changed up most of the letterforms such as the 'o' which I attempted to make it look optically the same width with the other letters. I've also modified the 's' to be more curvy and narrow, same goes for most of the letters. Letter 'c' was condensed but it looked too rigid. I've also changed the bar of the 't' to not go beyond the stroke. Letter 'i' was also modified by making the dot above it thicker. Letter 'g' was also refined again, reducing its weight. 

When I showed Ms Hsin my progress, she told me that I needed to standardize my character's features. Some of my letters have more curvy strokes but some is straight and rigid. I needed to standardize my letters and make sure the sizing is optically aligned because some letters look wider than some other. I've also noticed that the weight of the thick strokes are inconsistent between each letters. 

Fig 3.5 5th refinement (W10 28/11/2023)

Over the next few days, I kept on refining my letters. I noticed that the width are not consistent at all so I used vertical guides to keep each letter's width equal. My particular struggle at this point was letters 'o' 'l' 'e' 's' 't' and 'g'. For letter 'o' I increased the width but it ended up looking way larger than the other letters. Letter 'l' was given a slight curve after I noticed that on the other letters there are curves. I added the weight on the thick stroke on letter 'e' and made it more rounded. Letter 'd' became a little more rounded and letter 's' was wider with a more square-shaped ends. I also added more curve on the descender of 'g' and made 't' wider. By this point, I was confused whether I want my letters to be more rounded or more rigid. Letter 'c' was also wider and less rigid. 

Fig 3.6 6th refinement (W10 01/12/2023)

I tried to arrange them to form the word 'the design school' to see if the letters look consistent. I've also reduced the end of the 'l'. Letter 'o' was modified again to be more condensed and was added some weight. I didn't really like the way some letters look such as the 't' 'e' and 'l.' 

Fig 3.7 Week 11 draft (05/12/2023)

On week 11's class, I asked Ms Hsin for feedback on what to change. She told me that I should make the letters more standardized by following the shape of a certain letter. The letter ended up being the 'o.' I modified most of the letters using the 'o' as the basic form. This ensured that the width is all equal and the shape is equal, none too rounded or too rigid. Ms Hsin also told me that I should adjust the 't' first and then the 'l' would follow a bit narrower. 

Fig 3.8 Modifying letters to follow the form of 'o' (W11 05/12/2023)

Fig 3.9 Modifying letters 't' and 'l' before and after (W11 05/12/2023)

On week 12, Ms Hsin said everything was okay to be imported but I needed to modify the 's' because the corner on the right curve is wider than the one on the left. 

Fig 3.10 Refining letter 's' before and after (W12 12/12/2023)

By week 12, I've finalized my letterforms and Ms Hsin also approved of it and it was good to start importing to FontLab. I've measured my sizes for the descenders, ascenders, cap height and x-height beforehand. 

Fig 3.11 Week 12 final draft (12/12/2023)

Below is my progression on all letters. 

Fig 3.12 Letterform progression

Fig 3.13 Drafts from Illustrator 

FontLab Process Work

In class, I exported my letterforms to fontlab with the measurements. Fig 0.0 below is before I modified the sidebearings and kernings. 

Fig 3.14 1st draft on fontlab (W12 12/12/2023)

I decided to set letter 'o' and 'n' with a value of 50 in their sidebearings, both left and right sidebearings. I followed the guide given by Mr Vinod on setting the sidebearings. I didn't like the kerning, I thought I should reduce the kerning. I've also noticed I imported the wrong 'h' letterform here. 

Fig 3.15 2nd draft on Fontlab (W12 12/12/2023)

On my third draft, I decided to reduce the sidebearings to 25. I've also noticed my number sign is not placed correctly on the baseline. Mr Vinod also suggest making the comma longer. Ms Hsin also pointed out that my 'd' and 's' is a little wider than other letters. Furthermore, I noticed the thin stroke on 'd' and 'h' isn't equal so I edited it. Letter 'h' also has a thicker stroke on the ascender compared to the ones within the x-height. 

Fig 3.16 3rd draft on Fontlab (W12 12/12/2023)

Fig 3.17 'd' and 'h' refinement (W12 12/12/2023)

Below is my final draft after the edits and the draft that I exported as my final typeface. I decided to name my typeface 'Rush.' I tried using the sentence 'the design school' as well to see if everything looks coherent and consistent. 

Fig 3.18 Final draft on Fontlab (W12 12/12/2023)

Fig 3.19 Final typeface on Fontlab (W12 12/12/2023)

4. Poster 

After having my font exported, I worked on the typography poster that we have to make with our own typeface. Below is my first draft of the black and white poster in an attempt to include the punctuations as well. Ms Hsin told me that if possible, the words should mean something and I should try using other words. 

Fig 4.1 First draft of poster (W12 12/12/2023)

I came up with this poster over the next few days which I tried my best to use words that only include the letters I made. 

Fig 4.2 Second draft of poster (W12 16/12/2023)

I made another draft since the poster has to include all my letters. 

Fig 4.3 Third draft of poster (W13 19/12/2023)

B. Final Result

Fig 5.1 Poster - Black (W13 19/12/2023)

Fig 5.2 Poster - White (W13 19/12/2023)

 

Fig 5.3 Poster Black - PDF (W13 19/12/2023)

Fig 5.4 Poster White - PDF (W13 19/12/2023)

Fig 5.5 Final Font Construction - JPEG (W12 16/12/2023)

Fig 5.6 Final Font Construction - PDF (W12 16/12/2023)

Typeface measurements:

- Ascender: 725pt

- x-height: 497pt

- cap height: 694pt

- descender: -225pt

Font Preview:

Letters 'o' 'l' 'e' 'd' 's' 'n' 'c' 'h' 't' 'i' 'g' '.' ',' '!' '#'

lowercase letter set

Download 'Rush' here!

---

FEEDBACKS

Week 7: General: Don't use italics for all the text, only for highlighting purposes Specific: -

Week 8 (Independent Learning Week)

General: - 

Specific: - 

Week 9

General: Remember to write the letters, not draw the letters
Specific: Interesting sketch as I managed to explore different weights and different contrasts in strokes as well. Good in exploring the weights, expanded to condensed style, contrasting stroke (sketch). Make the alphabets more equal in size, explore condensed and expanded style, uppercase/lowercase.

Week 10

General: Remember that your artboard should be 1000pt
Specific: The letters should have a smoother transition and try to standardize the features of each character and the sizing too.

Week 11

General: Put anchor points on the important parts, remove unnecessary anchor points to make it easier when editing.

Specific: Counterforms need to be standardized in width and shape. Letter 't ' and 'l' might need to be more condensed. Letter 'l' should be narrower than 't' so adjust the 't' first. 

Week 12

General: Arranging the letters into a word can make it easier when adjusting the kerning. 

Specific: Letter 'D' and 'S' is wider than the other letters. The right corner of transition in 'S' is wider than the one on the left. Mr Vinod also suggested that the comma can be longer. 

Week 13:
General: Use all letters in your font for the poster since the purpose is to promote your font

Specific: The poster already looks good

---

REFLECTIONS

Experience: By far, this is the hardest and the most time consuming project in this semester. I've always been fascinated and interested with typefaces and typography in general so getting an experience of creating my own typeface was rather a fun process, despite being very time consuming. It was tricky to utilize the pen tool well even though I'm not new to the tool itself. I think the hardest part of this process was making sure the entire letter set is consistent in its curves, width, overall shape, counter-forms and more. I find that it's not a simple process when trying to optically adjust the letterforms so that one doesn't stand out by itself. Overall, I enjoyed the process and I learned a lot of new things about typefaces and constructing them. 

Observations: I observed that a typeface is not easily created and it takes a lot of time and attention to detail. An eye for details is very important in the process of creating a typeface. Creating typefaces isn't just using creativity but it needs to be readable for the audience.

Findings: During the process, I find that consistency is incredibly important as it can affect the overall look of the typeface for the readers. I tend to overlook the small details and changes, thinking that they don't create a visible change but when comparing it again, I realized how the small details helped making the overall typeface look united and not like different fonts. I also find that in anchor points, the less the better because I also tend to have extra unnecessary anchor points that only makes the process of refining more difficult, especially when two anchor points are too close to each other. 

---

FURTHER READING

Week 7:

For task 3, I decided to read from this book:

Fig 6.1 Typographic Design: Form Communication' by Rob Carter (6th Edition)

For week 7, I chose to read about proportions of the letterform.

Fig 6.2 Proportions of the letterform (Week 7)

1. Stroke - height ratio

The height of the letter is ten times the stroke width in Roman inscriptions (based on grid measurements). Reducing or expanding the normal stroke width can really change the appearance of the letterforms.

2. Contrast in stroke weight

Change in the contrast between thick and thin strokes can modify the optical appearance of the letterforms. In Old style typography, designers attempted to copy visual properties of writing with a pen which were thick and thin strokes. The term used is called 'stress'. After time passed, designers are no longer affected by the visual properties a pen writing produced. In sans serif typefaces, stress no longer appears and most sans serif typefaces use monoline strokes. 

3. Expanded & condensed styles

Can alter the design qualities of a font when widths are expanded or condensed. Condensed styles take up much less space on the page. 

4. x-height and proportion

The relationship between x-height and capital, ascender and descender heights is important as it affects the optical qualities of typography. 

Week 8: 

For week 8, I decided to read about optical relationships within a font. 

Fig 6.3 Optical relationships within a font (Week 8)

1. Pointed and curved letters have a little more weight at the top/bottom guidelines that make them seem shorter so the apexes of pointed letters usually goes beyond the baseline and the capline. Curved letterforms are also usually draw slightly over these lines so that it doesn't seem too small. 

2. Horizontal strokes are also drawn slightly thinner than vertical ones to avoid appearing too thick.

3. Tight junctions where strokes meet are also mostly opened slightly so that it doesn't look too thick. 

4. Stroke weight of compact letterforms like closed counterforms are drawn a little smaller to balance the weight optically. 

5. Curved strokes are usually thicker at their middle part than vertical strokes. 

Week 9

Fig 6.4 Classification of Typefaces (Week 9)

a. Weight: defined by the ratio between the width of the strokes and their letterforms. Normal weight is around 15% of its height, bold is around 20% and a light weight is around 10%. 

b. Width: ratio between the black vertical strokes and the white intervals. When the white interval is larger, the letterform is wider. Normal width is 80% of its height, condensed is around 60% of its height and an expanded letter is 100% of its height. 

c. Posture: Roman letters slanting to the right with the same structure of an upright roman letters are called oblique. Italic letters are based on handwriting and are different structurally from roman letters. Italic letters with a connecting stroke on its end are called script. An approximate of 12% slant is considered normal.

Week 10

Fig 6.5 Classification of Typefaces (Week 10)

a. Thick/thin contrast: Referring to the relationship between the thinnest and the thickest parts of the letters. This can create different visual textures in the letterforms. 

b. x-height: This can vary between different typefaces of the same size. It's considered large when they are at least 2/3 of the height of the capital letters and small when they are one-half the height of capital letters. 

c. Ascenders/descenders: It may appear longer in some typefaces and shorter in others depending on the size of the x-height. Descenders are mostly slightly longer than ascenders. 

d. Stress: This is a prominent visual axis from the relationship of thick and thin strokes. It can be left/vertical/right angled. 

Week 11

Fig 6.6 Interletter and interword spacing (Week 11)

When the texture and the intervals between typographic elements are consistent, it creates a legible text. Texture is affected by qualities that are unique to the design of specific fonts. Too much or too little space between letters and words destroys the unique texture that the designer wanted. Space between the letters and words should be proportional to the width of the letters. 

Week 12

Fig 6.7 Type family (Week 12)

For week 12, I decided to read about type families. 

> Defined as a group of related typefaces, unified by a set of similar characteristics in the letterforms. Each face in it is an individual and has been created by changing the visual aspects of the parent font. 

> Earlier fonts only had three: Roman, bold, italic

> Change of stroke creates bold and thin variations. Bold fonts bring impact to the titles, headings, and display settings. 

> Change of angle creates an italic/oblique variation. Nowadays, italic variations are used to emphasize information, in contrast with roman variations. 

> Weight changes: Changing the stroke width relative to the height of letters creates a whole other variation. England standardized that each typeface should contain 8 variations, from extralight to ultrabold. However, usually 4 weights (light, regular, medium, bold) is enough for many purposes. 

> Proportion: Changing the proportions of letterforms such as making the letters wider or narrower can also create another variation. Wider letterforms are called expanded and narrower letterforms are called condensed. There is no standardized terminology for the variations in type families, it differs in between typefaces. 

> Angle: When italic fonts retain their curvilinear strokes inspired by handwritings, it is considered a cursive/script font. Those that only slant the stroke angle are better known as obliques. 

> Elaboration: This adds complexity, details, and ornamentation. It can include an outline/inline/3D effects on the letterforms. These variations should be used with great care by the designer.