Typography | Task 2: Typographic Exploration & Communications
19/05/25 – 02/06/25 (Week 5-Week 7)
Choong Yee Leng || 0381980
Typography || Bachelor Degree in Creative Media || Taylor’s University
Task 2: Typographic Exploration & Communications
TABLE OF CONTENTS
TABLE OF CONTENTS
Lectures
Week 5: Typo_5_Understanding
Letters/ Understanding letterformsAt first glance, uppercase letters suggest symmetry, but upon close inspection, notable differences emerge:-Each serif-bracket connecting the seraph (serif) to the stem features a unique arc. These arcs differ in curvature and stroke weight.-The diagonal stems show variations in thickness and ending arcs that prevent strict symmetry.
Figure 1.1.1 Baskerville
Despite appearing symmetrical, Universe shows:-The left stroke of an uppercase letter is thinner than the right stroke.-This counter-intuitive difference creates visual balance and avoids rigidity.
Figure 1.1.2 Univers
-In Helvetica, the finial arc tapers toward the stroke’s end, giving a distinctive tail.-In Universe, the finial arc tapers in the middle and flares toward the end, with the tail omitted.-simplicity and consistency in character traits across all letter forms are critical for successful font design.png)
Figure 1.1.3 Helvetica vs Univers
Letters/ Maintaining X-Height-Curved strokes (like in “s” or “o”) often extend slightly beyond the median line or baseline to appear optically equal in size to vertical and horizontal strokes.-This adjustment compensates for the natural appearance of curved shapes seeming smaller or less prominent compared to straight strokes with equal physical measurements..png)
Figure 1.1.4 x-height
Counterform-The counters in letters like “e,” “g,” and spaces between letters in words influence readability.-Managing counters well affects how “words hang together,” impacting legibility and eye movement across text..png)
Figure 1.1.5 counterform
Contrast-Contrast can be between stroke weight (bold vs light), size (large vs small), style (condensed vs extended), or other visual parameters.-Examples include contrasting Helvetica Bold with Baskerville to visually separate informational hierarchies.png)
Figure 1.1.6 Rudi Read’s diagram
Letters/ Understanding letterforms
At first glance, uppercase letters suggest symmetry, but upon close inspection, notable differences emerge:
-Each serif-bracket connecting the seraph (serif) to the stem features a unique arc. These arcs differ in curvature and stroke weight.
-The diagonal stems show variations in thickness and ending arcs that prevent strict symmetry.
Figure 1.1.1 Baskerville
Despite appearing symmetrical, Universe shows:
-The left stroke of an uppercase letter is thinner than the right stroke.
-This counter-intuitive difference creates visual balance and avoids rigidity.
Figure 1.1.2 Univers
-In Helvetica, the finial arc tapers toward the stroke’s end, giving a distinctive tail.
-In Universe, the finial arc tapers in the middle and flares toward the end, with the tail omitted.
-simplicity and consistency in character traits across all letter forms are critical for successful font design
.png)
Figure 1.1.3 Helvetica vs Univers
Letters/ Maintaining X-Height
-Curved strokes (like in “s” or “o”) often extend slightly beyond the median line or baseline to appear optically equal in size to vertical and horizontal strokes.
-This adjustment compensates for the natural appearance of curved shapes seeming smaller or less prominent compared to straight strokes with equal physical measurements.
.png)
Figure 1.1.4 x-height
Counterform
-The counters in letters like “e,” “g,” and spaces between letters in words influence readability.
-Managing counters well affects how “words hang together,” impacting legibility and eye movement across text.
.png)
Figure 1.1.5 counterform
Contrast
-Contrast can be between stroke weight (bold vs light), size (large vs small), style (condensed vs extended), or other visual parameters.
-Examples include contrasting Helvetica Bold with Baskerville to visually separate informational hierarchies
.png)
Figure 1.1.6 Rudi Read’s diagram
Week 6: Typo_6_Screen&Print
Different mediumTypography has evolved from being predominantly print-based to being a dynamic component across multiple platforms, especially in digital contexts such as screens (computers, phones, tablets), environmental design, animation, and interactive media. Despite the rise of screen-based communication, print remains relevant due to human tactile preferences.
Print vs. Screen TypographyPrint Typography
-Print typography was designed primarily for readability in physical form, with smooth text flow and aesthetic qualities long optimized by skilled typesetters.-Classic serif typefaces such as Caslon, Garamond, and Baskerville are preferred for print due to their elegance, intellectual feel, and readability at small sizes.-Sans-serif fonts are increasingly popular in modern branding and print design because of their clean, contemporary appearance, although some transformations (e.g., serif to sans-serif in logos) may not always resonate well with audiences.-Traditional print books maintain conventional typesetting methods that optimize legibility across extensive texts, balancing familiarity and efficiency.
Figure 1.2.1 print typography
Screen Typography
-Screen-specific typefaces are designed with features to enhance readability on digital displays, such as taller x-heights, wider letterforms, more openness, heavier strokes, and reduced contrast.-Historical limitations in screen resolution necessitated specialized fonts, though modern high-resolution displays have mitigated many earlier constraints.-Examples of screen-optimized fonts include Verdana, Georgia, and Tahoma. Usage of these fonts in print is sometimes criticized for misunderstanding medium-specific typeface purposes.-Open spacing, adjusted leading, and character shapes improve recognition on small displays such as mobile phones, e-readers, and web pages.-Hyperlinks, which are clickable text or images leading to other content, are a fundamental interactive feature unique to screen typography, enhancing navigation and user engagement online.
Pixel Differential Between Devices-Devices vary greatly in screen size, resolution, and pixel density, meaning the legibility and appearance of text differ substantially across smartphones, tablets, laptops, and large monitors or TVs.-Measurement units differ between print (points) and screen (pixels), further complicating font sizing decisions. Designers must consider viewing distances and screen characteristics when choosing font sizes for digital content..png)
Figure 1.2.2 pixel diagram
Static vs. Motion Typography
-Static typography, such as seen in print posters or billboards, conveys message through visual form without movement but can still express dynamic and emotional qualities through design.-Motion or kinetic typography incorporates animation and temporal elements, useful in films, title sequences, advertisements, and digital branding to create heightened engagement and expression.-Dynamic typography allows letterforms to become fluid and interact with soundtracks or pacing, enhancing the communicative impact beyond static print possibilities.
Figure 1.2.3 design example
Typography has evolved from being predominantly print-based to being a dynamic component across multiple platforms, especially in digital contexts such as screens (computers, phones, tablets), environmental design, animation, and interactive media. Despite the rise of screen-based communication, print remains relevant due to human tactile preferences.
Print vs. Screen Typography
Print Typography
-Print typography was designed primarily for readability in physical form, with smooth text flow and aesthetic qualities long optimized by skilled typesetters.
-Classic serif typefaces such as Caslon, Garamond, and Baskerville are preferred for print due to their elegance, intellectual feel, and readability at small sizes.
-Sans-serif fonts are increasingly popular in modern branding and print design because of their clean, contemporary appearance, although some transformations (e.g., serif to sans-serif in logos) may not always resonate well with audiences.
-Traditional print books maintain conventional typesetting methods that optimize legibility across extensive texts, balancing familiarity and efficiency.
Figure 1.2.1 print typography
Screen Typography
-Screen-specific typefaces are designed with features to enhance readability on digital displays, such as taller x-heights, wider letterforms, more openness, heavier strokes, and reduced contrast.
-Historical limitations in screen resolution necessitated specialized fonts, though modern high-resolution displays have mitigated many earlier constraints.
-Examples of screen-optimized fonts include Verdana, Georgia, and Tahoma. Usage of these fonts in print is sometimes criticized for misunderstanding medium-specific typeface purposes.
-Open spacing, adjusted leading, and character shapes improve recognition on small displays such as mobile phones, e-readers, and web pages.
-Hyperlinks, which are clickable text or images leading to other content, are a fundamental interactive feature unique to screen typography, enhancing navigation and user engagement online.
Pixel Differential Between Devices
-Devices vary greatly in screen size, resolution, and pixel density, meaning the legibility and appearance of text differ substantially across smartphones, tablets, laptops, and large monitors or TVs.
-Measurement units differ between print (points) and screen (pixels), further complicating font sizing decisions. Designers must consider viewing distances and screen characteristics when choosing font sizes for digital content.
.png)
Figure 1.2.2 pixel diagram
Static vs. Motion Typography
-Static typography, such as seen in print posters or billboards, conveys message through visual form without movement but can still express dynamic and emotional qualities through design.
-Motion or kinetic typography incorporates animation and temporal elements, useful in films, title sequences, advertisements, and digital branding to create heightened engagement and expression.
-Dynamic typography allows letterforms to become fluid and interact with soundtracks or pacing, enhancing the communicative impact beyond static print possibilities.
Figure 1.2.3 design example
Instructions
Process Work
Process Work
3.1 Research
I've going through 2 attempts, before and after the first consultation of task 2 from researching to conducting ideation.
Figure 3.1.1 First attempt research
Figure 3.1.3 Second attempt research
Following the first consultation, Mr. Max reiterated the importance of placing our references near the artboards in Illustrator to clarify how they were used.
Figure 3.1.3 screenshot in AI
3.2 Ideation
Figure 3.2.1 first attempt sketches
In my initial attempt, I focused primarily on incorporating collage elements and star motifs. However, the outcome fell short—only the headline received approval. For my second attempt, I researched layout designs that could better complement the approved headline. After completing the first three sketches based on it, I realized the headline still lacked visual impact. As a result, I decided to break away from the "collage zone" and explore a new creative direction.
Figure 3.2.2 Second attempt sketches
The final sketch was approved, with a few modifications made based on feedback.
Final 3.2.3 modification after second consultation
3.3 Final Outcome
PUNK's
Typeface: Gill Sans Ultra
Font/s: Bold Condensed
Type Size/s: 340pt
Leading: -
Paragraph spacing: -
Design Revolution:
Typeface: Gill Sans MT
Font/s:Condensed
Type Size/s: 68 pt
Leading: -
Paragraph spacing: -
Breaking
Typeface: Gill Sans Ultra
Font/s: Bold Condensed
Type Size/s: 88 pt
Leading: -
Paragraph spacing: -
the
Typeface: Gill Sans Ultra
Font/s: Bold Condensed
Type Size/s: 94 pt
Leading: -
Paragraph spacing: -
Rules
Typeface: Gill Sans Ultra
Font/s: Bold Condensed
Type Size/s: 76 pt
Leading: -
Paragraph spacing: -
Body
Typeface: Gill Sans MT
Font/s: Regular
Type Size/s: 22 pt
Leading: 22 pt
Paragraph space after: 22 pt
Characters per-line: 45~55 characters
Alignment: Left justified
Margins (px): 72 px top, 72 px bottom, 72 px inside, 72 px outside
Columns: 2
Gutter: 52 px
Figure 3.3.1 Final text formatting and expression layout (JPEG)
Figure 3.3.2 Final text formatting and expression layout with baseline grid (JPEG)
Figure 3.3.3 Final text formatting and expression layout (PDF)
Figure 3.3.4 Final text formatting and expression layout with baseline grid (PDF)
Feedback
Week 7:specific feedback: For Sketch 1, Mr. Max felt the design was too cluttered, making it difficult to understand the concept. In Sketch 2, the phrase “breaking the rules” appeared awkward on its own on the second page, and the word “design” was imbalanced— “de” was too small while “sign” was too large, making only “sign” clearly visible. In Sketch 3, the word “the” was split oddly, with the letter “t” placed in the same box as “breaking” and “he” in a separate box, which looked inconsistent. Sketch 4 successfully conveyed a collage vibe, but the uneven arrangement of the body text was disapproved. For Sketches 5 and 6, he pointed out that the body text was broken into small, uneven boxes, which was not acceptable. Overall, he mentioned that the headline “Punk’s” is suitable and can be used, but the layout as a whole need to be revised for better structure and clarity.
Week 6:general feedback: Mr. Max demonstrated how to approach Task 2 using Adobe Illustrator. For this task, we are allowed to modify the font and incorporate shapes into our layout design. He also advised us to place our reference materials next to the artboard for easier access and alignment.specific feedback:Mr. Max expressed a preference for the designs in Sketch 2 and Sketch 3. However, he rejected Sketch 1 due to the presence of a widow (a single word left alone on a line), which affects the visual balance of the composition.
Week 7:
specific feedback: For Sketch 1, Mr. Max felt the design was too cluttered, making it difficult to understand the concept. In Sketch 2, the phrase “breaking the rules” appeared awkward on its own on the second page, and the word “design” was imbalanced— “de” was too small while “sign” was too large, making only “sign” clearly visible. In Sketch 3, the word “the” was split oddly, with the letter “t” placed in the same box as “breaking” and “he” in a separate box, which looked inconsistent. Sketch 4 successfully conveyed a collage vibe, but the uneven arrangement of the body text was disapproved. For Sketches 5 and 6, he pointed out that the body text was broken into small, uneven boxes, which was not acceptable. Overall, he mentioned that the headline “Punk’s” is suitable and can be used, but the layout as a whole need to be revised for better structure and clarity.
Week 6:
general feedback: Mr. Max demonstrated how to approach Task 2 using Adobe Illustrator. For this task, we are allowed to modify the font and incorporate shapes into our layout design. He also advised us to place our reference materials next to the artboard for easier access and alignment.
specific feedback:
Mr. Max expressed a preference for the designs in Sketch 2 and Sketch 3. However, he rejected Sketch 1 due to the presence of a widow (a single word left alone on a line), which affects the visual balance of the composition.
Reflection
ExperienceIn previous tasks, my sketches usually got approved pretty quickly, so I honestly didn’t expect Task 2 to hit as hard as it did. This time, all of my initial sketches got rejected, and I had to redo everything from scratch. At first, it was really frustrating, but looking back, I’m glad it happened because it pushed me to learn and grow a lot more than I expected. For my first attempt, I leaned heavily into the collage concept, thinking it would create a strong visual identity across the sketches. But instead, all six designs ended up looking quite similar and a bit repetitive. That approach didn’t really work out the way I thought it would.
ObservationWhen Mr. Max gave his feedback, I started to see where things went wrong. Sketch 1 was too cluttered, which made the concept hard to understand. In Sketch 2, the phrase “breaking the rules” felt awkward just sitting alone on the second page, and the word “design” was visually off — “de” was way too small while “sign” was huge, so it just looked like “sign” was the only word there. Sketch 3 also had weird text placement — the word “the” was split up, with “t” stuck with “breaking” and “he” floating somewhere else, which looked confusing. Sketch 4 had a decent collage feel, but the body text wasn’t aligned properly and ended up looking messy. As for Sketches 5 and 6, the body text was broken into small, uneven boxes, and that just didn’t work at all in terms of readability. Mr. Max did mention that the headline “Punk’s” was strong and worth keeping, but overall, he felt like the layout needed a lot more structure and clarity.
FindingsAfter taking in all the feedback and reworking my designs, I came to a few important takeaways. First, I realized that a design isn’t just about how cool or artsy it looks — it needs to clearly communicate an idea. Just sticking with a collage style across everything didn’t help, especially when it started to feel repetitive and didn’t really support the content. I also learned how important it is to have one strong, eye-catching element in a layout — something that grabs attention right away — and then build the rest of the design around it. In my second attempt, I added a breaking effect and a black background to boost the contrast and make the key elements stand out more.
Another thing I learned is how sensitive type and layout choices can be. Splitting words weirdly or sizing text unevenly can totally change how it’s read — or make it unreadable. Most importantly, I realized that harsh feedback isn’t the end of the world. In fact, it really helped me step out of my comfort zone and push my ideas further. This whole redo process made me slow down, rethink my direction, and build a much more solid and intentional design.
Further Reading
Figure 6.1 Cover of 'Vignelli Canon on Design'
This is a concise yet profound book that outlines his core philosophy and principles of good design. Vignelli emphasizes clarity, simplicity, and timelessness as the foundation of effective design. He believes that design should be driven by intellect and purpose rather than trends or decoration.
According to him, every design decision must be intentional, functional, and appropriate to its context. The book stresses the importance of discipline, where designers are urged to avoid unnecessary visual clutter and instead focus on structure and communication. Typography, color, and grid systems are treated as essential tools that must be used with restraint and purpose to achieve harmony and coherence.
Vignelli advocates for the use of limited typefaces and color palettes to maintain consistency and strengthen the message. He also highlights the responsibility of designers to contribute positively to culture and society through thoughtful, honest design.
Figure 6.2 Page24 of 'Vignelli Canon on Design'
I really like this page because it shows how strong visual impact can be achieved through simple yet bold design. The large “Books” headline paired with smaller body text creates a powerful contrast, just as the text explains—using scale, bold type, and clarity to express content effectively. This concept helped me in my task by reminding me to play with scale and contrast to guide attention, and to keep the layout clean and purposeful. It taught me that visual strength doesn’t require decoration—just smart, intentional choices.
Comments
Post a Comment