Typography - Task 1: Exercises
Typography - Task 1: Exercises
22/9/2025 - 24/10/2025 (Week 1-Week 5)
Zhao Jie,0387076
Typography
Task I: Type Expression && Text Formatting
Table of Contents
1. Lecture
🔘Lecture 0:IntroductionWe started the Typography module this week, It’s not just about making text look nice — it’s about visual communication, structure, and attention to detail.
At first it felt hard because we’re used to thinking in images, not text. But typography trains how we “see” words visually — something every designer needs, from animation to web design.
We learned that Typography appears everywhere: logos, motion titles, websites, apps, signage, books, even packaging. Good typography makes things easier to read and understand.
Mr. Vinod said design is iterative — make, get feedback, fix, repeat — and that we must learn the conventions before breaking them. He also stressed reading, since typography has over 500 years of history.
Key terms I noted:
- Calligraphy – handwriting style.
- Lettering – drawing letters individually.
- Typography – arranging text to be legible, readable, and appealing.
- Typeface:Refers to the various families that do not share characteristics.
- Font:Refers to the individual font or weight within a typeface,is a specific style or weight .
We’ll be doing type creation and layout projects this semester,and set up a blog using plain text and default themes for consistency.
Overall, I’ve gained a basic understanding of typography. It’s not just a visual skill — it’s also a way of thinking and expressing ideas.
🔘Lecture 1: Development
•Recommended Reading:
《A Type Primer》John Kane（2002）
"A guide full of practical hints to help build the confidence of graphics and typography students. Its aim is to bring the reader to the point where they understand the basic principles of typography and to strengthen the designer's 'eye' through informed, direct observation."
In this class, the teacher introduced the development and timeline of typography from a Western perspective.
With the improvement of writing tools, the shapes of letters also changed, and different shapes served different purposes.
 |
| Evolution from Phoenician letter （Phoenician to Roman） |
 |
| Greek fragment, stone engraving. (Date unknown) |
 |
| Square Capitals （4th or 5th century） |
This gradually led to the concepts of uppercase letters, lowercase letters, and punctuation.(Charlemagne played an important role in promoting the standardization of writing.)
 |
| C. 925: Caloline miniscule |
Later, the invention of the printing press made it possible to meet the demand for large amounts of text, and typefaces changed once again.
 |
| c. 1455: 42 line bible, Johann Gutenberg, Mainz |
🔘Lecture 2:Basic
Through this lesson,I gained a systematic
understanding of typography.
Mastering the Structure,Anatomy, and Classification of type
is the foundation of all design.
We must first understand the history and rules of typography before applying
them flexibly in future creations.
1. Structure of Type
- Baseline:The imaginary line on which most letters sit; defines visual alignment.
- Median Line:The imaginary line defining the top of the lowercase x-height.
- X-Height:The height of the lowercase “x,” crucial for proportions and readability.
- Ascender / Descender Height:Parts that rise above or fall below the x-height and baseline.
- Optical Adjustments — Subtle visual corrections for balance rather than strict geometry.Typography is not math,it’s perception.
2. Anatomy of Type
Only by understanding structure can we
identify the character and individuality of typefaces. Learning type anatomy is
like learning human anatomy for an artist.
I’ve organized all the “Anatomy of Type” elements mentioned in the lecture, as shown below:
3. Type Classifications
The style of a typeface defines the tone
and emotion of design.
- Uppercase & Lowercase:From metal typesetting,uppercase letters were stored in the upper box, lowercase in the lower.
- Small Caps:Capital letters matching the x-height of lowercase letters; used in acronyms or headings.
- Lining (Uppercase) Numerals:Align with uppercase letters, used in tables or titles.
- Lowercase (Oldstyle）Numerals:Have ascenders and descenders, better suited for body text.
4. Principles of Type
Design
The core of type design lies in balancing Readability and Expressiveness.Beginners should focus on fundamentals before pursuing uniqueness.A good typeface should first communicate clearly, then express emotion.A well-designed font conveys both information and the spirit of its era.
🔘Lecture 3:Text Part 1
1. Kerning & Letter Spacing
- Kerning refers to adjusting the space between specific pairs of letters to create even visual spacing.To adjust kerning:Alt + Left Arrow.
- Letter spacing (Tracking) refers to adding or reducing space between all letters in a word or sentence.To adjust Letter spacing:Right Arrow.
2. Ragged Edge & Script Typefaces
Mr. Vinod emphasized maintaining a smooth
ragged edge when aligning text, especially when kerning is applied.
- Avoid using justification as a shortcut for poor spacing.
- Proper kerning and letter spacing should achieve visual balance on their own.
Script typefaces should be used carefully —
avoid using them in all uppercase, as they are designed for connected, flowing
lowercase forms.
3. Serif vs Sans-Serif at Small Sizes
Comparing serif and sans-serif typefaces at small sizes showed that texture and stroke contrast greatly influence legibility.
Serif fonts can create smoother text flow, while sans-serif fonts may perform better on screens.
4. Practical Text Formatting Tips
- Choose appropriate type size and line spacing.
- Aim for an overall middle gray value — neither too dense nor too light.
- Test text both enlarged and at actual size to observe the relationship between ascenders, descenders, and line length.
🔘Lecture 4:Text Part 2
The
lecturer revisits key points from the previous lecture to ensure continuity and
comprehension.
Key Takeaways:
1. Letter Spacing & Kerning:Letter spacing adjusts the space between letters or words, while kerning does the opposite. Tracking involves both in a single sentence or word.
2. Alignment & Color:Text formatting aims for an even middle gray color, regardless of text length.
3. Leading & Text Point Size:Leading should be 2.5 to 3 points larger than the text point size, ensuring clean text lines.
4. Widows & Orphans:Avoiding these typographic errors enhances the readability and aesthetics of text layout.
2. Instructions
3. Process Work
1.PROCESS WORK FOR TYPE EXPRESSION
1.1 Sketching Process
Mr. Max asked us to hold a group vote to choose six words that we would design in the following weeks.
The final six words selected were Fall, Bloom, Bend, Disappear, Swipe, and Focus.
These words became the foundation for our design exploration. Each one carries a different visual and emotional meaning, allowing us to experiment with form, movement, and expression in typography.
These words became the foundation for our design exploration. Each one carries a different visual and emotional meaning, allowing us to experiment with form, movement, and expression in typography.
Word 1: Fall – Design Process
For the word “Fall,” I wanted to express both the process of falling and the result after the fall.
To explore this idea, I designed three different versions.
After reviewing my work, Mr. Max commented that the first version looked rather plain, while the second and third versions were much stronger in concept and visual impact.
I finally chose the third version as my final design because it best conveyed the feeling of fragmentation, representing both the action and the aftermath of falling.
For the word “Bloom,” I created three different versions, all aiming to express the feeling of a flower blooming.
After sending the first version to Mr. Max, he replied, “What is this design trying to show? Maybe you can elaborate for me?”
I realized that the first version didn’t clearly express the blooming concept, so I made further shape adjustments.
In the second version, I tried to make the letters themselves form a complete flower, but I eventually gave up on this idea because it became too hard to read.
In the third version, I transformed the two “o” letters in “bloom” into petal shapes and made the overall letterform taller and slimmer to resemble a small daisy.
After refining the shapes again to make it look more like a flower, this final version was approved.
Word 3: Bend – Design Process
For the word “Bend,” I first created two versions. However, the teacher commented that “they seem to be a bit boring, not too creative, and I’m hoping to see how you can make them more expressive.”Based on his feedback, I combined the ideas of upward and downward curves from my first two versions and designed a third version with a wavy form.
But when I looked at the result, I felt it lacked a strong design sense and looked too ordinary.
So, I kept the wavy concept but adjusted the stroke thickness and curvature rhythm to make the overall form more dynamic and expressive.
This became my fourth and final version.
Word 4: Disappear – Design Process
For the word “Disappear,” I initially created three versions. The first and second versions both used gradient effects to show the feeling of something gradually disappearing.
The third version aimed to create a rusted texture, representing the idea that although it hasn’t disappeared yet, it will eventually fade away.
However, all three versions lacked expressiveness and creativity.
So, I combined the gradient and rust concepts into a fourth version, but the result still looked too ordinary.
I then decided to discard the previous four designs and created a fifth version, in which the middle letter “p” was transformed into a dotted outline, a visual technique often used in comics to show something disappearing.
Mr. Max thought this version worked very well, so it became my final design.
Word 5: Focus – Design ProcessThe third version aimed to create a rusted texture, representing the idea that although it hasn’t disappeared yet, it will eventually fade away.
However, all three versions lacked expressiveness and creativity.
So, I combined the gradient and rust concepts into a fourth version, but the result still looked too ordinary.
I then decided to discard the previous four designs and created a fifth version, in which the middle letter “p” was transformed into a dotted outline, a visual technique often used in comics to show something disappearing.
Mr. Max thought this version worked very well, so it became my final design.
For the word “Focus,” my first version tried to make the center letter “C” look like a gun’s target symbol.
However, Mr. Max commented, “This is not ok due to the use of graphic elements, the target element,” so I decided to discard that version.
Then I created a second and third version using different types of blur effects.
The second version aimed to create the feeling of a camera focusing, while the third version was meant to show a sense of mental concentration.
In the end, Mr. Max selected the third version as my final design.
For the word “Swipe,” I first created two versions.
In the first version, I wanted to show a sense of speed and motion, expressing the fast movement of swiping.
In the second version, I made the bottom part of the letters look soft and flexible, as if they could slide easily.
However, both versions looked too simple and basic.
So, I combined the two ideas and created a third version, where the letters not only had a shape that suggested smooth sliding, but also showed a clear direction of motion.
This version successfully captured the feeling of “swipe,” and it became my final design.
1.2 Sketching Process
I started to digitize my sketches in Illustrator. I chose Bloom, Disappear, Fall, and Swipe as the words to digitize.Since I was not very familiar with the software, the process was quite slow and a bit difficult for me. I tried different typefaces to recreate my sketches as accurately as possible. During the process, I learned how to use the Scissors Tool and how to turn letter outlines into dashed lines and so on.
The final results of my designs are shown as follows.
1.3 Create Frame Animation
I chose Disappear as the word to animate.For my frame animation, I created ten frames in total. The idea was to make the middle letter “p” disappear after four flashes.
I used changes in size and opacity to create the flashing effect — when the letter was “on,” it appeared larger and brighter; when it was “off,” it became smaller and more transparent.
With each flash, the “off” frame made the “p” even smaller to suggest gradual disappearance.
For the first three flashes, I made two frames each, but for the fourth flash, I made four frames, adding one where the “p” became very faint and another where it completely disappeared.
This made the final animation feel more natural and better conveyed the sense of “disappearing.”
I created two versions of the GIF — one with a white background and one with a transparent background. Mr. Max chose the white background version as the final outcome.
 |
| Final GIF(white background) |
2.PROCESS WORK FOR TYPE FORMATTING
 |
| Task exercise |
After that, we were given a text titled “Transform the World: The Unsung Architects of Modern Life,” and were asked to design eight different layout variations based on it.
Note:
Things to look out for when completing Task 1, Exercise 2 Text Formatting:
• 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
After submitting all eight layouts to Mr. Max for review, he selected Layout #8 as the final design. He also provided feedback on the image size, which helped me refine the final composition.
Through this project, I learned the basic operations of InDesign as well as several useful techniques for balancing readability, hierarchy, and visual appeal in design.
 |
| Layout #8 |
 |
| Layout #8 Grid |
Layout #8 Properties:
HEAD
- Font/s: Janson Text LT Std-75 Bold
- Type Size/s: 43pt
- Leading: 51.6pt
- Paragraph spacing:0pt
BODY
- Font/s: Adobe Caslon Pro-Regular
- Type Size/s: 10pt
- Leading: 12pt
- Paragraph spacing: 3.881mm
- Characters per-line: 60
- Alignment:Justify with last line aligned left
Page Margins
- top + left + right + bottom:13mm
- Columns: 2
- Gutter:5
4. Feedback
Week 1:
In today’s class, I gained a basic understanding of the content and rules of the typography course.I learned how to create my blog, set up a tag specifically for typography, and, together with my classmates,voted on the word that we will use for our next design project.
Week 2:
General Feedback:
We learned the basics of Adobe Illustrator. The teacher explained what the main tools do and how to use them to create our designs.
We learned the basics of Adobe Illustrator. The teacher explained what the main tools do and how to use them to create our designs.
Specific Feedback:
I started sketching based on the six words that were selected from last week’s class vote. After completing the drafts, I sent them to Mr. Max for review.He said both of my designs for the word “Fall” were good, but for the other five words, he mentioned that “they seem to be a bit boring, not too creative, and I hope to see how you can make them more expressive.”One design was rejected because it used graphic elements.I followed his feedback and made several rounds of revisions, and finally managed to meet his expectations.
I started sketching based on the six words that were selected from last week’s class vote. After completing the drafts, I sent them to Mr. Max for review.He said both of my designs for the word “Fall” were good, but for the other five words, he mentioned that “they seem to be a bit boring, not too creative, and I hope to see how you can make them more expressive.”One design was rejected because it used graphic elements.I followed his feedback and made several rounds of revisions, and finally managed to meet his expectations.
Week 3:
General Feedback:
This week, we learned how to create simple animations for our word designs using Photoshop. The teacher explained how to use frame-by-frame animation and reminded us to save the files as the GIF format.
Specific Feedback:
I started to digitize my sketches in Illustrator. Since I was not very familiar with the software, the process was quite slow and a bit difficult for me. But after finishing it, I sent my work to Mr. Max, and it got approved on the first try, which made me really happy.
Week 4:
General Feedback:
We were introduced to Adobe InDesign.Mr. Max explained how to create layouts and align text properly, as well as how to adjust kerning, leading, and paragraph spacing to improve readability and balance.
We were introduced to Adobe InDesign.Mr. Max explained how to create layouts and align text properly, as well as how to adjust kerning, leading, and paragraph spacing to improve readability and balance.
Specific Feedback:
My chosen word for animation is “DISAPPEAR” .I made two versions of the animation using frame-by-frame technique and sent them to Mr. Max for feedback. He helped me choose the better one.Week 5:
General Feedback:This week focused on finishing Task 1 and completing the e-portfolio. The teacher checked everyone’s layout and gave final comments.
Specific Feedback:
Mr. Max selected one design out of my eight layouts but suggested that I adjust the size of the inserted image. After making the changes, my work was approved.
Through this project, I realized that typography is not just about making words look beautiful, but also about clear communication and accurate expression. Every design decision—from spacing and alignment to font choice—affects how people read and understand information.
At first, it was difficult for me because I was used to thinking in images. My early ideas often included graphic elements instead of focusing on the type itself. Mr. Max’s feedback helped me a lot. He reminded me to express meaning through the letters alone. After that, I started to experiment more—modifying sketches, adjusting shapes, and refining my designs until they met the goal. By studying many examples and practicing repeatedly, I gradually learned how to express action and emotion through typography without relying on graphics. Through designing Fall, Bloom, Bend, Disappear, Focus, and Swipe, I learned what makes a good type design and how to communicate ideas while keeping readability.
By using Illustrator and Photoshop, I also improved my technical skills. I learned how to use many new tools and became faster in completing my work. InDesign was a completely new software for me. Through this exercise, I discovered how even small adjustments in leading, alignment, or font weight can strongly affect the overall look of a layout.
5. Reflection
ExperienceThrough this project, I realized that typography is not just about making words look beautiful, but also about clear communication and accurate expression. Every design decision—from spacing and alignment to font choice—affects how people read and understand information.
At first, it was difficult for me because I was used to thinking in images. My early ideas often included graphic elements instead of focusing on the type itself. Mr. Max’s feedback helped me a lot. He reminded me to express meaning through the letters alone. After that, I started to experiment more—modifying sketches, adjusting shapes, and refining my designs until they met the goal. By studying many examples and practicing repeatedly, I gradually learned how to express action and emotion through typography without relying on graphics. Through designing Fall, Bloom, Bend, Disappear, Focus, and Swipe, I learned what makes a good type design and how to communicate ideas while keeping readability.
By using Illustrator and Photoshop, I also improved my technical skills. I learned how to use many new tools and became faster in completing my work. InDesign was a completely new software for me. Through this exercise, I discovered how even small adjustments in leading, alignment, or font weight can strongly affect the overall look of a layout.
Observations
During the process, I noticed that mistakes often taught me the most valuable lessons. When setting up paragraph styles, I accidentally changed “Space After” from “Auto” to “1/8 em,” which made my text unable to justify properly. After carefully checking each setting, I found and solved the problem. I also faced another issue where baseline grids did not appear, and later realized that they cannot be seen in Preview Mode. Switching back to Normal Mode fixed it.
Although these problems cost me extra time, they trained me to stay patient and detail-oriented. I became more confident in solving issues on my own. I realized that attention to detail is not optional in typography—it is what makes a design professional and refined.
Findings
Overall, this project taught me patience, precision, and the importance of observation. Typography requires not only creativity but also discipline and structure. I learned that even the smallest design choices reflect the designer’s mindset and responsibility.
After completing this task, I found myself more observant of typography in my surroundings—signs, books, posters, and websites. I now pay attention to typefaces, spacing, and visual rhythm in everything I see. I realized that good typography is both art and function—it must communicate first, and then express beauty through clarity.
In the future, I hope to continue studying typography deeply, explore more design works, read professional books, and create type designs that combine readability with creativity.
6. Further Reading
The Vignelli Canon — Reading Notes
1. Structure of the BookMassimo Vignelli’s The Vignelli Canon is divided into two parts — "Part One: The Intangibles" and "Part Two: The Tangibles".
The first part explores the philosophy and ethics of design, focusing on meaning, discipline, intellectual elegance, and responsibility.The second part transforms these abstract ideas into practical applications, discussing paper choice, typography, grid systems, color, and white space.
“Semantics, for me, is the search of the meaning of whatever we have to design.”
“Design is a discipline, a creative process with its own rules.”Vignelli does not separate theory from practice — design thinking and design making are one continuous act of responsibility and refinement.
“Design is a discipline, a creative process with its own rules.”Vignelli does not separate theory from practice — design thinking and design making are one continuous act of responsibility and refinement.
2. New Terminology and Core Ideas
Through this book, I learned several essential terms that define Vignelli’s design philosophy: semantics, syntax, appropriateness, ambiguity, intellectual elegance, white space, and identity & diversity.Semantics:the search for meaning in everything we design.
Syntax:the grammar and discipline that ensure structural clarity.
Appropriateness:choosing the right media, scale, material, and color.
Ambiguity:a positive plurality of meanings that enrich design.
Intellectual Elegance:the fusion of visual strength and moral integrity.
White Space:the “silence” that gives form to the composition.
Identity & Diversity:unity with variation, the harmony of consistency and difference.
As Vignelli said, “Visual strength is an expression of intellectual elegance and should never be confused with just visual impact.”
3. Design Principles and Conventional Rules
Vignelli articulates a precise and timeless system of design rules — the grammar of good design.
He emphasizes that the choice of paper, proportion of grids, and use of typography should all reflect appropriateness and ethical awareness.
Designers should choose materials that fit the message: “100% cotton paper for stationary,” and different textures and weights for books depending on their content.
“The grid is a useful tool rather than a constricting device,” representing discipline and flexibility.
Typography should serve clarity, not decoration. “It is not the type but what you do with it that counts.”
Flush left is preferred for readability, centered alignment is suitable for invitations or ceremonial texts, and justified alignment is used only for textbooks.
Vignelli also provides specific type size ratios: “8 on 9, 9 on 10, 10 on 11 pt for columns up to 70 mm; 12 on 13, 14 on 16 for columns up to 140 mm.”
He values consistency in typography and prefers to limit the number of type sizes on a page.
“Most of the time we use color as a Signifier or an Identifier,” he writes, often choosing a primary palette of red, blue, and yellow for their timelessness.
White space, in his words, “is what makes the black sing.” It is the rhythm, silence, and architecture of calm in typography.
4.Reflections on Part One: The Intangibles
“Design without semantics is shallow and meaningless.”“Intellectual elegance is our civic consciousness, our social responsibility.”
“We are definitively against any fashion of design and any design fashion.”
“A responsible solution. A real Corporate Identity is based on an overall system approach, not just a logo.”
These statements shaped my understanding of design as an ethical practice rather than a matter of style.
Semantics is not optional — it is the foundation of authenticity.
Vignelli’s emphasis on timelessness and responsibility made me realize that to design without meaning is to decorate emptiness.
His concept of “intellectual elegance” inspired me to value restraint, precision, and moral clarity in design decisions.
In my typography work, I will seek meaning before form, design systems rather than visuals, and use type and grids as carriers of ideas rather than ornaments.
5.Reflections on Part Two: The Tangibles
“It is really the white that makes the black sing.”“If you see the layout, it is probably a bad layout.”
“White space provides the silence.”
“In a world where everybody screams, silence is noticeable.”
“I love systems and despise happenstance.”
These words changed how I perceive composition.
I realized that form is not about filling space, but shaping emptiness.
White space, proportion, and silence are what give design rhythm and life.
“The best compositions are invisible,” Vignelli says — they disappear into clarity.
His love for systems made me understand that structure creates freedom.
In future typography experiments, I want to use white space as an expressive medium, let grids structure thought, value calmness as visual strength, and design layouts that speak softly yet clearly.
6.My New Understanding of Design
After reading The Vignelli Canon, I no longer see different design disciplines as separate worlds.They share one universal language: order, clarity, and meaning.“We are for a Design that lasts, that responds to people’s needs and to people’s wants.”
To Vignelli, design is both ethical and timeless — a responsibility to humanity, not a trend.Good design is not about novelty, but about necessity, precision, design is not improvisation; it’s an act of intellect and conscience;and permanence.I now understand that design is not improvisation; it’s an act of intellect and conscience.
(The Chinese PDF with my notes is attached below.)
Comments
Post a Comment