Typography as Hierarchy and Voice

Build the type system: roles, sizes, weights, line-height, line length, rhythm, voice.

---

Learning Goal

• Define type roles (display, h1–h6, body, caption, code).
• Set rhythm (line-height, spacing, max line length).
• Tie it to the Visual Intent (tone, formality, density).
• Document good/bad examples.
• Apply it to a screen.
• Make sure all lessons are consistent with this hierarchy.

---

Why This Matters

• Type builds hierarchy.
• It conveys voice and trust.
• Line length and rhythm drive readability.

---

Explanation

Roles

• Display/Hero (sparingly).
• H1–H6 (structure, 1.2–1.4 line-height).
• Body (14–16px, 1.5–1.7 line-height, 60–75 chars line length).
• Caption/Label (12–13px, stronger contrast).
• Code/Mono (fixed width, shorter line length).

Voice

• Weight: how bold?
• Shape: rounded vs angular.
• Spacing: airy vs dense.

---

Examples

Bad: Same size everywhere, no contrast.

Good: H1 32/40, H2 24/32, body 16/24, caption 12/16, max 70 chars, consistent margins.

---

Guided Exercise (10–15 minutes)

1. Build the type matrix: role, size, line-height, weight, letter-spacing.
2. Set max line length (60–75 chars) and heading spacing.
3. Bind to the VIS (formal → tighter spacing/heavier weight; friendly → lighter/airier).

Independent Exercise (5–10 minutes)

Apply to one screen (e.g., hero section), document good/bad comparison.

---

Self-Check

• Roles defined.
• Line length and line-height set.
• Voice tied to VIS.
• Good/bad examples documented.

---

Optional Deepening

• Better Web Type: https://betterwebtype.com/articles/
• Material 3 Type roles: https://m3.material.io/styles/typography/overview