Practical Tasks / Exercises

20.APR.2026 - 18.MAY.2026 / Week 1 - Week 5

LIM JIHYUN / 0391015 / Bachelor of Design (Honours) in Creative Media

Typography
Task1: Exercises

TABLE OF CONTENTS

1. LECTURES

2. INSTRUCTIONS

3. PROCESS WORK

4. FEEDBACK

5. REFLECTIONS

6. FURTHER READINGS

LECTURES

Week 1 / Introduction & Briefing: < Typo_0_Introduction >

What is Typography?

Creation of typefaces / type families: deemed the act of creating letters
Animation: could be animated forms
Website design: visible and prevalent in website
App design: used and exercised and executed in the app design
Logo type: a trade mark / a mark that conists of letter

▶ Typography is not just the TEXT but also attributes and characteristics, skill sets and developed

2. Calligraphy → Lettering → Typography

calligraphy refers to writting style
lettering refers to drawing out the circumference of the letter
typography has envolved over 500 years

▶Typography is the art and technique of arranging type including the selection of typefaces, sizes and spacing to ensure written launguage is legible, readable and visually appealing

3. Difference between Font & Typeface

Font: comes from the french word "found" / refers to the individual font of weight within the typeface

Fig 1. Examples of Font (21/04/2026)

Typeface: refers to the entire family of fonts / weight that share similar characteristics

Fig 2. Examples of Typeface (21/04/2026)

Week 2 / Development: < Typo_1_Develoement>

Early Letterform Developement; Phoenician to Roman

initially writting meant scraching into wet clay with sharpened stick or carving into stone with a chisel

much of the way we write can be read arrived from Phoenician alphabet

we can see the evolution of the letter from Arabic to modern Latin letter forms

Phoenician script was written right to left

greeks developed Boustrophedon

▶this change evetually shifted writing to left-to-right and mirroed the shape of the letters

Fig 3. lines of text read alternately from right to left and left to right (28/04/2026)

Etruscan and Roman marble inscriptions inherited their distinctive weight variations and serifs from the initial painted strokes used before carving

2. Hand Script (3rd–10th century C.E.)

Early writing was done by hand — scripts varied widely across regions and monasteries.

Charlemagne (789 C.E.) standardized ecclesiastical texts to unify written communication in Europe.

He appointed Alcuin of York, who developed a clear, uniform writing style using majuscules (uppercase) and minuscules(lowercase), plus capitalization and punctuation.

This reform created the foundation for Caroline Minuscule (c.925) — a legible, balanced script that influenced later typefaces.

3. Blackletters to Gutenberg

Origins: From handwritten manuscripts to movable type(Gutenberg).

Evolution: Serif to sans-serif, reflecting technological and cultural shifts.
It became the standard for calligraphy and manuscript writing for nearly a century, emphasizing clarity and consistency.

◈
Key insight: Each era’s typography mirrors its social and design values.

4. Humanist Script to Roman Type (c. 1460–1531)

1460, Venice: Early Roman type experiments (Lucius Lactantius).

1471–1472, Italy: Transition from handwritten to printed Roman letters; refined Venetian type by Nicholas Jenson.

1499–1515, Venice: Francesco Griffo’s elegant, geometric refinement; precursor to modern serif fonts.

1531, Paris: Robert Estienne with Claude Garamond — Golden Age of French printing.

◈What I learn from this lecture?

Typography evolved from handwritten scripts → mechanical type → refined Roman forms.

Each stage reflects technological innovation and cultural values of its era.

The Renaissance established legibility, proportion, and harmony as timeless principles of type design.

Typography is not static — it’s a living visual language shaped by history, craft, and human intellect.

Week3 / Text: < Typo_3_Text_Part 1>

“Texture” refers to the visual density created by text blocks.
Good typography maintains consistent rhythm and spacing.
Comparison between tight and loose line spacing.
Type should breathe — not suffocate.

Flush left: Flush left means all lines start at the same point on the left but end unevenly on the right. This style feels natural and balanced, like handwriting.

Centered: Centered text balances both sides of each line. It creates a clear visual shape with an artistic feel, but line breaks must be careful to avoid unevenness.

Flush right: highlights the end of each line instead of the beginning. It’s useful for captions or layouts where text needs to align clearly with images on the right side.

Justified: Justified text balances both sides of a paragraph by adjusting word spacing. It looks clean and structured, but can create uneven gaps, so spacing and hyphenation must be managed carefully.

◈ Good typography prioritizes clear communication of meaning over decorative style

Type size:Text should be large enough to read easily from a normal distance.

Leading: Too tight spacing makes eyes move vertically and lose place; too loose spacing distracts with patterns.
Line length: Ideal line length is 55–65 characters; too short or too long lines make reading harder.

Fig 4. 10/10 is too dense. 10/15 is too tight. 10/12 is the best opt. (08/05/2026)

Fig 5. The left text block has too little line spacing, making it look dark and cramped. The right text block has too much line spacing, making it look too light and scattered. (08/05/2026)

Week4 / Text Part 2: < Typo_4_Text_Part2 >

Common mistake: Many people press Enter twice to separate paragraphs
Correct method in InDesign: Set paragraph spacing equal to the leading. Example: Text size = 10pt → Leading = 12pt → Paragraph spacing 12pt
Hidden characters: Turn on hidden characters to detect errors (extra spaces, double Enters)

Leading and paragraph spacing:

Rule of thumb: text size + 2~3 points = leading
Example: 10pt text → 12pt leading → 12pt paragraph spacing

Fig 6. Example of Winddow vs Orphans (12/05/2026)

Widow = single short line left at the end of a column
Orphan = single line from a previous paragraph starting a new column

▶ Both are considered serious typographic errors. Solutions include forced line breaks, subtle kerning/tracking adjustments (±3 units max)

When highlighting text, placing a colored field behind the text can improve emphasis and readability. However, maintaining the left reading axis is crucial

Fig 7. Quotation marks and primes (12/05/2026)

▶I learned that quotation marks and primes are different symbols in typography, with primes used for feet and inches and quotation marks for speech or citations.

Typographic hierarchy: To guide the reader’s eye through the text by showing levels of importance. Without hierarchy, all text looks equal and the reader struggles to distinguish main ideas from supporting details.

A-head: main headline, bold and large- Primary Headline: The most important title. Large size, bold weight, often centered or prominently placed. It introduces the main topic.
B-head: subordinate headline- Secondary Headline: Subordinate to the A-head. Smaller size, lighter weight, sometimes italicized. It organizes content into sections and supports the main headline.
C-head: inset or highlighted text, often in italics or small caps- Tertiary Headline: Used within the body text. Often in italics, small caps, or slightly different font style. It highlights specific facets or subsections without overpowering the main text.

Cross alignment:

Aligning captions, headlines, and body text to the same baseline grid creates a complementary vertical rhythm

Example: Four lines of caption text (9pt leading) align perfectly with three lines of body text (13.5pt leading)

Doubling leading values can maintain alignment even when text sizes differ

◈Final takeaway: Typography is not just arranging letters — it is two-dimensional architecture, built on experience and imagination, guided by rules and readability

Week5: < Typo_2_Basic >

Fig 8.typographic diagram(22/05/2026)

Typography covers the structure of letterforms (baseline, x-height, ascenders, descenders) and their strokes and components like apex, arm, and crossbar, with optical adjustments for balance. Spacing conventions such as em/en spaces and dashes, along with ligatures, help maintain readability.

Type families with multiple weights and styles provide design flexibility, while distinctions between uppercase, lowercase, small caps, and numerals (lining vs. old-style) ensure harmony. Italics derive from handwriting, oblique styles are slanted Roman forms, and punctuation or ornaments complete the type system.

The lecture emphasized the importance of studying classic typefaces that have endured for centuries, showing how typography blends rules, clarity, and imagination for lasting design.

INSTRUCTIONS

PROCESS WORK

Digitise the words

< Research >

6 Chosen words list: Balance, Bloom, Relax, Calm, Help, Clarity

▶First, I looked up the dictionary definitions of the words to understand their precise meanings and the nuances they carry. All the meanings is searched by Cambridge Dictionary; https://dictionary.cambridge.org

Balance: A state where different elements are equal or in the correct proportions; the ability to remain steady and not fall.

Bloom: When a flower opens or is open; a period of great beauty, freshness, or success.

Relax: To become less tense or anxious; to rest and feel comfortable.

Calm: Peaceful, quiet, and without worry or strong emotion.

Help: To make it easier or possible for someone to do something by offering services or resources.

Clarity: The quality of being clear and easy to understand or see.

< Inspiration & Ideas >

Fig 9-1. Idea Mind map (22/04/2026)

The word ‘Balance’ was designed to reflect its meaning — clean, refined, and focused on symmetry. I emphasized the central ‘L/l’ as the axis, ensuring that ‘BA’ and ‘ANCE’ appear visually equal in weight and proportion
For the word ‘Relax,’ I focused my sketches on keywords such as ease, rest, melting softness, comfort, and fluidity — aiming for a design that feels gentle and unrestrained
For the word ‘Calm,’ I centered my sketches around the ideas of gentleness, tranquility, and comfort, avoiding anything intense or overpowering
‘Help,’ I explored keywords such as impact, SOS signal, bold lettering, shouting tone, urgency, and intensity. Among these, I focused my sketches on conveying a sense of emergency and the SOS feeling

< Sketches >

Fig 9-2. Idea sketches (22/04/2026)

< Process of Work >

Fig 10-1. Disitise work process using Ai (01/05/2026)

Fig 10-2. Disitise work process using Ai (01/05/2026)

Building on the sketches from Week 2, I digitized them in Adobe Illustrator while keeping the professor’s feedback in mind. The words I chose to work with were Balance, Calm, Help, and Relax.

Some of the sketches were transferred almost directly into digital form without major changes, but most of the words evolved during the process as I explored different ways of expression. I mainly used effects and transformation tools, while also experimenting with the pen tool and shape tools to create alternative impressions.

I thought this assignment would be simple. However, once I started, I realized how challenging it was to express my ideas within the given rules—working only in black and white, keeping the designs simple, and ensuring that each word’s meaning was clearly conveyed. Using Illustrator’s wide range of functions while staying within those boundaries turned out to be a complex yet rewarding experience.

< Submission artwork>

Fig 10-3. digitised explorations for Balance, Relax, Calm, Help (03/05/2026)

Fig 10-4. digitised explorations for Balance, Relax, Calm, Help (03/05/2026)

< Final work of Digitise the 4 words >

Fig 10-5. Final type expression.jpeg (10/05/2026)

Based on the feedback from Week 3, I made several revisions to my submission work before completing the final version. The most significant changes were using the provided 10 fonts and correcting spelling errors.

Animation work

< Research & Inspiration >

Fig 11-1. Googling a Typo animation work (06/05/2026)

Fig 11-2. Googling a Typo animation work (06/05/2026)

< Idea Sketches >

Fig 11-3. An idea that moves vertically from the left and horizontally from the top, gradually intersecting at the center to achieve balance. (06/05/2026)

< Process of Work >

Fig 11-4. Process of animation work (08/05/2026)

After completing the digitalization process, I worked on animation while referencing lecture videos. I began by creating multiple artboards in Adobe Illustrator to visualize the animation concept. By gradually adding artboards, I developed motion ideas with subtle movements.

Next, I imported the Illustrator work into Adobe Photoshop and used the Timeline tool to animate the sequence. I carefully adjusted the duration of each frame in seconds to achieve smooth and natural motion. This process allowed me to refine the animation flow and create a visually engaging result.

Fig 11-5. Pre-final (another idea) (10/05/2026)

< Final Animation work>

Fig 11-6. Final animation (11/05/2026)

Text Formatting (Practical Task1: Exercise 2)

Note • Font size (8–12) • Line Length (45–65/50–60 characters) • Text Leading (2.5, 3 points larger than font size) • Paragraph spacing (follows the leading) • Ragging (left alignment) / Rivers (Left Justification) • Cross Alignment • Avoid Widows / Orphans

< Idea Sketches >

Fig 12. Composition design sketches of various layout arrangements (13/05/2026)

< Process of Work >

Fig. 12–1, 2, 3, 4 (Clockwise order) (15~17/05/2026)

Fig 12-1. Line LeText Leading (2.5, 3 points larger than font size)

Fig 12-2. I had to choose from the 10 points provided and Font size sould be 8–12pt

Fig 12-3. First looking of layout work Fig 12-4. But after adjusting the grid, I struggled to set the lines correctly

< Final Art Work >

Fig 13-1. Text formatting final work without grid (18/05/2026)

Fig 13-2. Text formatting final work with grid (18/05/2026)

HEAD
- Font/s: Bembo Std Bold
- Type Size/s: 20pt
- Leading: 24pt
- Paragraph spacing: 24

BODY
- Font/s: Univers LT Std 55 Roman
- Type Size/s: 9pt
- Leading: 11pt
- Paragraph spacing: 3.881mm
- Characters per-line: 58 (Avg)
- Alignment: Align left

Page Margins
- top + left + right + bottom: 12.7mm + 12.7mm + 12.7mm + 100mm
- Columns: 4
- Gutter: 5mm

FEEDBACK

<Week 2>

While it's important to reflect a word's meaning in typography. But trying to pack in too many ideas can be overwhelming. Instead of overcomplicating the message, focus on delivering it through a clean and simple design. Less is More.

<Week 3>

The overall typography for Balance worked effectively. For the second page’s Relax, the suggestion was to make the wave resemble a continuous flowing ripple, similar to the first page’s Relax, rather than a downward curve.
Regarding Help, the initial idea of adding tears was too literal. Instead, extending the lower parts of the “h” and “p” and using anchor points to create a droplet effect would better convey the feeling of crying for help.
Finally, I mistakenly used fonts outside the professor’s provided set, and I realized the importance of practicing with the designated 10Fonts to deepen my understanding and skills.

<Week 4>

Last week, I selected the word BALANCE from my digital typography work and developed it into an animation. The concept involved two instances of the word intersecting at the center, creating a meeting point. I paid close attention to making each letter symmetrical so that the overall design conveyed a sense of balance.

The feedback I received highlighted the simplicity and clarity of both the typography and the animation, which were considered strong aspects of the project. Personally, however, I felt that the movement of the animation was not yet smooth enough. The transitions seemed abrupt and slightly disconnected.

<Week 5>

Using serif fonts for titles and sans-serif fonts for body text creates a clear visual hierarchy and improves readability. Serif fonts add formality and draw attention to headings, while sans-serif fonts are cleaner and easier to read in longer passages.

Consistency in font usage is essential—too many fonts can confuse readers and reduce clarity. Effective typography balances contrast and consistency, emphasizing key elements while maintaining professional cohesion and readability.

REFLECTIONS

<Week 2>

Experience: In the project, I attempted to express multiple ideas through typography. While I wanted the design to reflect the meaning of the words, I realized that layering too many concepts made the layout feel cluttered and difficult to read.
Observations: Interestingly, I noticed that several classmates made similar mistakes, trying to include too many ideas in their designs. During class, the professor asked other students to vote on whether they agreed or disagreed with certain design choices. This exercise revealed how typography is perceived from a general audience’s perspective, showing clearly which designs communicated effectively and which ones felt overwhelming. Forgetting the audience’s perspective: A design that looks “creative” to the designer may feel overwhelming or confusing to the viewer.
Findings: I learned that typography works best when clarity is prioritized over complexity. A clean and simple design communicates the message directly and avoids confusing the reader. Moving forward, I will focus on balancing creativity with simplicity, ensuring that type supports meaning without distracting from it.

<Week 3>

Experience: Working on this project taught me how typography can go beyond literal representation and instead embody emotions through structural adjustments. I experimented with different forms, but realized that subtle changes often communicate more effectively than direct illustrations.
Observations: The professor’s feedback highlighted the importance of rhythm and flow in type design. For Relax, continuity in the wave pattern creates a stronger visual metaphor. For Help, the indirect approach of elongating letterforms conveys emotion more elegantly than adding obvious symbols.
Findings: I discovered that sticking to the provided 10Fonts is not just a rule but a valuable exercise in discipline and creativity. By limiting myself to the given resources, I can better understand the nuances of each typeface and learn to manipulate them meaningfully.

<Week 4>

Experience: Last week, I selected the word BALANCE from my digital typography work and developed it into an animation. The concept involved two instances of the word intersecting at the center, forming a meeting point. I focused on making each letter symmetrical to highlight the theme of balance. The process was engaging, and I enjoyed exploring how typography could visuallyexpress equilibrium.
Observation: From the feedback, I learned that the simplicity and clarity of the animation and typography were considered strong points. The design was visually appealing and communicated the concept effectively. However, I noticed that the movement of the animation did not feel smooth—it appeared abrupt and disconnected. This made me realize that while the visual design was strong, the technical execution of motion needed more refinement.
Findings: I concluded that achieving smooth transitions is crucial for enhancing the overall impact of the animation. The abruptness in movement reduced the sense of flow and harmony that the word BALANCE should convey. Moving forward, I need to focus on improving the fluidity of motion.

<Week 5>

Experience: During the project, I experimented with different font combinations and realized how typography choices directly affect readability. Using serif fonts for titles and sans-serif fonts for body text gave me a clearer hierarchy and made the design feel more professional. I felt that this contrast helped emphasize the headline while keeping the body text easy to follow.

Observations: I noticed that employing multiple fonts within a single layout page can disrupt rhythm and confuse the reader. The professor’s feedback made me aware that consistency in font usage is just as important as creativity. Comparing my work with others, I saw that layouts with fewer font variations looked more cohesive and communicated ideas more effectively.

Findings: I concluded that the difference between headline and body fonts should be intentional, serving as emphasis through contrast rather than decoration. This taught me that effective typography requires balance—contrast to highlight key elements and consistency to maintain clarity. Moving forward, I need to strengthen my discipline in font selection and apply these principles to ensure both readability and emotional impact in my designs.

Jihyun Lim (0391015)

Search This Blog