TYPOGRAPHY: TASK 1 Exercise 1 Type Expression
TYPOGRAPHY - Task 1: Exercise 1 Type Expression
LECTURER DURATIONS: WEEK 1 - WEEK 3
NAME: SITI NUR HASYIMAH ISMAIL
STUDENT ID: 0348369
PROGRAM: BACHELOR IN FASHION DESIGN TECHNOLOGY
TABLE OF CONTENTS:
1. Lectures & Lecture Summary
2. Instructions
3. Task
4. Feedback
5. Reflection
6. Further Readings
LECTURES
week 1
Week 2
week 3
LECTURE SUMMARY
Week 1
Development / Timeline
1. Early Letterform Development: Phoenician to Roman
Early writing began by scratching into wet clay or carving into stone. Because of these tools, early uppercase letterforms evolved as simple shapes made from straight lines and circular forms. For almost 2000 years, only uppercase letters existed, shaped directly by the limitations of ancient tools and materials.
2. Evolution of Letterforms Toward Modern Latin
As writing spread, Phoenician script influenced Greek, Etruscan, Roman, and finally Modern Latin letter shapes. Over time, each culture adapted the original forms into the alphabet we use today.
3. Greek Writing Direction: Boustrophedon
The Greeks changed the writing direction. While Phoenicians wrote right to left, the Greeks developed “boustrophedon,” meaning “as the ox ploughs.” In this style, each line alternated direction — one left to right, the next right to left — and letter orientation changed accordingly.
4. Roman Letterform Development
Etruscan and later Roman stone carvers first painted letters before carving them into marble. The painted strokes showed contrast — thick verticals, thin horizontals, and flared stroke endings — and these features carried over into the carved forms. This is the beginning of the serif style we recognize today.
Trajan inscription Roman letters
5. Roman Letterform Example
The Augustan inscription from the 1st century B.C.E. in the Roman Forum is a famous example, showing precision, contrast, and classic serif letterforms.
Augustan inscription Roman Forum
6. Early Letterform developement: Phoenician to Roman
Typography Development: 3rd–10th Century C.E.
1.Rustic capitals (3rd–4th c.) compressed Roman letters to save space but reduced readability.
2. Roman cursive (4th c.) shaped the first early lowercase forms through quick writing.
Roman cursive 4th century manuscript
3. Uncials (4th–5th c.) introduced rounder, more readable letters.
4. Half-uncials (500 c.) are the first true lowercase system.
5. Carolingian minuscule (9th–10th c.) standardized clear uppercase, lowercase, spacing, and punctuation — the basis of modern typography.
Carolingian minuscule manuscript 9th century
Typography Development / Timeline — Summary
Typography evolved through major technological and aesthetic shifts, beginning with Humanist scripts and eventually leading to modern serif and sans serif systems.
1. Humanist Script → Roman Type (1450–1500)
Early printers in Venice and Rome, like Nicholas Jenson and Francesco Griffo, refined handwritten Humanist forms into the first highly readable Roman typefaces.
Jenson Roman type, 1470
2. The Golden Age of French Printing (1530s)
In Paris, Claude Garamond created typefaces with cleaner proportions and elegance, setting the foundation for modern text type.
3. Dutch Printing (late 1500s–1600s)
Printers like Christophe Plantin (Antwerp) advanced book typography with sturdy, highly readable Dutch-style text types.
4. English Type (1700s)
William Caslon introduced warm, old-style serif forms used widely in English publishing.
5. Baskerville (1760s)
John Baskerville brought higher contrast, sharper serifs, and smoother printing — a major leap toward modern typographic refinement.
6. Bodoni (1800s)
Giambattista Bodoni pushed contrast even further with highly geometric, dramatic “Modern” typefaces.
Bodoni Manuale Tipografico, 1818
7. 19th Century → Early 20th Century
Advertising needs produced Square Serifs/Slab Serifs, bold and blocky forms like Clarendon and Rockwell.
The 1900s introduced early sans serif ideas that later influenced the Bauhaus (1923) and Swiss designers like Müller-Brockmann (1950s).
Text Type Classification (Key Categories)
1. 1450 — Blackletter
First printing types based on medieval handwriting.
Examples: Cloister Black, Goudy Text
Blackletter type sample
2. 1500 — Italic
Inspired by Italian handwritten forms; compact and efficient, later paired with Roman type.
3. 1550 — Script
Based on engraved calligraphy; elegant but unsuitable for long text.
Examples: Mistral, Snell Roundhand
4. 1750 — Transitional
Sharper contrast, refined curves due to improved printing methods.
Examples: Baskerville, Bulmer, Times Roman
Baskerville type specimen
5. 1825 — Square Serif / Slab Serif
Bold, heavy forms for advertising.
Examples: Clarendon, Rockwell
6. 1990 — Serif/Sans Serif Families
Modern families blending serif + sans serif styles into unified systems.
Examples: Rotis, Stone
Week 2
1. The anatomy of a typeface
The anatomy of a typeface refers to the structural parts that make up each letterform. These include features like the baseline (where letters sit), x-height (height of lowercase letters), ascenders and descenders (strokes that rise above or fall below the x-height), and stems, serifs, and bowls that shape the overall form. Understanding these elements helps designers choose and build typefaces that are readable, balanced, and consistent across different styles and sizes.
2. Kerning, Text Spacing & Text Formatting
- Kerning refers to adjusting the space between individual letters, improving visual balance in a word. It is different from normal text spacing, which is created simply by pressing the spacebar. Kerning is commonly used in logo design, titles, and display text.
Shortcut: Option/Alt + Left or Right Arrow to adjust kerning.
Kerning (top) vs Tracking Diagram (bottom)
- For graphic illustrations, designers usually work in Adobe Illustrator because it handles vector shapes and artwork. When creating layouts that include large amounts of text—such as brochures, magazines, and multi-page documents—Adobe InDesign is the professional tool used for typesetting and layout.
- A new typography term learned is ragging, which refers to the uneven, jagged side of a paragraph when text is not justified. Understanding ragging helps create cleaner page layouts. There are four main text alignment styles: flush left, centered, flush right, and justified, each creating a different visual rhythm in a paragraph.
Text Alignment Examples (Left, Center, Right, Justified)
Week 3
Text / Indicating Paragraph
- Line spacing is the vertical space between two lines of text. When working with two columns, matching the paragraph space to the line space (e.g., both set to 12pt) ensures proper cross-alignment across the layout.
- Leading refers specifically to the spacing between each individual line of text.
In typography, widows are short lines left alone at the end of a column, while orphans are short lines stranded at the top of a new column. Both are avoided in professional typesetting because they disrupt visual flow and readability.
- Orphan: single line at the top of a column and single word at the bottom of a paragraph
- Widow: single line at the bottom of a column
Widows and Orphans
INSTRUCTIONS
Week 2
Type Expression Video tutorial before digitising the 4 words:
Week 3
Animating one of the words:
TASK
Week 1: Research & 25 Sketches
Chosen words:
- Float
- Drop
- Swirl
- Pull
Chosen Fonts:
- Futura Std
- Gill Sans Std
- Univers LT Std
- ITC Garamond Std
-Research-
For my design research, I was looking for images that represent the expression of each word. I used these images as references for the composition of each word design. I tried to look at some photography photos and visual illustrations that incorporated similar concepts so I can translate that ideas into my designs, so the expression of each word looks more expressive and realistic.
FLOAT
DROP
SWIRL
PULL
-Sketches-
FLOAT
DROP
SWIRL
PULL
-CHOSEN DESIGNS-
These designs were chosen during class by Miss Vitiyaa during week 4 class, I as also advised to refine some designs before continue animating my text.
Week 2: Digitising the 4 words
PDF FILE
Week 3 : Animate one of the 4 type expression words
Each board I created captures a specific movement of the font, forming the full sequence of the animation.
Final Animated Font
FEEDBACK
Week 1
General feedback: Introduction to class and e-blog setup.
Specific Feedback: The First assignment was assigned by Miss Vitiya during class. I also watched a pre-recorded tutorial on how to set up an e-blog using Blogspot to understand the process of creating and managing an online blog.
Week 2
General Feedback: I was advised to not distort the fonts and my designs have to be minimalistic.
Specific Feedback: Miss Vitiya was reviewing everyone's type expression sketches during class. I also continued drawing my 25 sketches during class. I was also advised by Miss Vitiya to create designs that are simple and no additional element such a heart shape and so on are allowed.
Week 4
General Feedback: I was advised to improve the chosen designs.
Specific Feedback: Miss Vitiya was giving a brief introduction for our second task. We were also advised to complete our first task by today, so, we can continue working on our next task of the week. Some designs for each word have been chosen for the first exercise. I may continue working on my final 4 words designs and continue animating one of the words.
Week 2
General Feedback: I was advised to not distort the fonts and my designs have to be minimalistic.
Specific Feedback: Miss Vitiya was reviewing everyone's type expression sketches during class. I also continued drawing my 25 sketches during class. I was also advised by Miss Vitiya to create designs that are simple and no additional element such a heart shape and so on are allowed.
Week 4
General Feedback: I was advised to improve the chosen designs.
Specific Feedback: Miss Vitiya was giving a brief introduction for our second task. We were also advised to complete our first task by today, so, we can continue working on our next task of the week. Some designs for each word have been chosen for the first exercise. I may continue working on my final 4 words designs and continue animating one of the words.
REFLECTION
Experience
In my first task, Type Expression, I worked fully in Adobe Illustrator to create digital sketches. I experimented with different ways to manipulate text and explored tools I had never used before. I also tried turning text using Adobe Photoshop for the first time, which gave me a new hands-on experience beyond my usual workflow.
Observation
While working on the task, I realised that text manipulation involves more settings and techniques than I originally thought. Even though I’ve used Illustrator and Photoshop for years, there were still many features—especially those related to text distortion, spacing, and shaping—that I hadn’t explored. I noticed how small adjustments can completely change the mood and communication of the design.
Findings
Through this process, I discovered new tools and text-editing functions that strengthened my overall design skills. I learned that mastering type expression requires understanding both the technical controls and how they influence visual meaning. This task expanded my knowledge and made me more confident in applying text manipulation in future projects.
FURTHER READINGS
1. Designing Typography: Theory & Inspirational Artworks
Designing Typography: Theory & Inspirational Artworks by Nadia Gigi, Roziani Mat Nashir, and Nurul Amira BInti Ramli is a beautifully crafted guide that combines clear, practical typography theory with an inspiring showcase of contemporary typographic design. Covering everything from type anatomy and grid systems to cultural influences and experimental lettering, the book pairs accessible explanations with hundreds of full-color works by talented designers from around the world — many from Southeast Asia and the Middle East. It’s an essential resource for students, professionals, and anyone passionate about the art of type.
2. What is typography anatomy?
This article introduces the hidden structure behind great typography: how understanding the anatomy of type empowers you to make smarter choices that boost readability, guide the viewer’s eye, and strengthen the overall user experience across every screen and brand touchpoint. You’ll explore the core principles of typography, the essential components of letterforms, and practical ways to apply this knowledge to create clearer hierarchies and more intentional designs.
3. Who Created The First Alphabet?
This article explores how early writing systems evolved from complex pictographic symbols into the first true alphabet. It traces the development from Proto-Sinaitic markings derived from Egyptian hieroglyphics, through the spread of the Phoenician consonantal script, and finally to the Greek innovations that introduced vowels and shaped the foundation of many modern alphabets.
Comments
Post a Comment