Typography - Task 1: Exercises

22 April 2025 - 22 May 2025 ( Week 1 - Week 5 )

Hsu Myat Wati | 0381660 | Bachelor of Design (Hons) in Creative Media

Typography | Taylor's University

Table of contents

1. LECTURES

Week 1

Introduction

What is Typography / Typeface?

Typography is creating letters, typefaces, or type families that we see in front of us. It can also be animation when we add motion to text. Moreover, great typography skills are needed in many areas, such as website design, app design, signage design, poster design, Logo design, etc.

Typography needs to be clear, legible, and have a positive feeling when displayed.

It also refers to the style, arrangement, and appearance of letters, numbers, and symbols.

Typography includes composition, laying out information, presenting, expressing, and textual information.

Who practises typography?

Typography involves the work of typesetters, compositors, typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and anyone who organizes words, letters, and symbols for publication, display, or distribution. This includes clerical workers, newsletter writers, and individuals who self-publish their material.

Font: Individual font or weight within a typeface.

Typeface: the various families that do not share characteristics

For example: Typeface - Georgia | Fonts - Georgia Regular, Georgia Bold, Georgia Italic, etc.

Week 2

Kerning: The addition and removal of space in a word or sentence.

Fig 1.1 - Kerning (https://pin.it/hm8lCHWrC)

Tracking: Doing both lettering spacing and kerning to a word.

Fig 1.2 - Tracking (https://pin.it/M7ua02zOV)

Loose Tracking: reduces the readability of the text.

Technical Notes

To increase the text size - Command + Shift + >

To decrease the text size - Command + Shift + <

To increase the text size faster - Command + Shift + Option + >

To decrease the text size faster - Command + Shift + Option + <

Kerning - Option + the left arrow

Letterspacing - Option + the right arrow

Formatting Text

Fig 1.3 - Text formatting (https://pin.it/3GRX4Yv3u)

Centered: assigning equal value and weight to both ends of any line.

Flush right: places emphasis on the end of a line as opposed to its start.

Flush left: Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.

Justified: imposes a symmetrical shape on the text.

Cross Alignment: Cross-aligning headlines and captions with the text improves the page's layout and makes the content clearer.

Note

Centered and Flush right might only be used in a small amount of text. Justifies can produce 'rivers' of white space running vertically through the text.

Leading and Line Length

Fig 1.4 - Text formatting (https://pin.it/7tDGdjXPK)

Type size: Text type should be large enough to be read easily at arm's length.

Leading: Decided on the vertical eye movement of the reader or the gray value. Body of text generally requires 2-2.5.

Line length: Rule of thumb, ensure that not more than 55 to 65 characters occupy one sentence.

Letter Spacing: adding space between the letters.

Note

Type size, Leading, and Line Length correlate with each other.

Type Specimen Book: a sheet or a book where you decide on, or rather, where that particular font/typeface is shown in different point sizes in different ragging and many different combinations.

Compositional requirement: Text should create a field that can occupy a page or a screen. An ideal, well-formatted text has a muddle gray value.

Week 3

Indicating Paragraphs

Pilcrow was used in text to indicate paragraph spacing.

Fig 1.5 - Text formatting (https://pin.it/Qc0DcfUGe)

Pilcrow: A type of symbol that is available in most typefaces.

Note: There is a 2.5-3 size difference between a point size and a leading of a paragraph.

example: point size - 10, leading - 12.5/13

leading = paragraph spacing

The difference between leading and line spacing

Leading is basically changing the space between two sentences, while line spacing has to do with the distance between the baselines of one sentence to the other.

Fig 1.6 - Text formatting (https://pin.it/5qnRJID4i)

Widow and Orphan

Fig 1.7 - Widow vs Orphan (https://pin.it/kYSO7wFTd)

Widow

A widow is a short line of type left alone at the end of a column of text.

Orphan

An orphan is a short line of type left alone at the start of a new column.

Highlighting Text

Fig 1.8 - Highlighting Text (https://pin.it/lHmJYhf15)

The important information within the paragraph can be highlighted by using italics, making the same typeface bold, using a different typeface, or changing the color of the text. However, the color of body text can only be black, cyan, magenta, and yellow.

Note

The point size should be reduced by 0.5 when using typefaces that tend to look larger.

To maintain a strong reading axis, it can be necessary to place some typographic elements outside the left margin.

Headline within Text

Fig 1.9 - Headline within text (https://pin.it/6CvbUVESn)

Use in different ways to form a hierarchy of information.

Week 4

Basic / Describing letterforms

Fig 1.10 - Anatomy of Type (https://pin.it/1qDI3K145)

Baseline: The imaginary line that forms the visual base of the letterforms.

Median: The imaginary line defining the x-height of letterforms.

X-height: The height in any typeface of the lowercase 'x'.

Stroke: Any line that defines the basic letterform.

Apex/Vertex: The point created by joining two diagonal stems (apex above and vertex below).

Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).

Ascender: The portion of the stem of a lowercase letterform that projects above the median.

Barb: The half-serif finish on some curved stroke.

Beak: The half-serif finish on some horizontal arms.

Bowl: The rounded form that describes a counter. The bowl may be either open or closed.

Bracker: The transition between the serif and the stem.

Cross Bar: The horizontal stroke in a letterform that joins two stems together. (eg. A, H)

Cross Stroke: The horizontal stroke in a letterform joins two stems. (eg. f, t)

Crotch: The interior space where two strokes meet. (eg. K, V)

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Ear: The stroke extending out from the main stem or body of the letter form.

Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Finial: The rounded non-serif terminal to a stroke.

Leg Short: Stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R)

Ligature: The character formed by the combination of two or more letterforms.

Link: The stroke that connects the baseline the one of the lowercase.

Loop: In some typefaces, the bowl is created in the descender of the lowercase G.

Serif: The right-angled or oblique foot at the end of the stroke.

Shoulder: The curved stroke that is not part of a bowl.

Spine: The curved stem of the.

Spur: The extension articulates the junction of the curved and rectilinear stroke.

Stem: The significant vertical or oblique stroke.

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Swash: The flourish that extends the stroke of the letterform.

Tail: The curved diagonal stroke at the finish of certain letterforms.

Terminal: The self-contained finish of a stroke without a serif. This is a catch-all term. Terminals may be flat('T' above), flared, acute ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

2. INSTRUCTIONS

MIB:

3. EXERCISE 1 | Type Expression

Raw Sketches

Fig 3.1 - Paper Sketches ( 29 April 2025)

Fig 3.2 - Paper Sketches ( 29 April 2025)

Fig 3.3 - Digital Sketches ( 29 April 2025)

During Week 1 - Week 3, we brainstormed as many ideas as we could on paper. I chose these four words: Shake, Melt, Grow, and Flow at first. But I also play around with the remaining words, 'Stretch' and 'Jump' as well.

Finalized Sketches

Below is the evolution of my digitized sketches after each week's feedback.

Fig 3.4 - Digitized Sketches ( 6 May 2025 )

Fig 3.5 - Digitized Sketches ( 6 May 2025 )

Fig 3.6 - Digitized Final Sketches ( 6 May 2025 )

Chosen 4 Sketches

Fig 3.7 - Final Type Expression (JPG) ( 6 May 2025 )

This is my finalized version of my four digitized sketches. Although I prefer some earlier sketches, it was challenging for me to turn them into actual animations.

Fig 3.8 - Final Type Expression (JPG) ( 6 May 2025 )

Animation first try

Fig 3.9 - Animation 1 ( 13 May 2025 )

Fig 3.10 - Animation 1 ( 13 May 2025 )

My lecturer said they are a bit childish, and feels like something is missing.

Fig 3.11 - Animation 1 (Updated) ( 15 May 2025 )

Fig 3.12 - Animation 3 ( 15 May 2025 )

Fig 3.13 - Animation 4 ( 15 May 2025 )

Fig 3.14 - Animation 5 ( 15 May 2025 )

I edited the 'flow' a bit, but I still feel like it's lacking something, and I've run out of ideas for that. So, I created new ones for 'melt', 'grow', and 'shake'.

Chosen Animation

Fig 3.15 - Final Animation ( 20 May 2025 )

I chose 'Shake' as my final animation because I think it's the most simple and unique out of all. I got the idea when charging my phone, as it shook. My lecturer said it's not very accurate since it actually vibrates, but I can try. So, I try my best to make it seem realistic.

4. EXERCISE 2 | Text Formatting

We did the name and paragraph exercises to practise text formatting.

Fig 4.1 - Name exercise (JPG) ( 22 May 2025 )

I finalized the text formatting paragraph exercise in week 4. I developed two layout designs for this exercise.

Fig 4.2 - Text Formatting - Design1 (JPG) ( 22 May 2025 )

Fig 4.3 - Text Formatting - Design2 (JPG) ( 22 May 2025 )

Final Text Formatting

After receiving feedback from my lecturer, I chose Design 2 since it has a better flow of left-to-right reading.

Fig 4.4 - Text Formatting Final with Grids (JPG) ( 22 May 2025 )

Fig 4.5 - Text Formatting Final without Grids (JPG) ( 22 May 2025 )

HEADLINE

Typeface: Bodoni Std
Font/s: Bodoni Std Bold
Type Size/s: 48 pt
Leading: 28 pt
Paragraph spacing: 0

SUB HEADLINE

Typeface: Gill Sans Std
Font/s: Gill Sans Std Bold
Type Size/s: 14 pt
Leading: 18 pt
Paragraph spacing: 0

BODY
Typeface: Adobe Caslon Pro Std
Font/s: Adobe Caslon Pro Regular
Type Size/s: 11 pt
Leading: 14 pt
Paragraph spacing: 14 pt
Characters per line: 50-63
Alignment: left
Margins: 20 mm top, 25 mm bottom, 15 mm left + right + bottom
Columns: 2
Gutter: 7 mm

Fig 4.6 - Text Formatting Final with Grides (PDF) ( 22 May 2025 )

Fig 4.7 - Text Formatting Final without Grids (PDF) ( 22 May 2025 )

5. FEEDBACKS

Week 5: General Feedback: All four final animations seem to work. We printed our next exercise, "formatting text," and showed our lecturer.

Specific Feedback: My formatting is somewhat imbalanced, although the lecturer understands the layout I'm going for. I should try to use the rules of the third or the golden ratio to make it balance.

Week 4: General Feedback: The animation still needs to be improved. The ‘G’ seems not to suit the remaining words, and the overall animation feels a bit childish because the ‘O’ is jumping.

Specific Feedback: The melt is okay, but you can try a variety. E.g., melting all the words rather than only ‘e’ or making ‘e’ the capital ‘E’

Week 3: General Feedback: Ask yourself the ‘Wh’ questions when portraying the expression in the word and animating it. Try to think of the design principles we learned and apply them to our work.

Specific Feedback: The digitalized ‘flow’ and ‘grow’ versions are okay. I still need to work on ‘shake’ and ‘melt’. Ms. Vitiyaa likes the new version of ‘melt’. The shake with the phone charging effect would also do.

Week 2: General Feedback: I have to sketch all the text in the box so the lecturer can tell what it will look like when I digitize it. I could brainstorm more on the sketches.

Specific Feedback: Some of my sketches are too simple and still do not effectively express the meaning, especially the word ‘Melt’.

Week 1: General Feedback: The lecturer gave us the brief guidelines for this module. We brainstormed and voted on the six words we want to work on for week 1.

Specific Feedback: Go through all the lectures for week 1 and come to class with the best 4 chosen ideas or more next week.

6. REFLECTIONS

I learned a lot throughout the first 5 weeks of the typography Task 1. At first, I'm not familiar with the module. Nevertheless, I can say that I've got an idea of the difference between typefaces and fonts, and the appropriate formatting of the texts.

One of the most fascinating yet challenging parts was brainstorming to express the words with typography. I learned that we have to think wisely till the end since the whole process is continuous and each step is connected to the other. When I just started sketching my ideas on paper, I didn't think much about the final outcome until it was time to turn them into animation. Most of my sketches are just appealing for the static version, but end up messy when I try to animate.

The text formatting also turned out not as simple as I thought before. I've been in touch with school textbooks and magazines throughout my entire life, but never knew the complex process behind producing a good page of text. I figured that every little detail matters when formatting a huge amount of text to make it readable and appealing at the same time. I also learned about how leading, kerning, and letter spacing play important roles in making the text clean.

Moreover, I benefit from the feedback sessions with my lecturer. She gives a lot of advice on how I can improve my design, and at the same time, encourages me to think critically first.

7. FURTHER READINGS

Adobe. (n.d.). Typekit Practice. https://practice.typekit.com/
Butterick, M. (n.d.). Practical typography. https://practicaltypography.com/
Typewolf. (n.d.). Typography resources. https://www.typewolf.com/resources
Kaikkonen, T. (2012, December 19). Interactive guide teaches the basics of good web typography. Wired. https://www.wired.com/2012/12/interactive-guide-teaches-the-basics-of-good-web-typography
Text formatting | Butterick’s Practical Typography. (n.d.). https://practicaltypography.com/text-formatting.html https://practicaltypography.com/text-formatting.html

Search This Blog

Hsu Myat Wati ( 0381660 )