Typography - Task 2: Typographic Exploration and Communication
Typography - Task 2: Typographic Exploration and Communication
27/10/2025 - 07/11/2025 (Week 6-Week 7)
Zhao Jie,0387076
Typography
Task 2: Typographic Exploration and Communication
Table of Contents
1. Lecture
🔘Lecture 5 — Understanding1.Introduction
In this lecture, Mr. Vinod focused on understanding the details of letterforms. The video was quite short, but it covered important ideas such as how symmetry in letters is not what it seems, how counterforms affect readability, and why contrast is one of the most powerful tools in typography.
2.Uppercase Forms and Optical Symmetry
Mr. Vinod began by explaining that “uppercase letter forms suggest symmetry, but in fact they are not symmetrical.” He showed how the two different stroke weights in Baskerville make the letter “A” look balanced even though its left stroke is thinner.
The comparison between Baskerville and Univers shows how type designers carefully adjust strokes to keep letterforms visually harmonious.
3.Lowercase Forms and Subtle Differences
Mr. Vinod then emphasized the complexity of lowercase letters. He used the example of the letter “a” in Helvetica vs Univers to show how even two sans-serif typefaces differ a lot in the finishing of strokes and curves.The way the bowl meets the stem reveals “a palpable difference in character.”
Mr. Vinod reminded us that the x-height describes the size of lowercase letters, but curved strokes “must rise above the median (or sink below the baseline) to appear the same size.”
He used the word razors to show how the curved parts of the “a” and “s” break above or below the x-height to maintain optical consistency.
5.Understanding Form and Counterform
One of the most rewarding ways to understand the form and counter of a letter is to examine them in close detail.Mr. Vinod showed how studying the relationship between the black form and the white counterform helps us understand balance and character.He compared Helvetica Black and Baskerville to demonstrate this.
6.Contrast as a Graphic Design Principle
Mr. Vinod then moved to contrast and how it applies directly to typography.He said contrast is “the most powerful dynamic in design,” showing examples like small vs large, light vs bold, condensed vs extended, etc.
He followed with a grid of even more contrast pairs—light/bold, condensed/extended, serif/sans serif, negative/positive, etc.
7.Ending Quote
At the end of the lecture, Mr. Vinod showed a humorous but meaningful quote:
“On the streets, you look at girls (or boys). I look at type.”
This was a reminder that once we start learning typography, we begin to notice type everywhere.
🔘Lecture 6 — Screen&Print
1. Typography in Different Medium
Typography behaves differently depending on the medium in which it appears. In the lecture, we were shown examples of how type can look expressive, bold, minimal, or functional depending on the design intention and medium.
The posters show two very different uses of type: One is highly expressive and full of contrast；The other uses modern, bold, sans-serif text to communicate a strong message: “If you can design one thing, you can design everything.”
This demonstrates how typography can convey tone, energy, and hierarchy even without images.
2. Typography in Digital Interfaces
Typography becomes part of navigation and user experience in digital interfaces. On websites, type has to work with motion, layout, and interactivity.
This example highlights how a single oversized letter interacts with the grid, images, and buttons. Type here is not only text—it becomes a graphic and a navigational element.
3. Print Type vs Screen Type
Printed type and screen type have different requirements. Printed books use serif fonts, tighter spacing, and long-form readability.
In print, designers can control light, ink density, paper texture, and reading distance. On screen, however, typography depends on pixels, resolution, and device type.
4. Pixel Differential Between Devices
Different screens display typography differently because of pixel density (PPI). Higher PPI allows smoother curves and weaker visible jagged edges.
For example:
5. How Type Appears on Different Screens
Typography must adapt to screen size, distance, and user context.
Small screens require:
- Larger x-height
- Simpler letterforms
- Strong contrast
- Clear hierarchy
6. Static vs Motion Typography
Typography for printed brochures is static and controlled, while typography for films or interactive media must respond to time and motion.
Motion type also uses timing, rhythm, and animation to communicate meaning—something print cannot do.
7. Large-Scale Typography (Billboards)
Billboards require ultra-simple, high-contrast typography because they are read from far away, often by moving viewers.
This shows that less text = stronger impact.
8. Quote by Oliver Reichenstein
The lecture ends with a quote that reshapes the way we think about typography:
“A great designer knows how to work with text not just as content; he treats text as a user interface.”
— Oliver Reichenstein
This means typography is not decoration—it is a tool for navigation, interaction, and meaning.
2. Instructions
3. Process Work
1. Preparation Work
For Task 2, we were required to choose one out of three given texts to create a layout. I selected the Bauhaus text, so the first thing I did was to understand what defines Bauhaus-style design.
During my research, I learned that the Bauhaus was a German design school founded in 1919, and it had a major influence on the development of modern design. It emphasized functionality, simplicity, and the use of clean geometric forms. The key idea behind the Bauhaus movement was to merge art, technology, and craftsmanship—an approach that later shaped architecture, typography, and graphic design. Visually, Bauhaus design is bold, structured, and minimal.
I explored many references that featured strong geometric shapes and simple compositions. These examples helped me better understand how contemporary designers interpret Bauhaus principles and translate them into modern layouts.
 |
| Bauhaus-style design |
 |
| Bauhaus-style design |
2. Sketches
After gathering references, I started developing layout ideas using the geometric forms commonly associated with Bauhaus—circles, triangles, rectangles, and straight lines. I created four rough sketches in Procreate, experimenting with different combinations of shapes and various layout treatments.
While sketching, I paid special attention to the use of white space. This was something I learned from Task 1: white space helps improve readability, adds breathing room around the text, and creates a cleaner, more organized visual structure. It also allows the main elements to stand out more clearly. I hoped that my sketches successfully conveyed this sense of openness and clarity.
Next, Mr. Max selected three of my sketches (the 1st, 2nd, and 4th) for digitization. I then recreated them in Adobe Illustrator and made several adjustments based on his feedback. For each layout, I produced two revised versions. The adjustments included repositioning the title within the layout, changing the scale and arrangement of the geometric shapes, improving the text alignment, and refining the overall balance and unity of the composition.
 |
| Bauhaus design#1 |
 |
| Bauhaus design#2 |
 |
| Bauhaus design#3 |
HEAD
- Font/s: Gill Sans Std-Bold
- Type Size/s: 200pt
- Leading: 200pt
- Paragraph spacing:0pt
BODY
- Font/s: Serifa Std-45 Light
- Type Size/s: 23pt
- Leading: 23pt
- Paragraph spacing: 24px
- Characters per-line: 41
- Alignment:Justify with Last Line Aligned Left
Page Margins
- top + left + right + bottom:36px
- Columns: 1
- Gutter:14px
4. Feedback
Week 6:
Week 7:
General Feedback:5. Reflection
ExperienceThroughout Task 2, I went through the full process—from researching the Bauhaus style, sketching ideas, digitizing my selected designs, to building the final layout in InDesign. In the beginning, my focus was mainly on how to express the Bauhaus style using simple geometric shapes. After showing my sketches to Mr. Max, he approved three of them and asked me to digitize those versions. During the digitization stage, I kept experimenting with different proportions, alignments, and placements of shapes, and I refined the designs based on Mr. Max’s suggestions. Eventually, he selected my Design 2 as the final direction. I then adjusted the amount of white space to make the visual rhythm clearer and more balanced.
Observations
During this process, I realized that although Bauhaus design looks minimal, it is actually not easy to design. Small adjustments in alignment, shape proportions, or spacing can significantly affect the balance of the layout. I also learned that good white space doesn’t mean “empty”—it helps emphasize the content and improves the overall sense of balance. When I added small rectangles near the subheadline and in the bottom-right corner to echo the headline shapes, the layout became more unified and rhythmic.
Another thing I noticed is that some issues are not visible in sketches but become obvious during digitization. If the sketch size doesn’t match the actual InDesign page size, it can create a lot of unnecessary extra work.
6. Further Reading
Typography Basics — Reading Notes
After reading Typography Basics, I feel like it helped me organize and clarify everything I previously learned in class. I already knew some of the content, but I never understood it as clearly or as systematically as I do now.
The book starts by explaining different type categories, and it emphasizes that even though you can use many fonts, it’s usually better to stick to one or two font families to keep the design clean. I used to think that using more fonts would make a layout look more “interesting,” but now I realize that too many typefaces can easily make the page look messy.
The explanations about x-height, ascenders, descenders, and other basic typography terms were also very detailed. I had heard these terms in class before, but the book provided so many comparisons across different typefaces that it made everything much clearer for me.
The book also talks more deeply about kerning, tracking, and spacing. Even a tiny adjustment can make reading smoother. It keeps reminding the reader that “readability comes first,” which is also something Mr. Max always emphasizes in class. I feel like this is the most important point for beginners—and also the easiest one to forget. At least for me😢 ,because I always want my design to look more unique, but sometimes that makes my layout less readable.
In the chapter on leading, the book explains how things like typeface, line length, and type size affect how much leading is needed. Especially when the line length gets longer, more leading is necessary to help the eye read comfortably.
The later sections about paragraph alignment, spacing before and after paragraphs, widows and orphans, and hyphenation were also really clear. These are things we often run into when doing assignments, and reading the explanations made me understand them much better.
The final part about paragraph styles and character styles in Adobe software was super practical. I used to think styles were optional, but now I realize they save so much time and keep layouts consistent. The comparison between Illustrator, Photoshop, and InDesign also helped me understand more clearly how each tool should be used.
Overall, this book was easy to read, and it helped me build a stronger understanding of many typography basics. It also made me feel more confident about the upcoming typography tasks.
Comments
Post a Comment