Baseline Grid

A baseline grid is the horizontal rhythm engine that locks every line of text headings images and UI components to the same invisible ladder. Pick a base unit usually 8 pixels then set your body line height to a clean multiple of that unit. On a 16 pixel font that means 24 pixel line height. Every heading must land on the same grid so a 48 pixel H1 with 56 pixel leading still snaps perfectly to the underlying beat. The result is a page that feels musically consistent. The eye glides down without tiny vertical hiccups that destroy flow. This is the part of grid systems most teams treat as optional decoration when it is actually the element that makes interfaces feel expensive.

It is not just setting nice line heights in a stylesheet and calling it a day. It is not the column grid wearing different clothes. It is not something you eyeball in a design tool then leave the front end team to approximate. It is not the same as modular grids that control both axes or manuscript grids that only care about one fat column of text. Violate the math once and the whole composition starts to jitter. Two headings that should align now sit a few pixels off. A card that looked tight next to body copy now feels randomly placed. The user cannot name the problem but they feel the sloppiness immediately.

Concrete example sits right on Apples product pages in 2026. Open the MacBook Pro page. The massive headline sits on the grid. The subhead drops exactly three steps down. Body copy marches in 24 pixel increments. Even the photography containers lock their heights to multiples of 8 so nothing ever feels accidentally placed. Medium built its entire long form experience on the same principle which is why you can read 4000 word essays without once losing your place. Linear ships it across their product UI so the issue list the comment threads the sidebar metrics and the road map view all breathe at the same tempo. Stripe Press carries the exact rhythm from their printed books into their web reader. Figma applies it inside Slides so every deck thumbnail and every live slide shares one vertical language. Notion locks their document editor to it which turns your chaotic notes into something that reads like a finished book. The New York Times uses it on their long form magazine pieces where the baseline grid keeps the pull quotes and captions from ever feeling like visual noise.

Use a baseline grid on every type heavy surface where sustained reading or scanning is the job. Long form articles documentation heavy dashboards product marketing pages that want to feel premium and any UI where hierarchy must be felt instead of decoded. It shines in Linear where the issue tracker stays scannable even at 200 items. It works for Vercel because their changelog entries and pricing footnotes now sit in perfect alignment with the marketing copy above them. It is mandatory at Apple because their brand is built on perceived precision and the grid delivers it without needing to scream. Skip it only when the work is pure illustration or one off experimental landing pages that convert in under five seconds. Do not half implement it on mobile if you cannot maintain the multiples across breakpoints. A broken baseline grid where some text snaps and other text drifts creates worse visual noise than no grid at all. Teams that treat it as optional always ship products that feel almost there but never quite finished.

The baseline grid turns good typography into an invisible conductor that makes every element on the page play in tune.