Baseline Grid

A horizontal grid that aligns the bottom of every line of text to a consistent rhythm, keeping vertical spacing even across a layout.

Why it matters

It is why polished layouts feel calm even when nobody can say why: text across columns sits on the same invisible rhythm, so the eye never registers a stumble. Break it and a page reads as untidy without a single element being identifiably wrong.

See it

Two columns, one rhythm — every line sits on the same invisible rails.

The numbers

4px or 8px — the usual baseline increments
Line heights in multiples — that is what keeps columns in step

Related terms

Line Height
Spacing Scale
Design Token
Responsive Design
Assets

Ask your assistant

Define "Baseline Grid" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.