TYPOGRAPHY- Task 3/Type Design and Communication (Font Design)

 TYPOGRAPHY - Task 3

23 May 2023

23.05.2023- 26.06.2023/Week 8 - Week 13
Nur Fariha Binti Mohd Rodzuan/0351242
Typography/Bachelors (Hons) in Creative Media
Task 3: Type Design and Communication  

                                     

---

LISTS:

Lectures:

 

All Lectures are in- Task 1/Exercise 

Introduction

    1. Task 3: Type Design and Communication

Feedback

Reflection

Further Reading

---

INTRODUCTION:

Module Information Booklet (MIB)

TASK 3: TYPE DESIGN AND COMMUNICATION

We are required to design limited numbers of western alphabets which are "a e t k g r i m n p". Using the existing 10 fonts given to us that adheres to the direction of design I want to head in or closest to the sketches made for the type design. The chosen typeface is only to analyze its anatomical structure and will not affect our type design. We are required to watch the demo before beginning the task.

Requirements:

1. Research for better understanding on Type Design through websites or book references.

2. Deconstruction of several letterforms of chosen typeface.

3. Create 5 rough sketches or more (at least 5 letters in each sketch) for more idea exploration.

4. Digitize 2-3 variation of sketches using Adobe Illustrator.

5. Transfer the digitized sketch into font lab to apply kerning and generate typeface.

6. Create a final A4 poster using the font designed.

Submission:

1. Final kerning in Fontlab7 (screen grab)

2. Downloadable font in Google drive link.

3. Final Type Design in JPEG & PDF.

4. Final Poster Design; CYMK Colour in JPEG & PDF.

1. Sketching fonts/letters using different tip pens on graph paper:

 

We were given the flexibility to choose from different tip pens to experiment writing using the medium. We were required to write 5 different types of writing with each 5 different type of pens by writing diagonal, horizontal, vertical and circular lines. After that we were required to select one option from the 5 different options and write 'a e t k g r i y m n p' in a new graph paper.

Chosen materials:

• Fudenosuke Brush (Tombow)
• Brushable Calligraphy Pen
• Sakura Identiti Round Pen
• Artline Flat Point Pen
• Fine Tip Brush

fig 1.1 Experimenting different types of pen holding and strokes week 7 (16/5/2023)

fig 1.2 Experimenting different types of pen holding and strokes week 7 (16/5/2023)

fig 1.3 Chosen writing style for 5 different pen week 7 (16/5/2023)

2. Research:

Before experimenting further into the fonts, I wanted to revise the type anatomy which plays a huge role in creating the font itself.

fig 2.1 Anatomy of Type by Hollie Arnet week 8 (23/5/2023)

Type Classification

There are five basic type classification which are serif, sans serif, script, monospaced and display.

• Generally, serif and sans serif are used for body copy or headlines (inc. title, logos, etc). 
• Script and display- only used for Headlines
• Monospaced typefaces are generally used to display code or can also be used for body and headline copy (originally on typewriters ).

fig 2.2 Infographic on Typeface classification from toptal.com

Glossary:

Stress

The characteristic change of stroke width across all letters of a font. The stress is usually either diagonal, vertical, or there is no or hardly any stress for typefaces with no obvious change of stroke widths.

fig 2.3 Variations of stress in Typography (mental stress is not enough)

 Contrast: 

Contrast is the difference between the thick and thin parts of a letterform's stroke. Serif typefaces tend to have higher contrast strokes than sans serif designs.

fig 2.4 Contrast in Typography

fig 2.5 Variations of Stress, Contrast and Serifs

Overshoot:

Overshoot is a part of the letterform that extends slightly above or below vertical dimension. For instance, common characters like 'A' extends above the cap height, lowercase 'o' extends above the x-height and below the baseline. The purpose of overshoot is to create an optical illusion that makes the letters appear aligned, without it, our eyes could interpret the characters looking shorter than the rest.

fig 2.6 Overshoot example week 8 (22/05/2023)

fig 2.7 Guidelines from Typographic design: Form and Communication, page 32 week 8 (22/05/2023)

Recap:

Capline: An imaginary line that runs along the tops of capital letters and the ascenders of lowercase letters. 

Meanline: An imaginary line that establishes the height of the body of lowercase letters. 

X-height: The distance from the baseline to the meanline. Typically, this is the height of lowercase letters and is most easily measured on the lowercase x. 

Baseline: An imaginary line upon which the base of each capital rests. 

Beard line: An imaginary line that runs along the bottoms of descenders.

3. Deconstruction of Letters:

For the deconstruction process, we were required to analyze one of the 10 typefaces provided to us and also one of any typefaces (Fontshare/ Google Fonts) that is similar to our sketch. Choose appropriate lowercase typeface with ascenders, descenders, x-height  and uppercase letters have cap height.

-Out of the 10 typefaces, I chose ITC Garamond std to be deconstructed since it is quite similar to the font I am planning to create.

fig 2.8 Deconstructed letter 'r' - ITC Garamond Std week 8 (22/05/2023)

fig 2.9 Deconstructed letter 'g' - ITC Garamond Std week 8 (22/05/2023)

For the font, I realized that the structure has a lot of handwritten characteristics. For instance, the foot of  'r' is not straight but curved inwards in the middle and seemingly gives a more rounded edge. Furthermore, the letter 'g' has a slight overshoot to create an illusion. The contrast between strokes are not that different as well.

-For the second font, I chose the Author font family designed by Indian Type Foundry on Fontshare. I wanted to further understand the core structure of this particular type of 'a' to understand its anatomy.

fig 3.0 Deconstructed letter 'a'- Author from Fontshare week 8 (22/05/2023)

For this typeface, I noticed that the bowl extends out slightly, without the lines however it would seem that the bowl and the above curved line are aligned with each other. The gap between the bowl and the curve are consistent. I realized a slanted end on the curve of 'a' (above the bowl) and the bowl extends slightly below the baseline causing an optical illusion of similar size.

4. Digitization of letterforms:

Creating Guidelines

fig 3.1 Guidelines created in Adobe Illustrator week 10 (6/6/2023)

MEASUREMENTS (from baseline)

Ascender: 732 pt

Cap height: 695 pt

X-height overshoot: 510 pt

X-height: 500 pt

Baseline: 0 pt

Baseline overshoot: -11 pt

Descender: -204 pt

Descender overshoot: -228 pt

Attempt on digitisation:

After week 9, we were given a task to practice writing the letters to achieve consistent result. I intended to pursue with fonts in the 'Script' Family.

fig 3.2 Collection of practice on the letters week 10 (6/6/2023)

First attempt: 

fig 3.3 Chosen sketch to be digitized in Adobe Illustration week 10(6/6/2023)

I tried creating the letters using mostly the shape tool,the curvature tool and handmade brush tool to create the thin lines on the letters. 

fig 3.4 Attempted digitisation (top) with guidelines week 10 (6/6/2023)

After week 10 feedback session, there are a few major adjustments on some of the letters and Mr Vinod asked to refer to Blackletter fonts. I emphasized on changing the 'g' to fit the rest of the fonts.

fig 3.5 Improved digitisation with guidelines week 10 (6/6/2023)

fig 3.6 Experimenting on changing the structure of 'g' using blackletter script as reference week 10 (6/6/2023)

Improved digitizing fonts after week 10:

fig 3.7 Second attempt of digitising font with guidelines week 10 (6/6/2023)

MEASUREMENTS (from baseline)

Ascender: 673 pt

Cap height: 638 pt

X-height overshoot: 530 pt

X-height: 500 pt

Baseline: 0 pt

Baseline overshoot: -2 pt

Descender: -220 pt

Descender overshoot: none

Improved digitizing fonts week 11:

fig 3.8 Third attempt of digitisation with special characters week 11 (13/6/2023)

MEASUREMENTS (from baseline)

Ascender: 673 pt

Cap height: 638 pt

X-height overshoot: 530 pt

X-height: 500 pt

Baseline: 0 pt

Baseline overshoot: -2 pt

Descender: -247 pt

Descender overshoot: none

fig 3.9 Font Structure Process in Outline View week 12 (20/6/2023)

fig 4.0  Font Structure Process in Normal View week 12 (20/6/2023)

Developing Font in Fontlab 7 Demo

We were required to watch Typo_Task 3_Illustrator to Fontlab 5 Demo

Notes to be taken:

• Measure the guidelines in Illustrator
• Combine the glyphs using Pathfinder>Compund Shape(Unite)
• Import the glyphs into fontlab 7 
• Create a new font file and name the file
• Key in the guideline measurements
• Paste the glyphs in font lab and start kerning.

Kerning Process:

After importing the glyphs into Font lab we were required to kern the letters individually before testing them out.

fig 4.1 Kerning of letter 'g' in Fontlab 7 week 12 (20/6/2023)

fig 4.2 Kerning of letter 'a' in Fontlab 7 week 12 (20/6/2023)

After kerning the alphabets we needed to create a new metrics tab to test out the fonts and also kern the alphabets to get rid of weird spacings in between.

fig 4.3 Testing out the fonts with the alphabets created week 12 (20/6/2023)

fig 4.4 Final kerning with the sentence for the A4 poster in New Metrics Window 

week 12 (20/6/2023)

Poster Design

Requirements:

• A4 size poster 
• The poster text must all be in the same size
• The credit description must be in Helvetica/Arial/Univers (12 pt) with font name, creator name and the year.

fig 4.5 A4 Poster exploration week 12 (20/6/2023)

 

 After receiving feedbacks and confirmation on the poster exploration, I decided to choose the fourth poster on the right as my final poster.

 

fig 4.6 Final A4 Poster week 12 (20/6/2023)

Font Tester :

Type out the characters: aetkgrimnpy,.!#

Final Task 3 : Type Design and Communication

Download font here: https://drive.google.com/file/d/19rFr5tMVrW2H5HxZQ5u9FPa-tRp9GdXM/view?usp=sharing

fig 4.7 Final Task 3: Type Design and Communication "Edgar Script" (JPEG)- Week 12 (20/6/2023)

fig 4.8 Final Task 3: Type Design and Communication "A4 Poster" (JPEG)- Week 12 (20/6/2023)

fig 4.9 Final Task 3: Type Design and Communication "Edgar Script" (PDF)- Week 12 (20/6/2023)

fig 5.0 Final Task 3: Type Design and Communication "A4 Poster" (PDF)- Week 12 (20/6/2023)

---

Feedback:

Week 9

General Feedback:

-Use less anchor points -use brush, pen, brush pen -Make sure to convert

brush to basic line when using width tool -heigh must be 1000x(any width)

Specific Feedback:

-draw out the base first before putting in details. -draw all letters and

observe them side by side to determine whether they look the same.

Week 10

General Feedback

-Ensure to refer to professional fonts (fonts that have been created and used) as reference when creating letters.

-The characters should have at least small similarity to each other.

Specific Feedback: 

-Use references from Blackletter font.

-The 'a' and 't' looks a little excessive.

-Refine the letters more and make it sharper.

-Experiment different ways on placing the diamond at the end of the letters, especially 'k'.

Week 11

General Feedback:

-A proper hash (#) should have a slightly off horizontal line.

-(#) slightly smaller/below the cap height.

-Exclamation marks top and bottom sections are in different sizes, the bottom is smaller.

-Base strokes should go below the baseline.

Specific Feedback: 

-The letter 'Y' is missing.

-The overshoot of the letters are not of the same height.

-The 'g' and 'y' bowl should touch the baseline.

-The hashtag should be slightly off in angle not straight. 

Week 12

General Feedback:

-Make it more impactful.

-Make sure the font is Helvetica/Arial/Univers for text details.

-Alignment of heading subheading must be considered.

-All 11 characters must be featured in poster.

-Invisible Y axis in the middle is good.

Specific Feedback:

-make the fonts bigger.

-put the subheading in between the headline.

---

Reflection:

Experience

The task was the most challenging out of the previous assignment I had so far. I had never even heard of Fontlab up until this assignment was given. I have always been fond of calligraphy writing and I often write in different styles with different tip pens, so using actual pens during our class was really enjoyable. I already had in mind of creating a font similar to Blackletter Script, therefore, I took the time to research  Blackletter and also other types of fonts to gain an understanding of font anatomy.

Digitizing the fonts was an exhausting process, I struggled at the beginning in searching for the best method to trace my fonts into Illustrator. I was more focused on keeping the fluidity of digitally drawing with the brush pen that I never bothered to look for an easier option after Mr Vinod pointed it out to me.

However, it was an enjoyable process as I was able to create and generate a font that I made. I find the assignment quite enjoyable and satisfying typing out words with the font I created. 

Observation 

In the first part of Task 3, I had a lot of trouble deconstructing letters from two different fonts. I couldn't understand how the circle shapes and lines were placed in specific places, it took me a long time to understand deconstructing that it slowed down my process, however, I realized this and made sure to put the priority task first before completing the minor ones, to ensure that my progress are up to date every week.

Luckily, after the feedback with Mr Vinod, I was able to digitize my fonts smoothly in Illustrator, the only drawbacks were creating punctuations specifically '#' which has characteristics that must be met. 

Findings

We should delve into the conventions of creating a type well before doing it. Moreover, exploring different mediums before proceeding into a digitization gives us the significant feel of manually writing with pen on paper that gives a different result and pressure. Without research, a lot of problems arise such as inconsistent style of letterforms which requires amendment frequently. Although it can become a learning process, it should also be an active learning process rather than wasting time on the same mistake.

We have overlooked type as it has become a part of our daily life, especially in communications. We always unconsciously neglect the small changes in different fonts, to understand the fascinating differences in letterforms, we should try paying attention to surroundings such as advertisement billboards on the streets, printed materials, etc. 

---

Further Reading:

fig 5.1 Typographic design: Form and Communication by Philip B. Meggs

The Anatomy of Typeface:

Through the subtopic of the book, American graphic designer, Philip B. Meggs explains how a deconstruction of letters are made using geometrical shapes like circles and triangles to identify major components of letter construction. 

fig 5.2 Deconstruction of 'B' from the book

Furthermore, the designer emphasizes the unity of design in type font. Letterforms should display visual similarities within each other, what makes a good type font are letters that display principle of repetition with variety. 

fig 5.3 Example of Unity in designing Type font

Typographic Education:

-Chapter 11, Typographic Design Education: Flowering typography, page 199

fig 5.4  Flowering typography Dennis Y. Ichiyama Purdue University  

This chapter focuses on achieving harmonious visuals between type and image, in the process of creating a fairly new visual configuration. The project was also a pursuit of exploring dynamic relationship between positive and negative space, the way the images were structured and negative space was used to portray the images of flowers corresponding to the alphabets were interesting.