Typography - Task 1 : Exercises
22.09.2025 - 26.10.2025 (Week 1 - Week 5)
Lim Jia Yu 0357873
Bachelor of Business (Hons) in Digital Marketing l Creative Media Design (Minor)
GCD60104 Typography (sec 02)
Task 1 (Exercises)
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Feedbacks
4. Reflections
Lectures
W1 Lecture (22.9.2025)
Title - Introduction
Lecture Video 1: Typo_0_Introduction
What is typography ?
- the art and technique of arranging type (text)
- to make written language legible, readable, appealing when displayed
- arrangement of type includes select typefaces, point size, line length, line-spacing, letter-spacing, adjust the space within
letter pairs
- used in movie title, animations, website design, app design, signage design, logo types and so on
How it evolved ?
- over 500 year from calligraphy > lettering > typography
1. Calligraphy
- the art of writing by hand with special tools like brushes or pens, focusing on beautiful strokes and flow
2. Lettering
- drawing letters as illustrations, where each letter is designed carefully like artwork, not just written
3. Typography
- the arrangement and style of type (fonts) in design, focusing on readability, layout, how text communicates visually
Font vs Typeface
Font :
- refers to the individual font or weight within the typeface
- exp - Georgia Regular, Georgia Italic, Georgia Bold
Typeface :
- refers to the entire family of fonts/weights that share similar characteristics/styles
- exp - Georgia, Arial, Times New Roman, Didot, Futura
Extra knowledge
Link given in video - Type History & First Alphabets
Title - E-portfolio Briefing
Lecture Video 2: Typo_0_E-portfolio Briefing
Our lecturer, Mr. Hafiz introduced us to Blogger as the main platform to record and update our learning progress throughout this 14 weeks. He explained how to set up an e-portfolio properly and guided us on the important sections that should be included, which are lectures, instructions, feedbacks, reflections, and further readings. Step by step, he also showed us how to write and organise our posts so that our e-portfolio is clear, structured, and easy to follow.
Title - Development
Lecture Video 3: Typo_1_Development
Early letterform development
- Phoenician to Roman
Hand script
- from 3rd to 10th century C.E.
Blackletter to Gutenberg's type
Text type classification
W2 Lecture (29.9.2025)
Title - Text Part 1
Lecture Video 4: Typo_3_Text Part 1
Kerning vs Letterspacing vs Tracking
Kerning :
- the spacing between individual letters
Letterspacing :
- the adjustment of space between the character in a line or block of text
Tracking :
- process of loosening or tightening a block of text
- normal tracking, loose tracking, tight tracking
Formatting text
- process of styling and arranging type to control how it looks, reads, and communicates
1. Justified
- aligned evenly on both the left and right edges
- creates clean, rectangular block of text
- exp: newspaper, books, formal documents
2. Centered
- aligned in the middle of the paper or column
- both left and right edges are uneven
- exp: titles, invitations, posters, short passages
3. Flush right
- aligned along the right edge, ragged on the left
- creates modern, less traditional look
- exp: captions, side notes, design-heavy layouts
4. Flush left
- aligned along the left edge, ragged on the right
- natural for reading left-to right, easy on the eyes
- exp: alignment for body text (especially in Western languages)
Texture
- overall visual appearance or "color" of a block of text
- created by typeface choice, size, weight, spacing, alignment
- it is how text looks at a glance (such as dense, light, smooth, uneven) before you actually read the words
Leading vs Line length
Type size
- should be large enough to be read easily at arm length
Leading :
- vertical space between lines of text (baseline to baseline)
- effect :
tight leading - text looks dense, heavy texture, harder to read
loose leading - text looks airy, lighter texture, easier to read
Line length :
- show how wide a line of text is
- 55 to 65 characters per line is ideal for comfortable reading (Good Rule)
- effect :
long line length - harder for eye to track, can make text tiring
short line length - easier to read, but too short can feel choppy
Summary
W3 Lecture (6.10.2025)
Title - Text Part 2
Lecture Video 5: Typo_4_Text Part 2
Indicating paragraph
Widows vs Orphans
Widows :
- a short line (often just one word)
- left alone at the end of a column of text
Orphans :
- left alone at the start of new column
Highlighting text
- to emphasise key information
- guide the reader's eyes to what's most important
- exp: titles, keywords, quotes
Headline within text
- labeled (A, B, C) according to the level of importance
1. "A" head
- indicates a clear break between the topics within a section
- set larger than text, small caps, in bold
2. "B" head
- subordinate to "A" heads
- indicates new supporting argument or example for the topic at hand
3. "C" head
- not common
- highlights specific facets of material within "B" head text
4. Put together
- sequence of subheads = hierarchy
W4 Lecture (13.10.2025)
Title - Basic
Lecture Video 6: Typo_2_Basic
Describing letterforms
The font
- full font of a typeface contains much more than 26 letters
- to numerals & few punctuation marks
Italic vs Roman
Italic :
- slanted, cursive, flowing letterforms, used to highlight specific elements
Roman :
- upright, standard letterforms that are not slanted
- the default and primary text style, used for general body text
Punctuation
- miscellaneous characters
- can change from typeface to typeface
- proper typographic handling of these marks
- involve specific spacing, kerning, selection of appropriate glyphs from a typeface, for professional results and readability
Ornaments
- used as flourishes in invitations or certificates
- as a font in a larger typeface family
- only few traditional / classical typefaces contains ornamental fonts
Describing typefaces
1. Roman
- uppercase forms derived from inscriptions of Roman monuments
- "Book" : a slightly lighter stroke in roman
2. Italic
- named for fifteenth century Italian handwriting
- forms are based
3. Boldface
- thicker stroke
- can also be called "semibold", "medium", "black", "extra bold", "super" based on stroke width
4. Light
- "thin" : lighter stroke
5. Condense
- version of the roman form
- "compressed" : extremely condense styles
6. Extended
- extended variation of a roman font
Instructions
<iframe src="https://drive.google.com/file/d/1cLDKQn6hY0SLxbcTtn5xY2bMshOHa45P/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise - (1) Type Expression
A) Research
Step 1:
brainstormed possible words and voted for six of them in class
1. fade 4. roll
2. swirl 5. melt
3. drop 6. cut
Step 2:
research the definition of each word and look for visual examples on Pinterest
Step 3:
pick 4 favourite words
1. swirl 3. drop
2. melt 4. cut
Step 4:
before sketching the words, consider the following points for self-evaluating
1. are the explorations sufficient?
2. does the expression match the meaning of the word?
3. on a scale of 1-5, how strong is the idea?
4. how can the work be improved?
Step 5:
we were only allowed to use the 10 fonts provided by Mr. Vinod for our further sketches
B) Ideation
Step 1:
hand-drawing explorations (25 sketches for each words)
Step 2:
sketches approved by Ms. Vitiyaa
Step 3:
digitised explorations (Adobe Ilustrator)
Step 4:
4 selected sketches & digitized words
Step 5:
one selected word for animation
Step 6:
looks for inspiration to the animation
Step 7:
requirements
# when exporting animation artwork to Photoshop
- ensure they are : grayscale & 72ppi (not 300ppi)
- ensure that Gif does not exceed 1024px (width and height) / 800px minimum
- ensure Gif has a white background (or black/grey)
Step 8:
artboard frame (Adobe Illustrator)
animation explorations (Adobe Photoshop CC)
Version 1 - 44 frames
.gif)
Version 2 - 15 frames
.gif)
Version 3 - 14 frames
.gif)
Step 9:
selected animation
.gif)
C) Final Type Expressions
.jpg)
.gif)
Exercise - (2) Text Formatting
A) Minor Exercise
Step 1:
kerning & tracking
Kerning - adjusts the space between individual letterforms
Tracking (line-spacing) - adjusts spacing uniformly over a range of characters
.jpg){kind=tracking}
.jpg){kind=tracking}
Step 2:
font size, line-length, leading, paragraph spacing
.jpg){kind=tracking}
Step 3:
text fields, alignment, ragging
Step 4:
cross alignment & baseline grid
B) Major Task
Step 1:
layout references
Pinterest @ https://pin.it/3Gtko5G8g
Pinterest @ https://pin.it/7ntbYkP1F
Pinterest @ https://pin.it/25N2H5BWx
Pinterest @ https://pin.it/AdKX7N7ih
Pinterest @ https://pin.it/5pxibX1k5
Pinterest @ https://pin.it/6Dmv26Jh6
Step 2:
requirements
- font size (8-12)
- line length (55-65 / 50-60 characters)
- text leading (2, 2.5, 3 points larger than font size)
- paragraph spacing (follows the leading)
- ragging (left alignment) / rivers (left justification)
- cross alignment
- no widows / orphans
Step 3:
sketches for layout
Step 4:
digitised explorations (Adobe InDesign)
Step 5:
layout design approved by Ms. Vitiyaa
# all have been approved, and Ms. Vitiyaa asked me to choose one by myself
Step 6:
selected text formatting
C) Final Text Formatting
Requirements
- JPEG, 300ppi, grayscale (with grid visible and without)
- PDF (with grid visible and without)
- provide formatting details
Head
Font/s : Univers LT Std (Bold)
Type size/s : 16 pt , 29 pt
Leading : 19 pt , 32 pt
Paragraph spacing : 0 mm
Body
Font/s : Univers LT Std (Roman)
Type size/s : 9 pt
Leading : 12 pt
Paragraph spacing : 12 pt (4.233 mm)
Characters per-line : 50-60
Alignment : justify with last line aligned left
Page Margins
Top (12.7mm) + Left (12.7mm) + Right (12.7mm) + Bottom (50mm)
Columns : 4
Gutter : 5 mm
Feedbacks
Week 1
General Feedback :
Ms. Vitiyaa briefed us on the module information and explained what we are expected to do throughout the 14 weeks. One of the first things we had to do was set up our e-portfolio, which will be used to track our progress. Together as a class, we brainstormed and selected words that we will use for our Task 1 (Exercise 1) : Type expression. The words we came up with were "fade", "swirl", "drop", "roll", "melt", "cut". From there, each of us chose four words that we preferred to work with. I chose "swirl", "drop", "melt", "cut". For the task, we were required to sketch out 100 designs in total — 25 variations for each chosen word.
Week 2
General Feedback :
My work was not approved because it did not meet the required format.
Specific Feedback :
I sketched using my phone instead of drawing on paper, so I need to redo my sketches on paper and present them again in Week 3 for approval.
Week 3
General Feedback :
My work did not follow the principles of design, so it was not approved.
Specific Feedback :
I need to redraw all my sketches to better match the design principles and show it again in Week 4 for feedback.
Week 4
General Feedback :
My sketches for four words "swirl", "melt", "drop", "cut" were finally approved by Ms. Vitiyaa.
Specific Feedback :
Out of 25 sketches for each words, 2 "swirl", 2 "melt", 3 "drop", 4 "cut" designs were approved. She mentioned that my ideas have improved and the visual now clearly represent each words' meaning. Can proceed to the animation part.
Week 5
General Feedback :
My progress for both exercise 1 & 2 have been positive. The feedback and revisions helped me understand the design requirements more clearly and improve the quality of my work. Both exercises have now been approved and are ready for submission.
Specific Feedback :
Exercise - (1) Text Expressions
My animation work was approved without any major revisions. It met the project requirements and is ready for submission.
Exercise - (2) Text Formatting
Initially, my work was not approved because I used coloured photo instead of black and white one, and there were widows in my layout. After making the necessary corrections, all 10 of my sketches were approved. Ms. Vitiyaa asked me to choose one design for the final submission.
Reflections
1) Experiences
Working on the Typography Task 1 - Exercises was both exciting and challenging. At the beginning, I didn't expect typography to involve so much experimentation and detailed thinking. For Exercise 1 - Text Expressions, I started with four words, "swirl", "drop", "melt", "cut". Translating each word into a visual form through letters was harder than I thought. Initially, I did 25 sketches for each word, but all were not approved. It took two rounds of feedback and revisions before I finally understood how to make the word's meaning visible through the design. For example, when Ms. Vitiyaa pointed out which sketches worked and which didn't, I learned how small changes in shape or flow could completely change the feeling of a word. The animation part was my favourite. Seeing my design move made the work feel alive and complete. Overall, I enjoyed the process of sketching, digitizing, and animating the words. It was challenging but rewarding to see my ideas come to life.
When I moved to Exercise 2 - Text Formatting, I felt a shift from creative expression to more technical precision and required a lot of patience. Adjusting kerning, tracking, leading, line length, alignment, and layout made me intimately aware of how typography is not just about picking a "cool font" but about readability, hierarchy, and intentional space. I also experienced frustration, when my first version wasn't approved because I used colour images instead of black & white and there were widows in my layout. That feedback moment pushed me to revisit assumptions and pay closer attention. I felt a bit disappointed at first, but it helped me realise how strict typography rules can be and why they matter. However, with Ms. Vitiyaa's feedback, I corrected these issues and learned the importance of precision in typography. After several improvements, all ten sketches were approved, and I was asked to select one for final submission. This experience taught me patience and the value of revising my work carefully.
2) Observations
While working on Exercise 1 - Text Expressions, I observed how much impact small design decisions can have on expressing meaning. At first, I didn't realise that even the curve, size or thickness of a letter could completely change the mood of a word. For example, when designing "melt", I noticed that soft, dripping letterforms immediately gave a sense of fluidity, while sharp edged didn't match the idea at all. Besides, I observed that sketches that looked fine on paper sometimes felt unbalanced when digitised, especially when I transferred them into Adobe Illustrator. It made me realise how different the same design can appear depending on the medium. Through trial and error, I learned to look more closely at spacing, proportion, and rhythm within each word. Not only that, I noticed that I became more confident after each feedback session, as Ms. Vitiyaa's comments helped me see where my ideas worked and where they needed more refinement.
During Exercise 2 - Text Formatting, my observations were more technical. I realised how structured and rule-based typography is compared to the expressive approach of Exercise 1. I observed that small adjustments like fixing kerning, controlling line length, or aligning text boxes make the layout look much more professional. When I switched from coloured to black and white image as required, I saw how much cleaner and more balanced the composition became. Besides, I observed that widows and inconsistent spacing can easily break the flow of reading, even if the overall layout looks nice. Working on this exercise taught me to slow down and pay attention to every detail. It made me understand how discipline and precision are just as important as creativity in design.
3) Findings
I found that typography is not just about making text look nice, it's about creating meaning through design. Every element, from spacing to font choice, carries emotion and structure. For Exercise 1 - Type Expressions, I learned how type can behave like a drawing, it can move, bend, or melt to reflect an idea. For Exercise 2 - Type Formatting, I learned how structure and order can make reading easier and move visually balanced.
In addition, I found that feedback plays a big role in improvement. Each correction helped me notice details I might have overlooked, like widow control and proper alignment. I also found that discipline is important. I realised how crucial it is to document every step of my process, because it helps me track my progress and reflect on what I've learned. Whenever I skipped documentation, I forgot the little details that could've been useful later. Another big findings is that patience truly pays off, even though my work wasn't approved at first, those rejections made my final outcome stronger.
Overall, these exercises taught me both creative and technical skills. I gained confidence in using design software such as Adobe Illustrator, Adobe InDesign and learned to pay more attention to structure, balance, and visual communication. Moving forward, I plan to keep practising sketching and refining my layouts to build a stronger sense of typography.
Further Readings
Book 1
Book title :
Expressive Typography - The Word as Image
Author :
Kimberly Elam
Abstract :
This book explores how typography can move beyond just being text on a page. It shows how words can be visual, emotional, and artistic. Kimberly Elam presents many creative examples of designers who use type to express ideas and emotions, almost like illustrations made from letters. She covers techniques such as calligraphy, collage, layering and even building letterforms with physical materials. The book encourages thinking about type as an image that communicates through shape, rhythm, and movement.
How it relates to my work :
This book connects directly to my Exercise (1) - Type Expression. In that task, I designed words like "fade", "swirl", "melt", "drop", "cut" by expressing their meanings visually. The book helped me understand that typography can carry feeling. For example, "melt" can look soft or dripping while "cut" can appear sharp or sliced. It also relates to my process of sketching multiple ideas and choosing one final concept. The way Kimberly Elam combines experimentation with visual storytelling matches what I was doing in this exercise.
Key takeaways :
- typography can be emotional, it is not only about reading but also about feeling the word
- each letter can have its own character and energy, changing line thickness or curve can completely shift the mood
- expressive type design encourages breaking the rules to find new forms of communication
- visual rhythm and movement can help show meaning, such as making letters flow or vibrate to reflect the word's action
- combining type with texture, images, or hand-drawn effects can make designs more personal and engaging
- concept and creativity matter more than perfection, the goal is to communicate a mood, not just make something neat
- this book reminded me that typography is a form of art as much as it is design
Book 2
Book title :
Typography Essentials
Author :
Ina Saltz
Abstract :
Ina Saltz's Typography Essentials is a practical and visual guide that covers the main principles of working with type. It explains how to use kerning, tracking, leading, hierarchy, alignment, grids effectively, with clear examples from real-world designs. The book is divided into sections from single letters to full layouts, showing how each level of typography contributes to strong communication. It also includes an updated section about expressive typography, showing how designers can be creative while keeping their layouts functional and readable.
How it relates to my work :
This book relates closely to my Exercise (2) - Type Formatting exercise, where I practiced adjusting kerning, tracking, leading to create clean, readable text layouts. It helped me understand why certain spacing or alignment choices feel more balanced. The section about grids also reminded me of the importance of structure in design, something that guided my layout composition. It ties perfectly with my earlier expressive typography task because it shows how creativity and structure can exist together in one design.
Key takeaways :
- typography is about both design and communication, every small detail affects how people read and feel
- good spacing (kerning, tracking, leading) creates better visual rhythm and flow in text
- hierarchy helps the viewer know where to look first like font size, weight, alignment guide the eye
- grids provide structure, they keep the design organised and readable, especially in multi-column layouts
- clean formatting doesn't mean boring, it is about clarity and visual comfort
- consistency across type choices (font style, alignment, spacing) helps create a strong professional look
- the book reminded me that design is problem-solving, typography must look good and function well
- it also gave me ideas for how to apply type in motion graphics or digital interfaces, not just in print
--> Press Link to (Task 2 : Typographic Exploration & Communication)
Comments
Post a Comment