Learning Goal

Define type roles (display, h1–h6, body, caption, code) and set rhythm (line-height, spacing, max line length) to build hierarchy and convey voice.

Who

This lesson is for designers who want to understand the importance of typography in creating a clear visual hierarchy and conveying their brand's voice.

What

You will learn how to define type roles, set rhythm, and tie it to the Visual Intent (tone, formality, density).

Where

This lesson is part of the Playbook 2026 – Masterclass for Designers, and is designed to be completed in 30 minutes.

When

You can start this lesson at any time, but it is recommended to complete it within the next 30 minutes.

Why it matters

Typography builds hierarchy and conveys voice and trust. Line length and rhythm drive readability.

How

To build the type system, follow these steps:

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.

Guided Exercise (10–15 minutes)

Build the type matrix: role, size, line-height, weight, letter-spacing.

Set max line length (60–75 chars) and heading spacing.

Bind to the VIS (formal → tighter spacing/heavier weight; friendly → lighter/airier).

Independent Exercise (5–10 minutes)

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

Self-Check

Define type roles.
Set line length and line-height.
Tie voice to VIS.
Document good/bad examples.

Optional Deepening

Better Web Type: https://betterwebtype.com/articles/

Material 3 Type roles: https://m3.material.io/styles/typography/overview

Typography as Hierarchy and Voice