What is a vertical rhythm in practice?

It is a single spacing unit, usually the body's own line box, that every line box and every vertical margin is a whole multiple of. The reader never sees the grid; they see that blocks are consistently spaced and that baselines line up from section to section instead of drifting apart down the page.

What does the snap error mean?

It is how far the line box had to move to become a whole number of baseline units, expressed as a percentage of the natural box. A 31.5px box snapped to a 32px unit moves half a pixel, which is about 1.6 per cent. Under roughly 1.5 per cent the change is invisible; above it the leading visibly differs.

Does snapping always increase the leading?

No. The box is rounded to the nearest whole number of units, so a natural box just above a multiple is pulled down and the effective leading tightens. That is worth watching on display steps, where a tighter leading changes the look of a heading more than it would in body text.

Why does the preview draw stripes?

Because a grid is easier to see than to read. The stripes are the baseline unit drawn behind the rendered ladder, so a step whose baselines miss them is obvious at a glance. It also shows how far apart the units are relative to the text, which is where an overweight grid usually becomes apparent.

Is snapping the line boxes enough on its own?

No, and this is the most common place a rhythm fails. Margins and padding have to be multiples of the same unit, or the space between blocks breaks the grid even when every line box inside them is snapped. The spacing steps in the output are there to be used for exactly that.

Vertical Rhythm Builder

Rhythm inputs

Baseline unitpx

Body sizepx

Scale ratio

Body line height×

Steps

Step	Size	Natural box	Snapped (8px)	Effective leading	Snap error
+4	39.06px	58.59px	56px	1.4336	-4.43%
+3	31.25px	46.88px	48px	1.536	+2.4%
+2	25px	37.5px	40px	1.6	+6.67%
+1	20px	30px	32px	1.6	+6.67%
base	16px	24px	24px	1.5	0%

Line boxes round to the nearest 8px multiple. Errors under ~1.5% are effectively invisible; the worst in this ladder is 6.67%.

Grid preview

+4 — 39.06px text in a 56px line box.

+3 — 31.25px text in a 48px line box.

+2 — 25px text in a 40px line box.

+1 — 20px text in a 32px line box.

base — 16px text in a 24px line box.

The stripes are the 8px baseline unit; each line box's baselines should land on a stripe.

Snapped leading

/* +4 → 39.06px in a 56px box */
.type-step-p4 {
  font-size: 2.4414rem;
  line-height: 1.4336;
}

/* +3 → 31.25px in a 48px box */
.type-step-p3 {
  font-size: 1.9531rem;
  line-height: 1.5360;
}

/* +2 → 25.00px in a 40px box */
.type-step-p2 {
  font-size: 1.5625rem;
  line-height: 1.6000;
}

/* +1 → 20.00px in a 32px box */
.type-step-p1 {
  font-size: 1.2500rem;
  line-height: 1.6000;
}

/* base → 16.00px in a 24px box */
.type-step-0 {
  font-size: 1.0000rem;
  line-height: 1.5000;
}

You Might Also Need

Baseline Grid Calculator

Lock text to a baseline grid

Line Height Optimizer

Optimize leading for readability

Type Scale Generator

Generate a modular type scale

Modular Scale Calculator

Calculate ratios for type

The vertical rhythm builder snaps a modular scale's line boxes to a single spacing unit and reports the snap error for every step. The error column is the point: a step that misses the grid by three per cent is visible on the page, and one that misses by half a per cent is not.

What is Vertical Rhythm Builder?

The vertical rhythm builder takes a modular scale and forces its line boxes onto a single baseline unit, then reports how much each step had to move to get there.

The inputs describe the scale and the grid together.

Baseline unit, from 2 to 32 pixels, which is the stripe spacing every line box has to land on.
Body size and ratio, which generate the scale: each step is the body size multiplied by the ratio raised to the step number.
Body line height, which gives each step its natural line box before snapping.
Step count, from 2 to 8, which decides how far up the ladder the table goes.

The arithmetic per step is short. The natural box is the size times the leading; the snapped box is that value divided by the unit, rounded to a whole number, and multiplied back; the effective leading is the snapped box divided by the size; and the snap error is the difference between the snapped and natural boxes as a percentage of the natural one. A 21px step at a line-height of 1.5 has a natural box of 31.5px, which against an 8px unit rounds to 32px — a half-pixel change, an error of about 1.6 per cent, and an effective leading of 1.524 rather than 1.5.

That example is the tool's argument. A scale built purely from a ratio produces line boxes that are not multiples of anything, so the baselines of consecutive blocks drift a little further apart as the page runs down. Snapping fixes the drift and changes the leading slightly, and the size of that change is what the error column quantifies. The panel puts the practical threshold at about 1.5 per cent, under which the difference is invisible, and it names the worst step in the current ladder so the exceptions are visible before the CSS is copied. A striped preview draws the unit behind the rendered ladder, which makes a step that misses the stripes obvious without reading a number.

The output is one rule per step, each with the size in rem and the snapped leading, so the class list can be applied directly. Two limitations shape how far the result can be trusted.

Rounding can move a line box either up or down, so the snapped leading is not always looser than the natural one and a display step can tighten noticeably.
The rhythm is only as good as the margins, since a step with a snapped line box still breaks the grid when the space between blocks is an arbitrary number of pixels.
The scale is generated from a single ratio, so a ladder that deliberately skips a step for one role is not represented in the table.
The preview stripes are drawn at the chosen unit, so a unit that is very small relative to the text shows as closely spaced lines and is harder to judge by eye.

Use it once the scale and the body leading are settled and before the margins are written, because that is the point at which an off-grid step is still cheap to fix.

How to use Vertical Rhythm Builder

Set the baseline unit first, matching it to the body's own line box so the grid and the text agree from the start.
Enter the body size, ratio and step count to generate the scale, and set the leading the steps would naturally take.
Read the snap error column and the worst-step note, and adjust the ratio or the unit if a step is missing the grid by more than about a per cent and a half.
Copy the snapped rules and use the same unit for the margins between blocks, or the rhythm will break between the lines rather than inside them.

When to use Vertical Rhythm Builder vs related tools

Reach for it when a modular scale has been chosen and the page still looks slightly loose or tight as it scrolls, when a grid has to be imposed on an existing set of sizes, or when the cost of snapping a scale needs to be seen before it is committed to. The error column is what makes it a decision rather than a rule. For a single heading against a body grid, the baseline grid calculator does the same arithmetic on one element, the type scale generator and the modular scale calculator build the scale itself, and the line height optimizer supplies the leading the steps start from.

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.