Typography Task 3 / Exercises

17/11/2023 - 22/12/2023 / Week 8 - Week 13

Alyssa Lim Shyn Yi / 0365877

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

Task 3: Exercise 3

TABLE OF CONTENT

1. INSTRUCTIONS

2. LECTURES

3. EXERCISES

4. FEEDBACK

5. REFLECTIONS

6. FURTHER READING

INSTRUCTIONS

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

LECTURES

Week 7

For week 7, we were being brief by Mr Vinod about our task 3 exercises. For this task, we will need to prepare graph paper and 3 different marker pens that come with the nib at 3.0 above. Next, we will have to sketch the following letters ODHNG/odhng using the 3 pens we had. Moreover, a detail dissection of the letters H,o,g,b should be done too using the 10 fonts provided by Mr Vinod. Observations needed to be record in the eportfolio.

Week 8

In week 8, Mr Vinod had reviewed our work and chosen a few preferred sketch. Then, we were asked to watch a video tutorial and write all the letters (o l e d s n c h t i g , . ! #) in the approved style and digitised it.

Week 9 & 10

In week 9 & 10, Mr Vinod gave us lecture on constructing the letters using strokes, shapes and brush. We were also taught that we should maintain consistency in constructing letters. Width of every letters should be the same. Some anchor points can be reduced to make it look smoother.

Week 11 & 12

In week 11 & 12, we were given the task of creating posters using the font we had created. We were also being brief about that we needed to submit our Task 3 E-portfolio in week 13 and also required to do a compilation of our work since the beginning week of this semester.

EXERCISES

1. Sketches (ODHNG/odhng)

In this task, we were asked to come out with 9 different sketches using 3 different types of pen. Therefore, I have chosen two calligraphy pens and a brush nib pen to draw my sketch.

Figure 1.0 (Sakura Calligraphy Pen 3.0) - (24/11/2023)

Figure 1.1 (Artline Decorite 3.0, Water Based Pigment Ink) - (24/11/2023)

Figure 1.2 (ZIG Calligraphy Pen 3.0) - (24/11/2023)

My personal preference for the sketch was the sketch in Serifa STD 65 Bold.

2. Dissection of Letter (H, o, g, b)

Before I started to implement this exercise, I went to look up for information related to the anatomy of a typeface to give myself a better understanding in this work. Hence, I had noticed that we need to pay attention to the small details when dissecting the letters such as the height, letter spacing, baseline and others more.

Figure 2.0 (Image from lecture Type 3 Text P1)

Figure 2.1 (Image from the Internet)

Figure 2.2 (Reference given by Mr Vinod)

After done researching, I begin to dissect my letters along following the reference above provided by my lecturer. For my dissection, I decided to choose typefaces with Serifs and Sans Serifs to do. Reasons I choose this category is because I think that both categories have their own strengths and weaknesses. Hence, the final decision is still depends on the designer's preferences and context he or she wanted to present for the audience.

Serif fonts consist of small decorative strokes or lines at the end of a character. Strokes are presented in different styles liked the image shown below. However, the most common Serifs typefaces used are Baskerville, Georgia, Times New Roman and Garamond. Generally, Serifs have been considered as formal, traditional and easy to read especially in printed material with long paragraphs such as books or newspapers.

Figure 2.3 (Types of Serifs)

As for Sans Serifs, they do not have any strokes at the end of their characters. Nevertheless, they are recognized for being modern, easy and clean to read when it's on digital screen despite of their simplicity. The most common Sans Serifs typefaces used are Arial, Helvetica, Calibri and Verdana. The image below shows the types of Sans Serifs.

Figure 2.4 (Types of Sans Serifs)

To summarize up, Serifs for printed material while Sans Serifs for digital content or anywhere that requires modern typefaces.

Figure 2.5 (Difference between Serifs & San Serfis)

Dissection of Letters (H, o, g, b)

Figure 2.6 (Univers LT Std 55 Roman) - (1/12/2023)

Observations:-

Letter "H" = Both stems are set vertically straight and harmonious with each other. The inner crossbar is having the same stem size as the stems on the side.
Letter "o" = The stress is vertical.
Letter "g" = The closed counter of the letter is similar as letter "o" & "b". However, the black strokes of the bowl can be seen reducing when it's attaching to the stem.
Letter "b" = Black stroke on the stem stay consistent, but the size of the inner bowl is not the same as the bowl outside. Black strokes of the bowl can be seen narrow when attaching the stem.

Figure 2.7 (ITC New Baskerville Std Roman) - (1/12/2023)

Observations:-

Letter "H" = The size of the middle stem is not the same as the vertical stems on both sides. The arms of the letter are staying consistently.
Letter "o" = Vertical stress can be seen. The size of the inner closed counter has been reduced.
Letter "g" = Vertical axis can be seen at the bowl of the letter "g". The stroke of the ear has been shrink. Stroke of link has been made thinner too. Size of the loop is in a balanced state.
Letter "b" = The stroke on the head and tail of the stem has been made thinner.

3. (o l e d s n c h t i g , . ! #) in approved writing style

Figure 3.0 - (5/12/2023)

4. Digitisation of the final work

Before I started my digitisation, I had gone through some research to give myself a better understanding in constructing the letters.

Figure 4.0

Furthermore, we were also instructed to watch lecture videos provided by our lecturer regarding typeface construction using strokes, brush and also shapes.

Typo Task 3A Typeface Construction (Shapes)

Side Notes

Look for a reference of an existing typeface that comes close to the design I've worked on
Curved area tend to overshoot X-height of the borders of letterform
Less surface area than a form that has a flat edge
Some anchor points can be reduced so that we could adjust properly

Typo Task 3A Typeface Construction (Strokes + Brush)

Figure 4.1 (Image from the video)

Anatomy of Typeface

X-height, descender, ascender space are three different spaces, have letterforms contained within
During sketching, letter strokes should go below the baseline if they have a descender
Uppercase letter would go above the X-height line
Above Cap Line is ascender line

When Using Strokes

Pen tool is used to create lines or shapes
Ensure that all the strokes are having the same size
For circle, turn on scale, scale options and tick the box of scale corners and scale strokes & effects
To check the thickness, go to stroke window
There will be unevenness in letters if they are having different thickness
Before merging the shape, leave the raw shape and place in other artboards
Merge / unify / unite the shape using pathfinder tool when the letters had done constructing

For Creating Imperfections in Letters

Object > Path > Outline Stroke
Pathfinder > Unite
Object > Compound Path > Make (If the letters didn't unite entirely)
Use brush to create pattern on the letter
Object > Path > Outline Stroke
Pathfinder > Unite
Lastly, select the whole shape (Pathfinder > Minus)

Process During Digitisation

The image shown below are a few of my drafts while exploring the art in constructing the letters. For this exercise, we were asked to use Adobe Illustrator to construct the letters. The format of the artboard must be 1000 X 1000 points. A rectangle with the format of 500pt x 500pt can be placed inside the artboard above the baseline to measure the letters. Curved area tend to overshoot x-height of the borders of letterform as less surface area than a form that has a flat edge. Necessary anchor points can be reduced so that we can adjust properly.

Command R= Ruler (Drag & drop the guide to identify the lines)

Our font design should also include the basics of Typography:-

Ascender Height
Capital Line
Median Line
Baseline
Descender Height

Figure 4.2 (Digitisation Draft, including shapes, strokes + brush)

Final Digitisation Of The Work

Among all the digitisation draft, I have chosen the draft below as my final digitisation artwork. Here's the link to download the font. My font name is "Mamamia".

Figure 4.3 (Final Digitisation Of My Letters in JPEG) - (5/12/2023)

Figure 4.4 (Final Digitisation Of My Letters in PDF) - (5/12/2023)

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

Figure 4.5 (Basics of Typography) - (5/12/2023)

Ascender Height: 731.89 pt

Cap Line: 652.97 pt

Median Line: 467.49 pt

Baseline: 0 pt

Descender Height: -205 pt

Adobe Illustrator to FontLab 7

After digitizing our work in Adobe Illustrator, we were asked to download FontLab 7 (Demo Version) and place all the letters and punctuation into it ( o l e d s n c h t i g , . ! # ). The images shown below are chart talking about side bearings of letters. The charts are provided by my lecturer.

Figure 4.6 (Sample chart for estimating uppercase letter side bearing values)

Figure 4.7 (Sample chart for estimating lowercase letter side bearing values)

The image below is one of the instruction that we need to follow before starting to adjust our letters in FontLab 7. When setting preferences, we need to tick a few options as below:-

Keep stroke and colors, place color elements
Import original position: prefer AI vector format
Keep position if available (Keep artwork size)
Pasting contour to another element preserves appearance

Figure 4.8 (Setting preferences)

Moreover, when importing letters from Illustrator to Fontlab 7, notifications like this will pop out. For this section, we can either choose "Keep" or "Turn off Round when Editing". Do not choose "Round".

Figure 4.9 (Coordinates Rounding)

Figure 5.0 (Side-bearings before) - (5/12/2023)

Figure 5.1 (Side-bearings after) - (5/12/2023)

Figure 5.2 (Testing out the font) - (5/12/2023)

Figure 5.3 (Process) - (5/12/2023)

Final Kerning in FontLab 7

Figure 5.4 (Final Kerning in FontLab 7) - (5/12/2023)

A4 Black & White Poster

We were given the task to create posters as our final task. The poster must be A4 size in black and white, every font size must be the same and we must use the font that we created. For the words, I had chosen a phrase known as "silence holds echoing night". Therefore, I decided to play around with a few designs as shown below.

Figure 5.5 (Process for poster) - (15/12/2023)

Figure 5.6 (Drafts for poster) - (15/12/2023)

Final Poster

Figure 5.7 (Final Poster in JPEG) - (15/12/2023)

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

Figure 5.8 (Final Poster in PDF) - (15/12/2023)

Font Tester

You can try to type below using the letters (o l e d s n c h t i g , . ! #).

FEEDBACK

Week 8: Summary of my lecture

General Feedback:- Sketching should be consistent.

Week 9: Summary of my lecture

Specific Feedback:- Letters are somehow consistent when using pen tool to construct the letters.

General Feedback:- Should have use shapes to construct the letters.

Week 10: Summary of my lecture

Specific Feedback:- The letter (e, d, c, g) can be obtained from the letter "o".

General Feedback:- Ensure that every letters are having consistency.

Week 11: Summary of my lecture

Specific Feedback:- Letter (s, t, c) needs more work in doing the shapes.

General Feedback:- Width of every shape should be the same without adjusting them when constructing the letters.

Week 12: Summary of my lecture

Specific Feedback:- Shadow behind the main letters can be reduce to 10%.

General Feedback:- Too much negative spaces in poster.

REFLECTIONS

Experience

In my overall experience, I must say that this task is the most hardest task for me than the previous task we did. It was my first time in designing a font and I never knew that it was so hard. It really requires our patience, precision and consistency while implementing our work. Sketching a font was easy but digitalizing it was hard. However, I am glad to have Mr Vinod's guidance and teaching. After watching his lecture videos on repeat and observe other people's work, I finally had better understanding in what should I do when constructing the letters. For example, we should ensure that width and strokes in every letters should remain their consistency without adjusting them while constructing the letters.

Nevertheless, I was happy that we could create our own type of font and bring it to real life using Fontlab 7. I was satisfied with my final outcome too.

Observations

I was grateful to have this lesson as we get to learn the techniques in constructing nice and creative letters although I honestly felt stressed while doing this work. Furthermore, I could finally understand how all the letters worked and the hard work & effort that a designer had put into. From this task, I had learnt to develop a new skill to construct a readable and legible. Other than that, I had also managed to design a font with consistent characteristics premised on research and analysis.

Findings

I realized small letters were harder to construct than the capital letters as small letters tend to have more curved areas that need to be take care of. I would say that this work required much research before carried out our work. By doing research, we could expand our perspective and knowledge in constructing unique letters.

FURTHER READING

For my week 9 further reading, I had chosen a book named "I.D.E.A.S. - Computer Typography Basics" founded by David Creamer in 2003. Just like its title, this book discussed on the topic of typography basics in computer.

Figure 1.0 (Book Cover)

Introduction

The first goal of typography was readability. A page has failed its main purpose if the font used in the page is hard to read no matter how pretty or unique the page is. When a person chooses a certain font or adjusts the margins to create more white space, he or she can become a designer. By learning about the differences between fonts and how fonts worked in different pages or situation, the designer will be able to create an article that is easy to read and understand.

Categories of Fonts

Fonts come in many different designs. The differences maybe subtle while some stand out like the proverbial "sore thumb". There are two major categories which are serif and sans serif. However, these simplified categories are insufficient for great variety of fonts that one might encounter on today's computers. Hence, the examples shown below are the expanded categories to show the difference:-

Serif
Sans Serif
Mono-Spaced
Display
Script
Text
Dingbats

Serif

Figure 1.1 (Examples of Serif Fonts)

Work nicely for headline fonts
They are the little feet or arms that hang off the end of letter strokes & thick/thin look is added to the letter

OLDSTYLE

- Based on classical Roman inscriptions

- Letters are very open, wide & round with pointed

- Have pleasing contrast between the heavy & light strokes

MODERN

- Based on fonts designed over 200 years ago

- Have a greater degree of mechanical perfection than Oldstyle fonts

- Greater distinction between the heavy/light strokes, and thin/squared off serifs

SQUARE SERIF

- Slab Serifs are a contemporary style used mainly for small amounts of text such as advertising copy, subheads & headlines

- Have square serifs and mostly uniform strokes with little contrast

Sans Serif

Figure 1.2 (Example of a Paragraph set in a Sans Serif font, Futura)

Figure 1.3 (Examples of Sans Serifs Fonts)

No serifs, usually have an overall even stroke weight which creates little contrast for the letters
Evoke a more modern look in report but can be harder to read than Serif fonts
Generally used for small amounts of copy, subheads & headlines
Can be used for larger amounts of body copy, if applied with care

Display

Figure 1.4 (Examples from Thousands of Different Fonts set at 46pt)

Designed to be used as attention-getting headline fonts
Should rarely, if ever, be used as body copy fonts

Script

Figure 1.5 (Examples of Script Fonts)

Designed to mimic handwriting, therefore it is designed to touch one another
Fonts may be more traditional type used for formal invitations
Should never be used in every capital letters

Text

Figure 1.6 (Examples of Text Fonts)

Made by early monks for religious books based on the hand-drawn letters
Text fonts have an "Old-World" feel to them
Mostly used in certificates, diplomas and invitations
As with Script fonts, they should not be used in all capital letters

Mono-Spaced

Figure 1.7 (Examples of Mono-Spaced Fonts)

Proportionally spaced; that is, smaller characters take up less space than larger ones
Example, letter "i" is not as wide as the letter "M"
In contrast, mono-spaced fonts which are usually typewriter-style fonts, take up the same amount of space regardless of the actual letter

Dingbats

Figure 1.8 (Examples of Dingbat Fonts)

Symbols that are small pieces of art used to enhance the design of the text or page
The most common dingbats are Zapf Dingbats & Wingdings
There are thousands of different designs available

QUICK LINKS

Typography Task 1: Type Expression & Text Formatting

Typography Task 2: Editorial Text Formatting

Typography Task 3: Type Design & Communication

Typography: Final Compilation & Reflection