How to Build a Baseline Grid and Keep Type On It
A separate guide on this site introduces the idea of a baseline grid — a repeating vertical rhythm every text block snaps to, so different-sized elements stay aligned across a page. Setting that unit once, at the start of a project, is the easy part. The harder, ongoing part is making sure every new heading, caption, image, or spacer you add over the life of a layout actually lands on it, rather than drifting quietly out of step as the piece evolves. This article works through a full multi-level example, using the baseline grid calculator to check each piece.
A four-level hierarchy, snapped in full
Take a small booklet or zine page with a 20px baseline unit — tighter than a typical body-text line height, chosen deliberately for a densely set format. Four elements, each with a different natural, unsnapped line height, run through the calculator: a caption at 15px snaps up to 20px (one unit). Body text at 26px also snaps to 20px, since 26 is closer to 20 than to 40. A subhead at 33px snaps up to 40px (two units). A headline at 50px snaps up to 60px (three units). Notice that the caption and the body text land on the exact same 20px snapped value despite having different natural line heights — the grid doesn't create a new size for every input, it groups nearby values onto the same shared rhythm step, which is precisely the point.
Images and spacers need to be on the grid too
It's easy to assume a baseline grid only governs text, but any block that occupies vertical space on the page — an image, a rule, a deliberate gap between sections — can throw off the rhythm just as easily as an unsnapped line height can. Say a photograph, cropped to its natural aspect ratio, comes out to 137px tall in your layout. Run that through the same calculator used for line heights: 137px is closest to seven 20px units (140px), so cropping or scaling the image by 3px to hit exactly 140px keeps every line of text below it landing back on the shared grid, instead of being permanently offset by whatever stray few pixels the uncropped image happened to occupy. This is one of the more commonly missed pieces of grid discipline — designers remember to snap headings and paragraphs, and then place a full-width photograph between two of them without checking its height at all.
Checking compliance as you go, not just at the start
A baseline grid is easy to set up once and easy to lose track of after that, especially once real editing begins — a client asks for a slightly bigger headline, an image gets swapped for one with a different natural crop, a paragraph gets a sentence added and its block grows by a line. Each of those small, ordinary edits is a moment where a previously grid-compliant layout can quietly drift, and the fix is cheap only if you catch it immediately: after any resize, re-run the new height through the calculator and confirm it's still landing on a whole multiple, rather than assuming a layout that was correct at the start of a project is still correct by the end of it. Treating this as a five-second habit — check the number, not just the look — catches drift far earlier than eyeballing the page for misalignment, which is often invisible until two elements that should share a row visibly don't.
Choosing the unit changes how much capacity you get
The size of the baseline unit itself is a trade-off worth seeing in numbers. An 800px-tall zine page at a 20px baseline unit fits 40 full lines; the same 800px page at a coarser 24px unit fits only 33. The smaller unit buys you more available rows and finer control over where things can land, at the cost of a rhythm that's less immediately, visibly distinct step to step — with more, closer-together options, the grid stops feeling like a small number of clear choices and starts feeling closer to a continuous range. The larger unit gives you fewer, bolder rhythm steps and a page that reads as more obviously "gridded" at a glance, at the cost of less flexibility in exactly where a given element can land. Neither choice is universally correct; it depends on how dense the piece is and how much you want the underlying structure to be visible versus felt.
The failure mode that's easiest to miss: ungridded gaps
Text and images aren't the only things that need to respect the grid — the empty space between sections does too. A "just eyeballed" 15px gap dropped between two blocks on a 20px-unit page is not a multiple of the baseline unit, and even though every text block above and below it might individually be perfectly snapped, that one ungridded gap quietly shifts everything that follows it out of rhythm with everything above it. The fix is the same discipline applied to spacing as to line heights: treat a deliberate gap between sections as its own "desired line height" and run it through the same snapping logic, or simply insist that any gap be a whole multiple (or, if you're deliberately working a half-unit sub-grid, a consistent half-multiple) of the baseline unit, the same as every other vertical measurement on the page.
Make it a checklist item, not a one-time setup step
The most reliable way to keep a layout on-grid through to the end of a project is to stop treating the baseline grid as something you set up once at the start and instead treat it as a line item in every design review: does every text block's line height land on a whole multiple of the unit? Does every image and spacer? Is anything off-grid a deliberate choice rather than an oversight? Answering those three questions explicitly, every time a layout changes, is what actually keeps a page reading as coordinated by the time it's finished — not the initial decision to use a grid at all, but the discipline of checking it stayed true the whole way through.
Watching the multiple grow across a real type scale
A grid unit doesn't just snap individual sizes in isolation — it's worth watching how the required multiple grows as you move up a whole modular type scale, since that growth is what tells you how much vertical room a hierarchy actually needs. Take a perfect-fourth scale (ratio 1.333) from a 16px base, with each step's line height derived the same way as the rest of this article — a longer assumed line length and looser leading for text-role sizes, a shorter assumed measure and tighter leading for display-role sizes — and snap each to the 20px unit. A caption step at 12px needs one unit (20px). The base body size at 16px also needs one unit. The first step up, 21.33px, still fits in one unit. But the second step up, 28.43px, needs two units (40px), and the third, 37.9px, needs two units as well. The multiple doesn't grow in lockstep with the font size — it jumps at specific thresholds — which is exactly the kind of detail worth checking numerically rather than assuming a bigger typeface always means proportionally more baseline units.
Budgeting a page before you lay it out
Bring every number from this article together and you can budget a page's vertical space before a single element is actually placed. On the 800px zine page with its 40 available 20px units: a three-unit headline, a two-unit subhead, several one-unit body lines for the running copy, a seven-unit image, and a one-unit caption together account for a known, addable number of units before you've committed to exact copy length or image placement. Add up every planned element's multiple, compare the total against the page's 40-unit capacity, and you know immediately whether the content you're planning will fit the format — or whether something needs to shrink, crop tighter, or move to a second page — well before you've spent time laying it all out and discovering the hard way that it doesn't.
Margins count too
The top and bottom margins of a page are themselves a kind of gap, and it's worth applying the same discipline to them as to the gaps between sections. A margin that isn't a whole multiple of the baseline unit means the very first line of text on the page doesn't start on the grid at all, which quietly undermines the whole system before a single paragraph has been set — every line after it inherits an offset that was never part of the plan. Checking that a page's top margin, not just its internal spacing, lands on a grid multiple is a small addition to the review checklist above, and it's the difference between a grid that governs the whole page and one that only governs the content sitting inside an already-misaligned frame. The same applies to the bottom margin and to the gutter between facing pages in a spread — anywhere a fixed measurement sits between the page edge and the first or last line of type is worth running through the calculator exactly like any other gap.