How is the baseline unit calculated?

It is the body font size multiplied by the body line-height. A 16px body at 1.5 gives a 24px unit, and that number becomes the module: line boxes should be whole multiples of it, and so should the vertical margins between blocks if the rhythm is to hold down the page.

Why does the snapped line-height differ from the one I typed?

Because the heading's natural line box is rarely a whole number of baseline units. The box is divided by the unit, rounded to a row count, multiplied back, and divided by the font size again. The result is a line-height that places the heading's baselines on the stripes at the cost of a fractionally different leading.

Does the tool round the box up or to the nearest row?

The arithmetic rounds to the nearest row with a minimum of one, while the explanatory note on the panel describes rounding up. In practice a box just under a multiple can therefore be pulled down rather than up, which is the case to look at when the snapped leading reads tighter than the entered value suggested.

Should every heading be snapped to the grid?

Large display headings can be left off it, since a two-line hero rarely sits beside body copy closely enough for the drift to show. The headings that matter are the ones inside running content — h2, h3 and anything with text above and below it — because that is where a misaligned baseline is visible.

What are the spacing steps for?

They are the first eight multiples of the baseline unit, given in pixels and rem with a token name each. Using them for padding and margins keeps the spaces between blocks in the same rhythm as the lines inside them, which is the half of a vertical grid that a line-height calculation alone does not cover.

Baseline Grid Calculator

Grid

Body font sizepxBody line-heightHeading font sizepxHeading line-heightRoot sizepx

Baseline unit24px (1.5rem)

Heading occupies2 baseline rows

Snapped heading line-height1.2

Heading line box48px → 48px

The heading's natural line box is rounded UP to whole baseline rows, then converted back into a unitless line-height — that keeps its baseline on the grid without changing the font size.

Spacing steps

Step	px	rem	Token
1 × baseline	24px	1.5rem	--space-1
2 × baseline	48px	3rem	--space-2
3 × baseline	72px	4.5rem	--space-3
4 × baseline	96px	6rem	--space-4
5 × baseline	120px	7.5rem	--space-5
6 × baseline	144px	9rem	--space-6
7 × baseline	168px	10.5rem	--space-7
8 × baseline	192px	12rem	--space-8

Use these multiples for margins/padding inside the typeset block — anything off-multiple breaks the rhythm.

Grid CSS

:root {
  --baseline: 24px; /* 16px × 1.5 */
  --root-size: 16px;
}

body {
  font-size: 16px;
  line-height: 1.5; /* 24px */
}

h1 {
  font-size: 40px;
  line-height: 1.2; /* snapped to 2 × 24px */
  margin-block: 48px 24px;
}

/* Spacing steps: each is a whole baseline multiple */

You Might Also Need

Vertical Rhythm Builder

Compose a vertical rhythm

Line Height Optimizer

Optimize leading for readability

Type Scale Generator

Generate a modular type scale

CSS Typography Token Generator

Export CSS type tokens

The baseline grid calculator derives the one number a vertical grid is built from — the body size times the body line-height — and then reports what a heading has to do to sit on it. The answer is usually a line-height that is a shade off the design value.

What is Baseline Grid Calculator?

The baseline grid calculator takes five numbers and returns the grid they imply. The baseline unit is the body font size multiplied by the body line-height: a 16px body at 1.5 gives a 24px unit, which is the distance between two baseline stripes and the module every other line box has to be a whole multiple of.

Four values describe the grid, plus a root size for the rem conversions.

Body font size and body line-height, which together produce the baseline unit in pixels and in rem.
Heading font size and heading line-height, which give the heading's natural line box — the measurement that almost never lands on the grid.
Root size, so the unit and the spacing steps are expressed in the rem values a page actually uses.
The row count, which is the natural box divided by the unit and rounded to a whole number of rows with a floor of one.
The snapped line-height, which is that row count multiplied back by the unit and divided by the heading size, ready to paste.

The arithmetic is the interesting part. A 40px heading at a line-height of 1.2 has a 48px box; against a 24px unit that is exactly two rows, so the snapped value is unchanged and the heading was already on the grid. Change the unit to 20px and the same heading wants 48 divided by 20, which rounds to two rows — 40px, a snapped line-height of 1.0 — and the heading now sits on the grid with visibly tighter leading. The panel's own note says the box is rounded up to whole rows, while the arithmetic rounds to nearest with a one-row floor, so a box that falls just under a multiple can be pulled down as easily as up. That is worth knowing when the result looks tighter than expected rather than looser.

The output is a small stylesheet rather than a single number. It declares the baseline unit and the root size on the root element, sets the body rule with the unit as a comment, and gives the heading a snapped line-height with margins of two units above and one below. A spacing table then lists the first eight multiples of the unit in pixels and rem with a token name for each, which is how padding and margins inside the block stay on the grid instead of being chosen by eye.

Four caveats apply before the stylesheet is pasted into a project.

The grid is only as good as the body rule typed into it, so a site whose real body size differs from the entered value has a grid that describes nothing.
Only one heading is snapped, so a full hierarchy needs the arithmetic repeated per level or a tool that handles the ladder.
Rounding changes the leading, which makes the heading's line-height a grid decision rather than a purely typographic one.
The unit is derived from the body rule alone, so a page whose body text changes size on a narrow screen has a second grid that these numbers do not describe.

Use it when a page has begun to drift vertically, when a heading looks correct in isolation and wrong in the middle of a section, or when a spacing scale needs to be derived from the text rather than invented separately.

How to use Baseline Grid Calculator

Enter the body size and line-height first, since those two produce the baseline unit everything else is measured against.
Read the unit in both pixels and rem, and check the rem figure against the root size the project actually sets.
Enter the heading values and compare the natural line box with the snapped box to see how far off the grid it was.
Copy the stylesheet and the spacing steps together, so margins inside the block use the same module as the line boxes.

When to use Baseline Grid Calculator vs related tools

Reach for it when a section drifts vertically as it is scrolled, when a heading sits on the grid in one size and breaks it in another, or when a spacing scale has to come out of the type rather than from a separate number someone chose once. The unit is the load-bearing idea. For the size ladder above the body, the type scale generator and the modular scale calculator produce the steps, and the vertical rhythm builder reports the snap error across a whole scale rather than one heading.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.