Vertical Rhythm Typography

Vertical Rhythm in Typography

Vertical rhythm means keeping the spacing between elements consistent. You get there by snapping every block on the page (paragraphs, headings, images, margins, padding) to multiples of a baseline that comes from the body line-height. The baseline is computed as baseline = font-size × line-height. So a 16 px body with line-height 1.5 gives you a 24 px baseline, and from there every vertical measurement should land on a multiple of 24 (24, 48, 72, 96…).

Robert Bringhurst made the idea well known in The Elements of Typographic Style, and Richard Rutter brought it to the web with “Compose to a Vertical Rhythm” (24ways 2006). Brent Jackson’s Compose tool put it into code in 2014. Tim Brown later pushed it toward modular scale typography. Google’s Material Design boiled the whole thing down to the 8 pt grid, where every margin, padding and component height is a multiple of 8 px, dropping to 4 px for fine-grained items.

Applications

You see it in editorial design (book interiors, long-form articles, magazines), in web design systems like Material, Carbon and Polaris, and in product UI, where steady spacing cuts visual noise and makes a page easier to scan. The same trick shows up in PDF reports, dashboards and marketing landing pages when the goal is a calm, professional look.

FAQ

Why does vertical rhythm matter? When spacing wanders, a page feels restless. Lining everything up to a baseline gives the eye predictable resting points, and reading flows more easily.

Should images snap to the baseline? When you can, yes. Resize the image or add padding so its height comes out to a multiple of the baseline. If that is not workable, push the leftover difference into the margin right after it.

4 pt or 8 pt grid? Material defaults to 8 pt. Drop to 4 pt for dense data tables and icons, where 8 pt would leave things looking too loose.