Typography Task 3: Type Design and Communication

June 03, 2024

Typography Task 3: Type Design and Communication

Date: 4 June 2024- 22 July 2024

CHONG CHENG TAO (0371072)

Typography | Bachelor of Design in Creative Media | Taylor's University

Task 3: Type Design and Communication

List

LECTURES

Week 9

In the video, we are suggested by Mr Vinod that when we finished the first rough deisgn, try to look out a similar font from the 10 typefaces provided as reference.

Use the guideline to identify x-height, baseline, medium line, cap line, ascender height and descender height.

*Size of x-height: 500 pt x 500 pt

Shapes tool and pen tool are used to design the typeface. Duplicate the design to maintain the paths.

Week 10

The shape of the period is related to the dot of letter "i", which should be slightly larger. Heavier fonts require heavier punctuation.

Fig 1.10.1 Shape of period

A round period has slightly less overshoot than the O. Rectangular periods should sit directly on the baseline. A period should be large enough to indicate a pause in the text, but not interfere with the flow of reading

Fig 1.10.2 Size of period

The comma is roughly the height of two stacked periods. The comma’s head should be slightly smaller than the period

Fig 1.10.3 Size of comma

The downstroke terminal's angle could be related to the angle in the letter "S".

Fig 1.10.4 Downstroke of comma

Different stylistic of comma:

Round
Drop-shaped
Sharp
Squarish
Bent
Diagonal

Fig 1.10.5 Size of comma

In the lectrue video, we are encouraged to use brush option to manipulate the typeface.

Week 11:

We are instructed to download FontLab 7 (Demo version) The final has to be done in the full version in the D7.04 Mac Lab.

Before importing the font, make sure shapes that make up the font is combined and no anchor points are too close to each other.

These are some setting we need to adjust before importing.

*Preference > Paste & Duplicate > Import original position: prefer AI vectro format.

Fig 1.11.1 Peferences setting

These are the ways to set the font dimension in FontLab:

Fig 1.11.2 Font Info

Fig 1.11.3 Font Info

Open the Metrics Table to adjust the sideberaing and kerning.

Fig 1.11.4 Show Metrics Table

INSTRUCTIONS

This is the Module Information Booklet for this module:

Task 3/ Type Dissection

Task 3/ Type Design

Task 3/ Type Dissection:

In this task, we were instructed to do a detailed dissection of the letters "H", "o", "b" and "g" by using Adobe Illustrator. We need to select a preferred font from teh 10 fonts provided. I choose Gill Sans and ITC New Baskerville.

Gill Sans:

Fig 2.1.1 "H" for Gill Sans

The letter "H" shows a symmetrical balance in Gill Sans font.

Fig 2.1.2 "o" for Gill Sans

The letter "o" is not designed to be a perfect circle. Left and right side of the circle is slightly stretched out. Besides that, the circle is not symmetrical, the right side is slightly thicker than the left side.

Fig 2.1.3 "g" for Gill Sans

The letter "g" shows a more complex dissection. The upper loop is stretched out horizontally. The stroke of the link is thinner in the upper connected part. The lower loop is a horizontally symmetric ellipse. The ear has the same thickness of the stroke.

Fig 2.1.4 "b" for Gill Sans

The bowl of the letter "b" is more curved in the upper part.

ITC New Baskerville:

Fig 2.1.5 "H" for ITC New Baskerville

The letter "H" shows a symmetrical balance in ITC New Baskerville font. The vertical stroke is much thicker than horizontal stroke. The arms are slightly curved instead of horizontal.

Fig 2.1.6 "o" for ITC New Baskerville

For the letter "o", strokes are significant thicker in left and right side. Same as Gill Sans font, it is not a perfect circle.

Fig 2.1.7 "g" for ITC New Baskerville

For the letter "g", the link shows a varies thickness of stroke. The ear has thinner stroke in the connected part.

Fig 2.1.8 "b" for ITC New Baskerville

For the letter "b", stroke that make up the bowl is thicker in the right part. The stem is vertical.

Task 3/ Type Design

1. Sketch

In this exercise, we were instructed to sketch the following letters ODHNG / odhng using the 3 pens.

We need to explore different writing styles for each of the 3 pens.

Three pen used:

Artline Calligraphy Pen
Thin Brush Sign Pen
Thick Brush Sign Pen

Fig 2.2.1 Three pen used

Fig 2.2.2 Sketch 1 (Artline Calligraphy Pen)

Fig 2.2.3 Sketch 2 (Thin Brush Sign Pen)

Fig 2.2.4 Sketch 3 (Thick Brush Sign Pen)

Ms Hsin thinks 2. from Sketch 1 and 1. from Sketch 2 have potential for exploration. I was suggested to retain the characteristic of 1. from Sketch 2 which is the unconnected stroke.

These are my sketches after the suggestion:

Fig 2.2.5 Sketch after suggestions

Ms Hsin suggested me to do research about modular typeface. Ms Hsin also wanted me to do be aware of positive and negative space.

Fig 2.2.6 Modular components

A modular typeface is an alphabet constructed out of a limited number of shapes or modules. Modular describes any letter assembled from a limited palette of distinct elements, repeated, flipped and flopped but not scaled.

Fig 2.2.7 Modular typeface reference

Fig 2.2.8 Modular typeface reference

I decide to go to uppercase letter as I feel it shows more visual impact which match with the modular typeface.

Fig 2.2.9 Letter classification (Uppercase)

I try to explore some characteristics for the typeface.

Fig 2.2.10 Characteristics of typeface

This is my first and second attempt at writing:

Fig 2.2.11 First attempt in writing

Fig 2.2.12 Second attempt in writing

After asking for feecback, I further decide the serif and standardize it. Ms Hsin said that the stroke of letter "N" is usually thicker instead of the stems.

Fig 2.2.13 Third sttempt in writing

2. Digitisation

Fig 2.2.14 Digitised sketch 1 (Regular)

Fig 2.2.15 Digitised sketch 2 (San serif version)

Fig 2.3.1 Digitised sketch 3 (Condensed)

Ms Hsin think the third attempt (condensed version) performed better than the others.

These are some suggestions from Ms Hsin:

The weight of letter "O" is too heavy, try to apply serif on it.
Use letter "H" with serif.
Use Capital letter "N" instead of unified font.
Adjust the spacing for letter "D" and "G".

This is the final design:

Fig 2.2.17 Final Type Design

Fig 2.3.2 Final Type Design with grid

Type Information:

Ascender: 815 pt
x-height: 785 pt
Median: 500 pt
Baseline: 0 pt
Descender: -30pt

3. Export to FontLab

I imported the font and do the final adjustment in FontLab 7. I wider the vertical stem of letter "H" "T" and "I" for 30 pt to improve the consistency and overall negative space of the letters.

Fig 2.4.1 Type Design in FontLab 7

I adjust the sidebearing according to the reference given by Mr Vinod.

Fig 2.4.2 Sidebearing reference

Type testing in FontLab 7:

Fig 2.4.3 Type testing in FontLab 7

I name my font as UnBridge because of the unconnected stems between the letters.

4. Type Final Output

Download font here: UnBridge

Screen grab in FontLab:

Fig 2.5.1 Screen grab in FontlLab

Fig 2.5.2 Task 3: Type Design & Communication "UnBridge" (JPG)

Fig 2.5.3 Task 3: Type Design & Communication "UnBridge" (PDF)

Font Preview:

Characters: OLEDSNCHTIG!#.,

5. Black & White Poster Design

After creating a typeface, we were instructed to design an A4-sized poster. I come out with a sentences with the words, "#LETS SHINE IN... LIGHTS".

These are the sketches for my poster design:

Fig 2.6.1 Sketch for poster design

I design the star graphic by using the letter "O".

Fig 2.7.2 Star graphic

I only use stroke for the words "LETS" and "IN" to emphasis the words "SHINE" and "LIGHTS"

Fig 2.2.27 Final Poster Design (JPG)

Fig 2.2.28 Final Poster Design (PDF)

FEEDBACK

Week 9:

General feedback:

Write all the letters (o l e d s n c h t i g , . ! #) in the approved style and digitise.

Specific feedback:

Fig 2.2.3: Retain the unconnected stroke characteristic of 1.
Do research on modular typeface ro understanding the used of shapes
Be aware of the positive and negative space while design the modular components.

Week 10:

General feeback:

Watch the tutorial video before digitising the word.

Specific feedback:

There is too much type of serif in one letter form, further decide the serif and standardize it.
The stroke of letter "N" is usually thicker instead of the stems.

Week 11:

General Feedback:

Finalise all the desing before importing to FontLab.

Specific feedback:

The weight of letter "O" is too heavy, try to apply serif on it.
Use letter "H" with serif.
Use Capital letter "N" instead of unified font.
Adjust the spacing for letter "D" and "G".

Week 12:

General Feedback:

Finalise all the desing before importing to FontLab.

Specific feedback:

Further adjust the space between the stems of the letters in FontLab.
Adjust the sidebearing of the letters before adjusting the kerning.
Increase the wide of the vertical stems.

Week 13:

General Feedback:-

Specific feedback:

Try to make the star graphic by using the type or have the same characteristic as the type.

REFLECTIONS

Experience:

Thoughtout the module, I have an opportuntiy to further enhance my understanding on font and typeface by designing it myself. Designing a typeface from scratch allowed me to apply theoretical knowledge in a practical setting. I learned about the clear workflow involved in type design, from initial idea to execution. Besides, I learned that the process is iterative and often requires going back and forth between sketches to make improvements.

Observations:

Throughout this module, I learned about the small details in type by studying type dissection. I realized the effort of the designers on the font even though it looks simple. Elements such as the curve of a serif, the height of an ascender, or a small adjustment in the stroke may seem minor at first glance, but they play a crucial role in defining the character and readability of a typeface.

Findings:

A key finding from my studies was the variety of typefaces. This is the first time I have a study on modular typeface, which opened my eyes to a whole new design possibilities. I was fascinated by how these typefaces are built using a limited set of shapes that can be combined and adjusted to create a wide range of characters. This allows an unique approach to type design.

A good designed font is meant to be useful in a varity of contexts. At the same time, it should not draw attention from the message. Type design essentially involves going from your own handcrafted drawings of an entire alphabet to the development of a font file. Calligraphy and hand-lettering are the term commonly used while design a font, these are the meanings:

Calligraphy: Artful handwriting and inscriptions, usually practiced with analogue tools in the moment.
Hand-lettering: Illustrative renderings of letters and words, often on a poster or signage.

Font file format:

True Type Font (TTF): Developed by Appe and Microsoft in the 80s for both computers and printers.
Open Type Font (OTF): Developed by Microsoft and Adobe to extend TTF's features. It provides more storage and supports more types of characters.

The font design process:

1) Review the basic rules of font design.

It is important understand the basics of type construction before the design. We can start by familarizing ourselves with some basic typography terms (cap height, ascender line, baseline, etc))

2) Plan the goals of your fonr project

We can come out with some basic questions:

Why am I making this?
Who will use the font?
In what context will the font be used?
What fonts are similar in style to what I am creating?

3) Sketch out your typeface

Sketching is where the actual design process takes place. This is the phase where we will take cues from your reference typefaces and make specific creative decisions that will differentiate your typeface from others.The purpose of sketching is to explore artistic directions.

4) Develop your font in design software

On the graphic design front, we'll want to choose either vector or raster software, e.g. Adobe Illustrator or Photoshop. Next, upload the reference sketch and trace the letters works by plotting vector points with the pen tool and using bezier handles to create curves where necessary.

5) Finalize and export the finished font file

In this phrase, we can use software like Fontself to do final adjustment. Fontself provides auto-kerning button to adjust the letterspacing.

Search This Blog

CHONG CHENG TAO (0371072)