Use the free Baseline Grid Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What a baseline grid is
A baseline grid is a set of evenly spaced horizontal lines that every line of text in a document sits on. The spacing between the lines is called the leading, and it is usually set to the body text’s line height. When all text aligns to the same grid, baselines line up across columns and pages, and the document gains a calm, orderly rhythm that readers feel even if they cannot name it. The Baseline Grid Calculator above checks whether your font sizes fit a chosen grid, and snaps each one to the nearest grid multiple.
Baseline grids matter most in multi-column layouts and long documents. Without one, columns drift: a paragraph in the left column ends half a line higher than the paragraph in the right column, images and headings sit at slightly different heights, and the spread feels subtly uneven. With one, everything locks into place, and the reader’s eye moves across the page without catching on small misalignments.
How to use the calculator
Enter your baseline leading in pixels: this is the grid spacing, and it usually equals your body text line height. Enter your line-height ratio, the multiplier that turns a font size into its natural line height. Then enter the font sizes you want to check, separated by commas. Press Calculate and read a table: each size’s natural line height, the snapped line height that fits the grid, and how many grid lines that snapped height uses.
The snapping rule is simple: the snapped height is the smallest multiple of the leading that is at least as large as the natural line height. A 16 pixel font at a 1.2 ratio has a natural height of 19.2 pixels, which snaps up to 24 pixels on a 24 pixel grid, using one grid line. A 24 pixel font at the same ratio has a natural height of 28.8 pixels, which snaps to 48 pixels, using two grid lines. The snap always rounds up, never down, so text never crowds.
A worked example
With a 24 pixel baseline and a 1.2 ratio, sizes 12, 16, 24, and 32 pixels snap to 24, 24, 48, and 48 pixels. The small sizes share one grid line each, the larger sizes take two. That tells you how to set your styles: body text at 16 pixels gets a 24 pixel line height, captions at 12 pixels also get 24, and headings at 24 and 32 pixels get 48. Every block of text then occupies a whole number of grid lines, and the grid holds across the document.
Choosing the leading
The leading usually starts from body text. If body text is 16 pixels at a 1.5 ratio, the natural line height is 24 pixels, and a 24 pixel grid is the natural choice. Choosing a much smaller grid, like 8 pixels, makes snapping nearly invisible but also nearly pointless, since almost any height is close to a multiple of 8. Choosing a much larger grid forces big jumps: a small size change can double the line height, wasting space. Match the grid to body text, and let other sizes snap to it.
Images, headings, and interruptions
Images and other non-text elements break the grid unless they are sized to grid multiples too. An image whose height is not a whole number of grid lines pushes the text after it off the grid, and the misalignment spreads down the page. The fix is to size images, captions, and spacing blocks to grid multiples, or to accept a deliberate grid reset at a section break, where the reader expects a fresh start. Section breaks, chapter openings, and page breaks are natural reset points; mid-paragraph drift is not.
On the web, baseline grids are harder to hold, because browsers, fonts, and user settings all shift text slightly. Designers often use a looser version: consistent line heights that are multiples of a base unit, rather than a strict pixel grid. The principle survives even when the strict grid cannot: keep vertical spacing in consistent multiples, and the page will feel orderly even if individual baselines wobble by a pixel.
Common mistakes
The most common mistake is setting a grid and then ignoring it for headings, captions, or pull quotes. One off-grid element breaks the rhythm for everything below it, so either bring every style onto the grid or accept that the grid only applies to body text. Another mistake is choosing the grid from a heading size instead of body text, which forces body text into awkward snaps. A third mistake is forgetting that line height includes space above and below the text: the grid aligns baselines, not the tops of letters, so check baselines, not bounding boxes, when verifying alignment.
Typography figures are computed from the entered font size, and real rendering varies by font. Use the calculator to snap your sizes to the grid, set your styles to the snapped values, and check a printed or rendered page with a ruler or guides before finalizing the document.
Related tools
- Calculadora de Rejilla de LÃnea Base (Spanish version)
- Pattern Grading Calculator
- Curtain Yardage Calculator