Typography-Project 1:Typrgraphic Exploration & Communication

 Typography-Project 1: Typrgraphic Exploration & Communication

GCD62704

25/05/2026 - 1/06/2026 | Week 5-Week 6

WANG ZIJIA /0393824

Typography/Bachelor of Design in Creative Media/Taylor's University

Table of Contents:

1.Lectures

2.Instruction

3.Exercise

4.Feedback

5.Reflections

1.Lectures

Week 5:

Today’s lecture was all about seeing type beyond the surface — breaking down the little details that make fonts feel alive, balanced, and full of character. Here’s what stuck with me:

The "not-so-symmetrical" uppercase "A"

We started with the Baskerville uppercase "A". At first glance, it looks perfectly symmetrical, but it’s actually full of subtle, intentional adjustments. The left stroke is thinner than the right, and each bracket connecting the serif to the stem has its own unique arc. These are optical tricks to make the letter feel balanced to our eyes, even if it’s not mathematically equal.

Fig.1.1 Baskerville "A" — Optical Asymmetry & Unique Brackets

Univers vs Baskerville: The hidden stroke weight difference

Next, we looked at the Univers "A" and compared it to the Baskerville example. Just like the Baskerville version, the Univers "A" isn’t perfectly symmetrical either. The left slope is slightly thinner than the right stroke. These tiny variations aren’t mistakes — they’re carefully crafted choices to give the typeface its unique feel and visual harmony.

Fig.1.2 Univers "A" — Hidden Stroke Weight Contrast

Helvetica vs Univers lowercase "a": Tiny differences, huge character

We then moved to lowercase letters, comparing the "a" from Helvetica and Univers. They look similar at first, but side-by-side (and even overlayed), the differences are clear:

• * Helvetica’s "a" has a softer, more organic curve on the bowl, plus a small tail at the bottom.
• * Univers’s "a" has a more utilitarian, straight connection, with no tail.
• 
• Fig.1.3 Helvetica vs Univers Lowercase "a" — Side-by-Side Comparison
  

  

  Fig.1.4 Helvetica vs Univers "a" — Overlay Shape Comparison
• 
  
• x-height and optical overshoot
• The next lesson was about x-height and "overshoot". Curved letters like "a", "o", and "s" don’t stop exactly at the baseline or median line — they slightly overshoot them. In the word razors, you can see how the rounded parts extend just beyond the guide lines. This is a trick to make curved letters look the same size as straight-edged ones, keeping the word balanced.
  
  
• 

Fig.1.5 "razors"— x-height & Optical Overshoot

Fig.1.6 "raz" — Close-up of "a" Overshoot

• 
  
• Counterforms: The negative spaces that make type readable

We talked about counterforms — the negative spaces inside and around letters. The hole in an "E", the gap in an "R", and the spaces between letters in scream are all just as important as the black letter shapes. If the spaces are off, the word becomes hard to read. Good typography balances both positive and negative shapes.

Fig.1.7 Counterforms — Negative Space in Type Design

Breaking down letters: When parts lose their identity

Zooming into "s" and "g" showed us how different letters hold their identity when split apart. The "s" stays recognizable even when enlarged, but the "g" loses its form when you only look at a single curve. This shows how some letters rely more on their whole structure to be read.

Fig.1.8 "s" vs "g" — Form Identity in Detail

Using contrast to make type dynamic

The last part covered contrast in typography, based on Rudi Ruegg’s framework. Examples include:

• *Light vs Bold
• *Condensed vs Extended
• *Serif vs Sans-serif
• *Organic vs Machined
• *Positive vs Negative space
• *Small vs Large

The Helvetica Bold vs Baskerville "A" comparison showed how contrast creates completely different moods and hierarchies.

Fig.1.9 Helvetica Bold vs Baskerville — Type Contrast Example

Fig.1.10 Typography Contrast Framework (Rudi Ruegg)

2.Instruction

3.Exercise

From all three types of the texts,I choose the first one---"Bauhaus: The Movement That Changed Design". At first, I chose to understand the meaning of the text,including the title.

For the text I have chosen, it explains the Bauhaus movement and how it transformed modern design. The text mentions that Bauhaus emphasized simplicity, functionality, and geometric design, rather than complex decoratiye styles. At the same time, it also explains how Bauhaus combined art, craftsmanship, and technology, and how it influenced various fields such as architecture, typography, furniture, and graphic design. Although the Bauhaus school did not exist for a long time, its modern design concepts still deeply influence contemporary design to this day.

However, I believe that what is even more important is to understand what the Bauhaus design style is:Bauhaus graphic design style focuses on simplicity, functionality, and geometric composition. Designers often use clean lines, basic shapes, strong typography, and minimal decoration to create clear and modern layouts. 

e.g.

Fig.3.1 Examples about Bauhaus Design Style

(source: https://www.xiaohongshu.com/discovery/item/69f34af80000000023015495?source=webshare&xhsshare=pc_web&xsec_token=ABIyvf8NU82aaXL3AJJCAObccT99lErUGtt6hMd_IAo68=&xsec_source=pc_share)

Design 1：

Fig.3.2 First type of design without grid

Fig.3.3 First type of design with grid

PDF:

This design was inspired by the Bauhaus movement and its influence on modern design. When developing the design, I wanted to explore not only the visual style of Bauhaus but also the ideas behind it, such as simplicity, functionality, structure, and experimentation.

The overall layout combines typography and geometric forms to create a clear visual system. For the cover design, I experimented with the title by breaking it into different parts and arranging the words in an unconventional way. The central "TH" structure was developed from the repeated letters found in the title The Movement That Changed Design. This element became the visual backbone of the composition and helped connect different parts of the title while creating a sense of movement and transformation.

Simple geometric shapes such as circles and rectangles were added to reference the visual language commonly associated with Bauhaus design. These shapes are not only decorative elements but also help create balance, structure, and rhythm throughout the layout.

For the inside pages, I adopted a more organised grid-based layout to improve readability and reflect the functional approach of Bauhaus design. The use of a sans-serif typeface, strong alignment, and generous white space creates a clean and modern reading experience. While the cover is more experimental and expressive, the interior pages focus on clarity and communication, reflecting the balance between creativity and functionality that Bauhaus designers valued.

HEAD

Font/s: Gill Sans MT Regular

Type Size/s: 59.93 pt – 362.5 pt

Leading: Auto

Paragraph spacing: 0 pt

BODY

Font/s: Gill Sans MT Regular

Type Size/s: 12 pt

Leading: 14 pt

Paragraph spacing: 8 mm

Characters per-line: 35–45

Alignment: Left-aligned

Page Margins

Top: 15 mm

Left: 15 mm

Right: 15 mm

Bottom: 15 mm

Columns: 2

Gutter: 6 mm

Design 2：

Fig.3.4 Second type of design without grid

Fig.3.5 Second type of design with grid

PDF:

This design was inspired by the Bauhaus movement and its influence on modern design. When developing the design, I wanted to explore not only the visual style of Bauhaus but also the ideas behind it, such as simplicity, functionality, structure, and experimentation.

The overall layout combines typography and geometric forms to create a clear visual system. For the cover design, I experimented with the title by breaking it into different parts and arranging the words in an unconventional way. The central "TH" structure was developed from the repeated letters found in the title The Movement That Changed Design. This element became the visual backbone of the composition and helped connect different parts of the title while creating a sense of movement and transformation.

Simple geometric shapes such as circles and rectangles were added to reference the visual language commonly associated with Bauhaus design. These shapes are not only decorative elements but also help create balance, structure, and rhythm throughout the layout. 

For the inside pages, I adopted a more organised grid-based layout to improve readability and reflect the functional approach of Bauhaus design. The use of a sans-serif typeface, strong alignment, and generous white space creates a clean and modern reading experience. While the cover is more experimental and expressive, the interior pages focus on clarity and communication, reflecting the balance between creativity and functionality that Bauhaus designers valued.

HEAD
Font/s: Gill Sans MT Regular
Type Size/s: 35 pt, 145.25 pt, 146.41 pt
Leading: 42 pt, 174.3 pt, 175.66 pt
Paragraph spacing: 0 pt

BODY
Font/s: Gill Sans MT Regular
Type Size/s: 12 pt
Leading: 14 pt
Paragraph spacing: 8 mm
Characters per-line: 35–45
Alignment: Left-aligned

Page Margins
Top: 15 mm
Left: 15 mm
Right: 15 mm
Bottom: 15 mm
Columns: 2
Gutter: 6 mm

4.Feedback

Week 6 :

This week I focused on creating Bauhaus-inspired layouts. I experimented with different typography arrangements and geometric shapes, which helped me better understand composition and visual hierarchy.

5.Reflections

Experience

In this project, I created two different Bauhaus-inspired layouts using typography and simple geometric shapes. I experimented with different ways of arranging text, changing scale, rotation, and composition to create visual interest while still keeping the design connected to the Bauhaus style.

Observations

While working on the layouts, I noticed how strongly typography can influence the overall design. Small changes in size, position, and spacing could completely change the balance of the composition. I also found that Bauhaus design relies heavily on simplicity, contrast, and structure rather than decorative elements.

Findings

Through this project, I gained a better understanding of hierarchy, layout design, and typographic composition. I learned how to use text not only for communication but also as a visual element. This exercise helped me appreciate the principles of Bauhaus design and improved my confidence in creating experimental yet organized layouts.