Amanoba Logo
Back to Course

Typography as Hierarchy and Voice

Day 7 of 30 · The Playbook 2026 – Masterclass for Designers

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