Swiss · Bauhaus · The Baseline Grid

How type
reads.

Type is most of what a user actually reads. These are the levers that turn a wall of text into something legible and ordered — measure, scale, leading, and the vertical rhythm that holds a page together. Toggle each demo to see it.

01

Vertical Rhythm

Set every line and space to a consistent baseline interval, and the page feels even instead of lumpy.

A steady cadence

When line-height and spacing are multiples of one base unit, text settles onto a shared rhythm.

The eye stops noticing the spacing and just reads.

Rhythm, felt
02

Measure

Line length governs reading comfort. Too short and the eye jumps; too long and it loses the return. Aim for roughly 45–75 characters.

A comfortable line length lets you move from one line to the next without losing your place or rereading. Too short and the eye keeps jumping back; too long and it struggles to find the start of the next line.

~66 characters · ideal
03

Scale & Hierarchy

Sizes drawn from one ratio create harmony and instant hierarchy. Flatten them and everything competes for the same attention.

Designing the reading experience
A modular scale brings order
Each step relates to the next by a fixed ratio, so headings, body and captions feel like one family rather than arbitrary sizes.
Caption · supporting detail
Flat — no hierarchy
04

Leading

Line spacing decides whether body text is comfortable or cramped. Cramped lines blur together; over-spaced ones break into stripes.

Leading is the space between lines of type. Set it well and paragraphs read as a single, continuous flow; set it poorly and the reader works to keep their place. For body copy on screen, somewhere around 1.5 to 1.6 tends to feel right.

line-height 1.6 · comfortable
05

The Grid

A shared column structure aligns every element and saves you re-deciding spacing on every screen.

Aligned, invisibly