Labels

Typography - Practical Tasks: Exercises

Typography - Practical Tasks: Exercises

22.4.2026-20.5.2026 / Week 1-Week 5

LOW YU KAI / 0381377
Bachelor of Design (Honours) in Creative Media
Typography GCD62704
Taylor's University
Practical Tasks: Exercises

Table of Contents (Click To Scroll):

Lecture

Typo_0_Introduction

Note: Typography is a fundamental aspect of any design study, and is also important in real life. Typography can involve the creation of typefaces, animation, or use in UI/UX, app, and logo design.

Terminology of Typography:
  • Calligraphy: writing styles, art of beautiful writing, e.g., unsealed, round, blackletter, etc.
  • Lettering: the art of drawing letters.
  • Font: individual font or weight within a typeface, e.g., XXX Regular, XXX Bold, XXX Light, etc.
  • Typeface: a variety of families that have different characteristics, e.g., Georgia, Helvetica, Times New Roman, Futura, etc.

Typo_1_Development

Note: It's important to do your own reading and research about your own community, nation, or civilization to obtain a more holistic perspective.

The initial writing was with sticks or chisels, scratching into clay or carving into stone. The core of modern uppercase letter forms is simple combinations of straight lines and circles, just as the materials and tools for initial writing were.

Fig 1.1 Phoenician Votive Stele and Evolution of Phoenician Letterform

Phoenicians write: right to left.

Greek writes: boustrophedon, which is alternately from right to left and left to right. This makes the direction of the letter shapes change as the word progresses. Finally, it was standardized to be written from left to right, which influenced modern Latin script.

Fig 1.2 Greek writes: Boustrophedon.

Certain qualities of Etruscan writing strokes:
  • Change in weight from vertical to horizontal.
  • Broadening of the stroke at the start.

Fig 1.3 Etruscan writing

Fig 1.4 Early letterform Development

Hand Script from 3rd - 10th CE
  • Square capitals: They contained serifs to the main stroke, achieved by holding a pen at a 60-degree angle off perpendicular, and were found in Roman monuments. 
  • Rustic capitals: The compressed version of square capitals. Took less time to write compared to square capitals, but harder to read. Achieved by holding the pen at a 30-degree angle off perpendicular. 
  • Cursive Hand: Used in everyday transactions. They were simplified for speed, resulting in the formation of some lowercase letterforms.  
  • Uncials: Incorporated some aspects of Roman cursive hand. They were more readable than rustic capitals. 
  • Half uncials: Mark the beginning of the lower-case due to the formalization of the Roman cursive hand. 
  • Caloline Miniscule: Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase) and minuscules, capitalization, and punctuation, which set the standard for calligraphy for a century.
Fig 1.5 Hand Script from 3rd - 10th CE

Blackletter to Gutenberg's type

Fig 1.6 Blackletter (Textura)

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform known as Blackletter or textura gained popularity. 

Fig 1.7 Gutenberg

Gutenberg's skills included engineering, metalsmithing, and chemistry. He marshaled them all to build the Blackletter of northern Europe. His type required a different brass matrix, or negative impression, for each letterform.

Text Type Development 

1450 Blackletter → 1475 Oldstyle → 1500 Italics → 1550 Script → 1750 Transitional →1775 Modern → 1825 Square Serif / Slab Serif → 1900 Sans Serif → 1990 Serif / Sans Serif 

Fig 1.8 Text Types

Typo_3_Text_Part 1
Tracking: Kerning and Letterspacing 
  • Kerning: The automatic adjustment of space between letters. Mostly used in headlines. Letters end up invading each other's spaces.
  • Letter spacing: To add space between letters.
  • Tracking: The addition and removal of spaces in a word or sentence. The lower the tracking, the lower the text readability.

Fig 1.9 Kerning

Fig 1.10 Tracking

Formatting Text

Flush left: Mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends at the point at which the line ends. Ragging happens on the right.
Centered: Symmetry upon the text, giving equal value and weight to both ends of the lines. Adds a pictorial quality to material that is non-pictorial by nature. Creates a strong shape to the right and left ragging, hence important to amend line breaks to reduce ragging.

Flush right: Places emphasis on the end of the line. Useful in situations (like captions or axil) where the relationship between text and image is ambiguous without a strong orientation to the right. Ragging on the left.

Justified: symmetrical shape on the text. It reduces the space between words and letters, making the white space run through the text. Need to pay attention to the line breaks and hyphenation to fix this issue.

Text Texture

 The overall visual feeling of the text. Different typefaces create different levels of darkness, weight, and readability. Typeface needs to match the message to create the right visual tone.

Fig 1.11 Texture

Leading and Line Length 

  • Leading: The space between two lines. Too tight will encourage vertical eye movement, while too loose creates striped patterns that will distract the reader.
  • Allow easy, prolonged reading.
  • Type size should be large enough to read at arm's length 
  • The shorter the line length, the less leading required; longer lines require more leading. 

Fig 1.12 Examples of bad Leading

Type specimen book: Shows samples of typefaces in various sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. Only determine the choice on screen when the final version is to be read on screen.

A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig 1.12 Sample Type Specimen Sheet

It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

Typo_4_Text_Part 2

Indicating Paragraphs 

  • Pilcrow (¶): Make a paragraph break. Used in medieval manuscripts, but is not often used today.
  • If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
  • Line space (leading): can be used as a paragraph break between paragraphs.
  • Indentation: Create the start of a paragraph. The size must be the same as the line spacing or the point size of the text.

Fig 1.13 Pilcrow    &    Fig 1.14 Line Space

Fig 1.15 Line Space vs Leading

Fig 1.16 Indentation, Widows and Orphans, Cross Alignment, Highlighting Text

Typo_2_Basic


Fig 1.17 Describing Letterforms
Fig 1.18 Font & Typefaces

Comparing typefaces

We use the selected 10 typefaces in this module. These 10 typefaces represent 500 years of type design. Each typeface expresses different feelings; it is important to understand these typefaces well and choose the right typeface for conveying messages.

Fig 1.19 10 Typefaces

Instructions

Process Work

Exercise 1 / Type Expression 
For Exercise 1, we were given a few words to make type expressions. We are required to choose four words from these words: Balance, Smile, Calm, Clarity, Hope,  Relax. Choose any case (lowercase, uppercase, or Sentence case), and based on the 10 typefaces, choose a typeface and sketch out the meaning of the words. We are not encouraged to use too many graphical elements or distortion, but several dots and lines are allowed to help with type expression.

1. Research/Inspiration

Before starting the task, I did read some articles on typography and software used in typography design to better understand this module:


In its modern sense, typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. This includes choosing a font, adjusting its parameters, and organizing the text on the page. The goal of typography is to harmonize textual and graphic elements and to make the design as expressive and user-friendly as possible. It helps create a visual hierarchy, highlight the necessary accents, and guide the user’s attention.
Fig 2.1 What is ‘Typography’, Week 1

2. Sketch/Rough Work (Week 2)
I chose the following words: Balance, Smile, Clarity, Help (Initially is Hope, but based on my tutor's feedback, if I change to Help, the idea might be clearer in Sketch 1# Fig. 2,4), based on my personal workflow habits. I choose to use a drawing tablet on the computer to sketch, which can save paper when redrawing and can better modify or redo.

Fig. 2.2 Sketch drawing process, Week 2



Fig. 2.3 Rough work #2, Week 2
Fig. 2.4 Rough work #1, Week 2

3. Digitisation (Week 3)

In previous attempts. I split each character in Clarity into its own independent path shape and adjusted its opacity to reflect the content of the text.
Fig. 2.5 Process-Clarity1, Week 3

In the next attempts. I choose to split the word into different rows, and apply a Gaussian Blur, also lower the opacity to some of them, while keeping one clear and 100% opcaity to show and express clarity.
Fig. 2.6 Process-Clarity2, Week 3

Help: I first break down each letter of the word and arrange them in the appropriate positions, then create a path graphic for the H, adding pure white lines inside its shape to create a sense of fragmentation, while the other letters are supporting the H, thereby embodying Help.
Fig. 2.7 Process-Help, Week 3

Balance: I want to make this word look like a scale by placing it and using a line to embody balance. In the first attempt, the feedback I received was that the line was too thick and needed to be narrowed appropriately, so I fixed this issue in the second attempt.
Fig. 2.8 Process-Balance, Week 3

Smile: I wanted the 'i ' and 'l' in this word to form a smiling face to represent Smile. On my first attempt, I used the anchor tool to twist the letter 'l' and stretch and deform the letter 'i '.
Fig. 2.9 Process-Smile1, Week 3

On the second attempt, based on feedback, I used ']' as the mouth; using existing characters worked just as well without distortion.
Fig. 2.10 Process-Smile2, Week 3
Fig. 2.11 Digitisation work Attempt1, Week 3
Fig. 2.12 Digitisation work Attempt2, Week 3

Based on feedback, I finally optimized Smile, Clarity, and Balance.


4. Final Outcome (Adobe Illustrator)
Fig. 2.13 Final, Week 3


5. Animation (Week 3)

In this task, we need to choose one of the four final type expressions to create an animated type expression. I chose the word Clarity for the animation. 

The entire animation draws inspiration from the process of a camera focusing, from blurry to clear.

According to the provided teaching video, I first created 24 artboards in Illustrator, which means there will ultimately be 24 frames. By applying different levels of Gaussian blur filters and opacity changes to each artboard, I created the animation fade-in effect, and it can gradually become clear. After that, I followed the content in the tutorial video to export each frame and import them into Photoshop together through a script, making each frame a separate layer at once. Then I opened the timeline view, visually displayed the images that needed to appear in each frame, and hid the layers that didn't need to be shown in that frame. Finally, I set each frame to 0.1 seconds, resulting in a GIF image with a duration of approximately 2.4 seconds.
Fig. 2.14 Process-animation-Illustartor, Week 3
Fig. 2.15 Process-animation-effects applied, Week 3
Fig. 2.16 Process-animation-Photoshop, Week 3


Fig. 2.17 Final Animation, Week 3

Exercise 2 / Kerning & Tracking (Week 4)

In the second exercise, we need to use the 10 provided typefaces, type our names in Adobe InDesign, and adjust the spacing and spacing. This helps us understand how the spacing between each letter and word affects readability.
Fig. 3.1 Exercise 2, Week 4


Text Formatting

In this task, we need to use Adobe InDesign to create a layout, using the text provided by the lecturer. According to the provided videos, we proceed step by step with the same operations, but need to add our own ideas. In the end, I came up with the following five layouts and developed one as my Final.
Fig. 3.2 Text Formatting-5 Attempts, Week 4

Fig 3.3 Final (Week 4)
Head Font: ITC New Baskerville Std Bold Italic
Type Size: 24pt
Leading: 22pt 

Body Font: ITC New Baskerville Std Roman
Type Size: 12pt
Leading: 9pt
Paragraph Spacing: 11pt
Characters per line: 45-53
Alignment: Left

Margins: Top 12.7mm, Left 12.7mm, Right 12.7mm, Bottom 12.7mm
Columns: 4
Gutter: 5mm

Feedback

Week 5 Feedback: There was an issue with my Adobe student account, so I wasn't able to export the work and get feedback in the class

Week 4 Feedback: Good job

Week 3 Feedback:  For the word Calarity, it should be changed; it is hard to understand the meaning. Don't use diagonal; try to change it so that, for example, only one line of the word is clear and the other is not, so it's easier for the audience to understand the meaning and easier to read.

Week 2 Feedback: Change the word "Hope" to "help". Update process, don't just show the final. The word balance needs to change, because it could be too much of a distortion.

Reflection

During this exercise, I learned a lot about typography. In just five weeks, we completed many related exercises, although the time felt a bit tight. Overall, I learned about the historical development of typesetting, the application and composition of characters, adjusting character spacing, and so on. I believe this knowledge will be very helpful for my future studies in design and will lay a solid foundation. In this task, I think I have some shortcomings that need improvement, especially in terms of time management and management. Since I also have part-time jobs on weekends, I need to manage my time more reasonably, complete all tasks on time, and receive feedback in class.



Labels:

Comments

Post a Comment

Popular Posts