Typography - Task 1: Exercises

26/09/2025 - 31/10/2025 (Week 1 - Week 6)

Aurellia Franseska Djauhari - 0365053

Typography

Task 1: Type Expression and Text Formating

Table of Content:

1. Lecture

2. Instructions

3. Process Work

4. Feedback

5. Reflection

6. Further Reading

1. Lecture

Lecture 1: Typo_0_Introduction

In this week’s lecture video, I learned about the meaning and importance of typography in design. Typography is the art and technique of arranging type to make text clear, readable, and visually appealing. It’s not just about choosing fonts, it’s about how letters, spacing, size, and layout work together to create balance and communicate meaning.

The video explained that typography is everywhere around us, from logos and posters to books, websites, and apps. Good typography helps people read easily and understand the message, while poor typography can make things confusing or unattractive.

I also learned the difference between typeface and font. A typeface is the overall design of the letters, like Helvetica or Times New Roman, while a font is a specific version of that typeface, such as bold or italic. This helped me understand how type choices affect design and mood.

The video mentioned that typography can be tricky at first because it requires a lot of attention to detail, like spacing, alignment, and hierarchy ,but with practice, it becomes more natural. Designers need to train their eyes to see text as more than words, but as part of the whole visual message.

Lecture 2: Typo_1_Development

In this week’s video, I learned about how typography has developed over the past 500 years, mainly from a Western perspective. The lecture started by explaining that much of typography history focuses on Europe and America, even though Asia had its own early writing systems like Chinese calligraphy and Indian scripts. It reminded us to always do our own research and consider other cultures’ contributions too.

The lecture explained that early writing began with scratching or carving on clay and stone, which influenced the shapes of early letters. Over time, writing tools like reed pens and brushes helped develop Roman letterforms with straight and curved strokes. The Phoenicians, Greeks, and Romans each played a part in shaping the alphabet we use today.

Later, the Romans refined their writing into square capitals, rustic capitals, and uncials, which led to the creation of lowercase letters. Around the 8th century, Charlemagne standardized writing rules like uppercase, lowercase, and punctuation, making texts more readable and consistent.

A big turning point came with Johannes Gutenberg, who invented the printing press in the 1400s. His invention made books easier to produce and spread knowledge much faster than hand-copying. After that, many famous typographers and typefaces appeared, such as Garamond, Caslon, Baskerville, and Bodoni—many of which are still used today.

Typography continued to evolve through different styles, including Blackletter, Old Style, Transitional, Modern, Slab Serif, and finally Sans Serif during the Industrial Revolution. Later, designers began combining serif and sans serif features, creating semi-serif or humanist typefaces like Gill Sans and Optima.

Fig 1.1 Typography History

Lecture 3: Typo_3_Text_Part 1
This week’s video was about typography formatting, focusing on kerning, letter spacing, and tracking. These may seem like small details, but they make a big difference in how text looks and feels in a design. I learned that kerning is the adjustment of space between specific pairs of letters to make them look more balanced. For example, some letters like “A” and “V” might appear too close or too far apart, so designers fix the spacing manually.

On the other hand, letter spacing adds equal space between all the letters in a word, and tracking adjusts the overall spacing across a whole word or sentence. The video explained that kerning is mostly used for headlines, logos, or titles, where visual balance matters the most, while body text usually doesn’t need it because it would take too long to adjust every letter.

I also learned that uppercase text often needs a bit more letter spacing because it can look too tight. The video showed how to adjust spacing in Adobe InDesign, which is one of the best tools for working with text-based designs like magazines or brochures. It’s similar to Illustrator, but it gives more control over typography. There are also useful shortcuts for adjusting spacing quickly, like using the arrow keys with the Option or Alt key.

Fig 1.2 Learning about text

Lecture 4: Typo_3_Text_Part 2

This lecture was a continuation of the previous one about Textual Information (Part 1 – Text Formatting). The lecturer began by reviewing the key points from the last session — things like letter spacing, kerning, and tracking. Letter spacing adds space between letters, kerning adjusts the spacing between specific letters, and tracking applies consistent spacing across a whole word or sentence. We also covered how alignment and text color affect readability — tightly set text looks darker, loosely set text looks lighter, and good typography aims for an even “middle gray” tone. We also learned about different alignments like flush left, ragged right, center, and justified text, and how poor ragging or excessive white spaces (called “rivers”) can make text harder to read.

In this new lecture, we moved on to Textual Information (Part 2), which focuses on handling large amounts of text. We started with how to indicate paragraphs. The lecturer explained that, instead of pressing “Enter” twice, we should set paragraph spacing in design software like InDesign. The ideal paragraph spacing should match the leading (the space between lines of text). For example, if your text is 10 pt and the leading is 12 pt, then the paragraph spacing should also be 12 pt to maintain cross alignment — meaning the lines in one column align neatly with the lines in the next.
We also learned about the difference between “line spacing” (used in Word) and “leading” (used in typography). Historically, the term “leading” comes from when metal letters were used for printing, and thin strips of lead were placed between lines to control spacing.

Next, the lecture discussed indentation — another way to show new paragraphs without adding extra space. Indentation should roughly match the point size of the text (e.g., 10 pt text = 10 pt indent). However, when you use indentation, your text should be justified, not ragged left, to maintain clean edges.

Then we learned about widows and orphans. A widow is a single word or short line left at the end of a paragraph, and an orphan is when a paragraph’s last line appears alone at the top of a new column. Both are bad for readability and must be avoided. You can fix them using soft line breaks or adjusting spacing slightly.

We also covered highlighting text — like using italics, bold, or color to emphasize certain words. If you mix serif and sans-serif fonts, reduce the point size slightly so the text still looks balanced. Another way to highlight text is by placing it inside a shaded box or changing its placement within the layout.
After that, we looked at reading axes and how elements like bullets or quotations should align. Usually, it’s better to keep them aligned with the main text for a clean visual flow, but sometimes extending them outside the margin can add emphasis.

Finally, the lecture discussed typographic hierarchy — organizing headlines and subheadings (A-heads, B-heads, C-heads) to clearly show levels of importance. For example, A-heads are large and bold, B-heads are smaller but still distinct, and C-heads are inset or italicized within the paragraph. This helps readers navigate complex information easily.

Fig 1.3 Highlighting Text

2. Instructions

3. Process Work

Exercise 1: Type Expressions
For Exercise 1, we were given six words, which is Fall, Bloom, Bend, Disappear, Swipe, and Focus and we can choose four of them to work with. I chose Fall, Disappear, Focus, and Bend because I found them the most interesting to visualize. After selecting my words, I started creating my sketches using IbisPaint, experimenting with different ideas and styles to express each word through typography.

Sketches:

Fig 1.4 Sketches for Type Expressions

After discussing each of my sketch concepts with Mr. Max, I began refining and perfecting them in Adobe Illustrator, focusing on improving the design details and making each word visually express its meaning more clearly.

Final Design:

Fig 1.5 Final Type Expressions JPEG Version

From the four completed designs, we had to choose one to animate. After discussing with Mr. Max, we both agreed that I should animate the word “Fall.” I then started working on the animation using Photoshop, making small edits to bring the word to life. Here is the final outcome.

Fig 1.6 Final Animation

Exercise 2: Text Formatting

For Exercise 2, we learned about Kerning, Leading, and Tracking. After the lesson, we did an exercise where we explored how our names would look in different types of fonts, focusing on how spacing and style can change the overall appearance and feel of the text.

Fig 1.7 Text Formatting Name

After learning about about Kerning, Leading, and Tracking, we were assigned to create eight different layout composition drafts, which was quite a challenging task. We were asked to use the 10 fonts that had already been provided, except for the title, and all the images had to be in black and white.

While working on the drafts, we were given the freedom to adjust the margins and columns however we liked. We could also modify the font size, but it had to stay between 8 pt and 12 pt to keep the design consistent.

For this exercise, we had to avoid mistakes such as orphans and widows, and we were advised to use a baseline grid so that the text would stay aligned and look neat and organized. This is what I came up with. 

Fig 1.8 All Text Formatting Design

After discussing with Mr. Max, he mentioned that page 2 looks nice and simple, but suggested that I adjust the last paragraph box on the right slightly lower so it aligns with the rest of the layout and looks more balanced overall, and this is the final result. 

HEAD

- Font/s: ITC New Baskerville Std

- Type Size/s: 38pt

- Leading: 26

- Paragraph spacing: 0

 

BODY

- Font/s: Adobe Caslon Pro

- Type Size/s: 11pt

- Leading: 13pt

- Paragraph spacing: 13pt / 0.1806 in

- Characters per-line: 55–65/50–60 characters

- Alignment: Left

 

Page Margins

- top + left + right + bottom

- Columns: 0.625 in

- Gutter: 5mm

Fig 1.9 Final Text Formatting

Fig 1.10 Final Text Formatting with Grid

 

4. Feedback

Week 2: Mr. Max selected the right-side design for the word Fall, the left-side design for Disappear, and the middle designs for both Focus and Bend.

Week 3: For the animated word Fall, Mr. Max suggested that I could make the “A” fall out of the frame and stay disappeared a little longer to enhance the animation effect.

Week 5: For the text formatting exercise, Mr. Max mentioned that page 2 looks nice and simple, but suggested that I lower the last paragraph box on the right slightly so it aligns with the rest of the layout and looks more balanced.

5. Reflection

Throughout these exercises, I learned how small details in typography can make a big difference in design. Working on the sketches and animations helped me understand how to express meaning through type, not just by choosing fonts but also through movement and composition. Using IbisPaint and Adobe Illustrator allowed me to experiment and refine my ideas, while animating the word Fall in Photoshop taught me how motion can enhance visual storytelling.

The layout composition exercise was challenging but rewarding. Limiting myself to the provided fonts and black-and-white images made me focus more on structure, spacing, and alignment. I also learned the importance of avoiding mistakes like orphans and widows, and how using a baseline grid keeps everything neat and balanced.

Overall, I feel that my understanding of typography and layout has improved a lot. With feedback from Mr. Max, I was able to make better design decisions and pay closer attention to alignment, spacing, and hierarchy. This experience taught me to see typography not just as text, but as a key element of design that communicates visually and emotionally.

6. Further Reading

Fig 1.11 A Type Primer 2nd Ed by John Kane 1

Fig 1.12 Page 19 from book of A Type Primer 2nd Ed

From the book A Type Primer (2nd Edition) by John Kane, I learned how to describe different typefaces and understand their visual styles. It explains that once I can recognize the parts of a letterform, I can identify and apply different typefaces based on their characteristics. I learned that Roman is the basic upright letterform style, Italic is slanted and based on Italian handwriting, and Boldface has thicker strokes to create emphasis. Light typefaces have thinner strokes, Condensed ones are narrower, and Extended ones are wider than the regular Roman form. This helped me understand how these variations can change the appearance and tone of text while still belonging to the same type family.