Typography
Baseline Grid
A baseline grid is a set of evenly spaced, invisible horizontal lines that every line of text sits on, creating a tidy vertical rhythm across the screen.
Definition
A baseline grid lays down a set of invisible, evenly spaced horizontal lines across the whole screen and asks every line of text to sit right on top of them. Letters rest on their bottom edge, and that edge is called the baseline. When you set line heights to multiples of one base step — say 4px or 8px — the lines of text in different columns and cards all land on the same horizontal guides. It's a lot like notes lining up neatly on the staff lines of sheet music. The idea comes from print layout, so it's tricky to follow strictly on screen, but it's a huge help for creating a tidy vertical rhythm.
Why does it matter?
When several blocks of text sit side by side and each block's lines land wherever they please, they drift slightly out of sync and the whole thing feels messy. Follow a baseline grid and the lines across your columns and cards align to the same guides, so an invisible rule quietly holds the entire screen together. When the vertical rhythm lines up like this, users sense that the layout is orderly and trustworthy even if they can't put their finger on why. Mix in random line spacing instead and each element may look fine on its own, yet the page feels restless when you take it in as a whole. Only when spacing and line height share one base grid does the screen start to read like a single, coherent system.
Common mistakes
- Setting line height and spacing from different bases. If your spacing steps in multiples of 8 but your line heights are all over the place, the two rhythms clash and the grid falls apart. Text and spacing need to share the same base grid for vertical alignment to hold up.
- Trying to nail everything to the exact pixel from the start, then burning out and giving up. On screen there are so many elements that keeping a strict grid 100% of the time is unrealistic. Aiming to get the overall flow right beats chasing perfection.
- Picking grid steps with no basis at all. Build the grid on awkward values like 5px or 7px and they won't mesh cleanly with your spacing or icon sizes, which actually makes alignment harder. Choose an easy-to-divide value like 4 or 8 as your base.
Practical tips
- If a strict grid feels like too much, just standardizing line heights to multiples of 8 already tidies up the vertical rhythm noticeably. Rather than matching print-level precision, setting one base grid and mostly sticking to it goes a long way.
- Pick a single base step and let both spacing and line height share that value. When text and spacing use the same multiple, vertical alignment falls into place naturally and the screen looks far more put together. It's best to decide this base value once as a team and keep reusing it.
- For elements with tall line heights, like headings, snap them to span several rows of the base grid using multiples. Keeping big elements on the same grid means they don't drift out of step with body text and the vertical flow stays unbroken. Have image and icon heights follow the same base too, and the whole screen's rhythm feels that much more solid.