Baseline Grid Typography

Typographic baseline grid

A baseline grid is just a set of evenly-spaced horizontal lines, with the spacing set to match the body line-height: baseline = font-size × line-height. A 16px body on a 1.5 line-height steps the grid every 24px. Snap every text element to those lines and the “swimming” effect disappears, the one you get when columns drift out of vertical sync.

The idea grew out of book design, and Robert Bringhurst wrote it down in The Elements of Typographic Style. Adobe InDesign gives you the baseline grid through its Align to Baseline Grid button. On the web you can rebuild the same thing with display: grid and grid-template-rows: repeat(auto-fill, 24px), or lean on the line-height: calc(var(--baseline) / var(--font-size)) trick.

Applications

It pays off in editorial layouts, multi-column long-form articles, PDF reports and dashboards full of side-by-side cards. Each paragraph, heading and image lines up at the same height across columns, so the page reads calmly and looks like it was set by a real typesetter.

FAQ

What baseline value should I use? Take the body line-height in pixels as your starting point, often 24px for 16/1.5 or 28px for 16/1.75. From there, keep every other line-height in the design a multiple of that number.

Do headings need to fit the grid? They do. Round each heading's line-height to the nearest multiple of the baseline, so an h1 at 32/40 sits across two grid units of 20px. That's what keeps the rhythm steady even as the type sizes change.

Is it still useful on the web? Very much so. Between CSS Grid and custom properties, baseline grids are easier to pull off than they've ever been, and tools like Gridlover and Modularscale spit out ready-to-paste CSS that snaps the text into place.