Vertical Rhythm Calculator

Try the Calculator

What Vertical Rhythm Is and Why It Matters

Vertical rhythm is the invisible scaffolding under every well-set page. It starts with a single decision: the body text line height. From that number you derive one rhythm unit, and every vertical measurement on the page, margins, padding, and the space between headings and paragraphs, becomes a multiple of that unit. The result is a page where the lines of text line up with each other down the entire column, the way a printed book does.

The web makes this easy to skip because the browser does not enforce it. A heading with a 32px font size and a default line height of about 38px, followed by body text with a 24px line height, leaves a gap that matches neither number. Every block drifts by a few pixels. Readers rarely name the cause, but they feel the difference between a page that sits level and one that has a subtle jitter running down it.

The math stays simple on purpose. Set the unit once, express every vertical gap as a multiple of it, and snap the line heights of larger text to the nearest multiple as well. This tool automates that arithmetic and shows you the grid while you tune the inputs.

How the Math Works

The rhythm unit is simply your body line height in pixels. At a 16px base with a 1.5 ratio, that is 24px. Every spacing step below it is a whole multiple: 24px, 48px, 72px, 96px, and so on. In the export these become tokens named by their multiple, so a card uses two units of padding and a section uses six.

Headings need a second rule because their natural line heights do not divide the unit evenly. A 32px heading with a 1.2 ratio wants about 38.4px of line height, which is not a multiple of 24. The tool snaps it up to the nearest multiple, 48px, giving an effective ratio of 1.5. The heading gets a little extra air, and every line of it lands exactly on the same grid lines as the body text.

Two knobs control the trade-off. The minimum ratio keeps the snapped line height from collapsing a heading: at a 1.05 minimum, a 48px heading snaps to 48px, which looks cramped. At 1.2 it snaps to 72px, which reads comfortably. The base line height sets the unit itself, so a 22px or 26px line height produces a different grid entirely. Try both and compare the preview.

How to Use the Calculator

1. Set the base font size to your body size, usually 16px for most projects.
2. Set the body line height. Start at 1.5 times the base size and adjust for the font you chose in the font pairings library.
3. Check the preview. The grid lines should pass through every line of body text, and the heading should sit on the same lines.
4. Adjust the min ratio until the largest heading still reads comfortably.
5. Copy the CSS, drop it into your stylesheet, and replace hard-coded margins and padding with the space tokens.

Common Mistakes That Break the Grid

The most common failure is a heading line height that is not a multiple of the unit. Browsers compute a default line height of about 1.2 for headings, which almost never matches the body grid. The fix is explicit line heights on every heading, which is why the export includes them.

The second failure is fractional line heights. A line height of 25.6px looks identical to 26px in isolation, but over ten lines the drift adds up to a full 6px, enough to visibly misalign a sidebar. Round the unit to a whole number before building the scale.

The third is using margins that ignore the unit entirely: an odd 30px gap here, a 17px one there. The browser happily renders them, and the grid quietly stops meaning anything. Swap every vertical margin and padding for a step token and the rhythm returns without any visual redesign.

Where This Fits with the Other Tools

Vertical rhythm completes the spacing half of a design system. The type scale calculator chooses the font sizes, and the fluid type generator makes them responsive with clamp, while this tool keeps every size sitting on the same baseline. The typography playground is the place to try the finished system with real fonts and palettes, and the brand kit bundles the tokens with colors for export. For line length and measure, the text measure tool handles the horizontal side of the same problem.

FAQ

What is vertical rhythm?

Vertical rhythm is the practice of keeping all vertical spacing on a page proportional to the body text line height. Paragraphs, headings, margins, and padding all share one base unit, so the baselines of text align down the page. Without it, gaps between blocks land at arbitrary sizes and the page reads as uneven.

What is a baseline grid?

A baseline grid is the invisible set of horizontal lines, spaced by the body line height, that text sits on. In print it is drawn on the layout sheet; on the web it is a discipline. This tool renders that grid over a live preview so you can see whether each block lands on a line before you write any CSS.

Should the rhythm unit match the line height exactly?

Yes for the default case. If your body text has a 24px line height, every line of body text is 24px tall, so 24px is the natural unit. If your line height has a decimal like 25.6px, round it to the nearest whole pixel first, or your grid will drift on every line.

What line height should I start from?

A common starting point is 1.5 times the base font size, which gives 24px at a 16px base. Long-form reading favors a ratio of 1.5 to 1.7; UI text can sit tighter around 1.4. Set the number, watch the preview, and adjust until the grid feels even.

Do headings have to use the snapped line height?

Only when they sit next to body text on the same page. A heading whose line box is not a multiple of the unit will push the text below it off the grid by a few pixels. Snapping the heading line height to a multiple keeps everything aligned, at the cost of a slightly looser heading.

How is this different from a type scale?

A type scale picks the font sizes. This tool picks the vertical spacing between and around them. They work together: the type scale calculator sets the size steps, and this tool makes sure every step sits on the same baseline grid.