Typography / Task 3: Type Design & Communication

November 14 - December 12 / Week 9 - Week 12

Sheren Princessa Davon / 0362134

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 3

INSTRUCTIONS

Task 3: Type Design & Communication

For this task, we are tasked to create our own type designs using the letters: o l e d s n c h t i g , . ! #

Research & Understanding

First, I chose a typeface Futura Std Book, then I dissected each letters from H o g b to study each character.

Fig 1.1 Letter dissection

Below are my findings from this dissection:

1. Letter H:

The two vertical strokes are slightly thicker than the horizontal stroke.

2. Letter o:

Both of the inner and outer circles that make up the letter are perfect circles with the same points in the curves. The only differences are their sizes.

3. Letter g:

The circle that makes up the inner shell of the top part of the g isn't a perfect circle, I had to create points and adjust them myself. The outer shell of the top part is similar to the inner circle, enlarged. The downward curve of the letter is a different set of points that make up a sphere. Both inner and outer part of the strokes have different points. The vertical stroke on the right side of the letter is slightly thinner compared to the vertical stroke of the letter H.

4. Letter b:

The inner and outer circle that make up the letter is quite similar to the letter g, however the comparison is that the circles are more narrow in the left side. The vertical stroke also has the same thickness as the vertical stroke in the letter g.

Sketches

Then I began sketching the letters o d h n g using different types of pens. I used two broad-tip pens with 2 different thicknesses, and a brush pen with thickness of around 2.0.

Fig 1.2 Pens I used

With each pen, I developed 3 different outcomes, experimenting with different styles and lower and upper cases.

Fig 1.2 Sketches from 3 different pens

Then during class, I consulted Ms. Hsin for her feedback and we decided on sketch #1. She told me to further experiment with the different letters using the same style, making sure the x-height of the letters are consistent.

After several attempts of doodling and writing down the letters with the same style, I finally produced the final sketch for the rest of the letters in o l e d s n c h t i g.

Fig 1.3 Sketch #2

Digitization

After the letters were approved by Ms. Hsin, I started to digitize them on Illustrator. I placed my sketch as a template and traced over them using strokes before creating it into a path object.

Fig 1.4 Digitizing in Illustrator

This is the first draft of the letters after digitizing them:

Fig 1.5 Letter Digitization #1 - Week 10 (28/11/23)

After getting feedback from Ms. Hsin, I started to experiment with different strokes as well. I decided to change the letter s to a different design.

Fig 1.6 Left: Original. Right: New Version

I also cleaned up some of the uneven edges and strokes. For example, the final upward strokes in some of the letters.

Fig 1.7 Left: Before. Right: After

I also shortened the stem of the letter "t" as it is typically shorter than the height of the other letters. I was then able to finalize the letters for my own font design.

Fig 1.8 Final Type Digitization - JPG. Week 12 (12/12/23)

Fig 1.9 Final Type Digitization - PDF. Week 12 (12/12/23)

Illustrator to FontLab

Afterwards, it was time to export the vector fonts from Illustrator to FontLab in order to be able to actually use it as a font. But before that, I measured the Cap Height, Ascender, X-height, and Descender for the letters.

Fig 1.10 Measurements

Ascender: 500 pt

Cap Height: 452 pt

X-height: 283 pt

Baseline: 0 pt

Descender: -202 pt

I inputted the values into Fontlab and copied the glyphs of each letter and pasted them in each letter.

Fig 1.11 Values in Fontlab

Below is an example of how it looked like:

Fig 1.12 Copying letter "i" glyph

After I had successfully exported all the letters into Fontlab, it was time to create the spacing and kerning for each letter. I created a New Metrics Tab and typed down all the letters. Then I followed the chart given in MS Teams as a guide to the spacings of the left and right sidebearnings.

Fig 1.13 Spacing chart

Fig 1.14 Fontlab Progress

These are the values for the right and left sidebearings for each letter:

Fig 1.15 Left and right sidebearings

I decided to test it out on some words before finally exporting the font, just to be sure.

Fig 1.15 Testing out words

After the spacings looked good, I exported the font and decided to name it Striker since the font looks "sharp" and I felt like the name was really fitting.

Below is the link to download the font:

https://drive.google.com/file/d/1Ev2-QnugPQjgbAS9NOsGP4e0eUxd5qE3/view?usp=drive_link

BnW Poster

I installed the font onto Adobe Illustrator and decided on a phrase that contains all the letters created in the font.

Fig 1.16 Poster Progress on Illustrator

Fig 1.17 Poster options

I created 2 posters with a white and black background. I decided on the black background as I feel like it illustrates the text more. Thus, I was finished with the final part of Task 3.

Fig 1.18 Final Task 3 Poster - JPG. Week 12 (12/12/23)

Fig 1.18 Final Task 3 Poster - PDF. Week 12 (12/12/23)

FEEDBACK

General Feedback

Sketch:

- make sure x height is consistent

Specific Feedback

Digitization (Fig 1.5):

- Make sure the upward flick stroke in d h t are the same

- Stem of letter t is too long

- Smoothen out the uneven edges

REFLECTION

Experience

This task was quite the complicated experience, I've always liked doing calligraphy and I'm glad I was able to put these skills of mine into use. I enjoyed the sketching process and experimenting with different pens and styles.

The digitization process was quite complicated for me as I had trouble making the strokes smooth, as well as maintaining a consistent width throughout the letters. I realized that I could maintain this consistency by just duplicating the same strokes in order for the overall font to be more cohesive.

Observations

Starting with the skeletons of the letters, then working and brainstorming into additional strokes was really helpful. With the plain letters as strokes first, I was able to envision some unique ideas I could incorporate in my design.

Findings

I did some research before starting the digitization process, I refreshed my memory on the different anatomy of a typeface, the distinct features in a typestyle and the basics in order to be able to design my own typeface. With this research, I was able to digitize my sketches more easily as I had a clearer understanding of the structures of these letters.

FURTHER READING

To get further understanding of type design, I decided to do some research beforehand. I read a few pages on the Typographic Design: Form and Communication by Rob Carter:

Typographic Design: Form and Communication by Rob Carter

The Anatomy of Typography

Quick recap on the major components of letterforms:

Fig 2.1 Major components

Proportions of letterforms

Stroke-to-height ratio

- in Fig 2.1, the height of the letter is 10 times the stroke width

Fig 2.2 Referenced font

Contrast in stroke weight

- different stroke weights create contrast between letterforms

- can be seen in Fig 2.3, the letterforms have different stroke weights that create different vibes to each of them

Fig 2.3 Letter 'O' in different letterforms

Expanded and condensed styles

- letterforms can change dramatically when the widths of it are expanded or condensed

- however the stroke-to-width ratios in both examples in Fig 2.4 are still the same to each other

Fig 2.4 Expanded and condensed

x-height and proportion

- the proportions between the x-height and cap height, ascender, and descender is very influential to the letterform

- the example in Fig 2.5 are all set at 72 points, however they have different heights

- as can be seen, the proportions between these details can really affect a letterform

Fig 2.5 Proportions

Optical relationships within a font

- pointed & curved letters (A, O) have little weight on the top which makes it seem a bit short

- to make them look the same height, extend the apexes of the pointed letters beyond the baseline and capline

- same goes for curved lettes

Fig 2.6 Pointed and curved letters

- in some fonts, capital letters and numbers have different heights (Fig 2.7)

Fig 2.7 Different cap heights

- horizontal strokes are usually slightly thinner than vertical strokes (Fig 2.8)

- this is to avoid the horizontal strokes looking too thick

Fig 2.8 Horizontal and vertical strokes

- curved strokes are usually thicker at their midsection than vertical strokes (Fig 2.9)

- this is to make sure they look more even

Fig 2.9 Curved vs vertical strokes

Unity of design in the type font

Though there are 26 capital letters, 26 lower case, ten numerals, several punctuations and symbols, a type design has to have similar attributes to make sure there is consistency and unity in the letterform.

For example in the Times Roman Bold font:

- curved capitals share a similar round stroke