Skip to content
Typography Master

Vertical Rhythm Calculator

Turn base font size and line height into a vertical rhythm system — baseline unit, paragraph spacing, and heading margins with a live grid preview.

Vertical Rhythm Calculator

Baseline unit

1.5rem

24px

Paragraph gap

1rem

16px

Recommended pattern

Space above headings 1.5–3× paragraph gap; space below 0.5–0.75× paragraph gap.

ElementMargin topMargin bottom
h13rem (48px)0.75rem (12px)
h22.5rem (40px)0.65rem (10.4px)
h32rem (32px)0.6rem (9.6px)
h41.5rem (24px)0.5rem (8px)

Spacing and rhythm in practice

Vertical rhythm creates invisible order in long-form layouts. When line height, paragraph spacing, and heading margins share a common baseline, reading feels effortless.

Headings need more space above than below — this binds each heading to the content it introduces rather than the previous section.

:root {
  --rhythm-baseline: 1.5rem;
  --rhythm-paragraph-gap: 1rem;
  --rhythm-line-height: 1.5;

  /* Heading spacing */
  --rhythm-h1-margin-top: 3rem;
  --rhythm-h1-margin-bottom: 0.75rem;
  --rhythm-h2-margin-top: 2.5rem;
  --rhythm-h2-margin-bottom: 0.65rem;
  --rhythm-h3-margin-top: 2rem;
  --rhythm-h3-margin-bottom: 0.6rem;
  --rhythm-h4-margin-top: 1.5rem;
  --rhythm-h4-margin-bottom: 0.5rem;
}

Baseline grid shows 12 rhythm units at 24px each.

What this vertical rhythm does

This vertical rhythm calculator turns base font size and line height into a spacing system with baseline units, paragraph gaps, and heading margins. Preview alignment on a live baseline grid.

How to use it

  1. Enter your base font size and desired line height ratio.
  2. Review the computed baseline unit and rhythm multiples.
  3. Apply heading and paragraph spacing values to your layout.
  4. Use the grid preview to verify visual alignment.
  5. Read Spacing & Rhythm for the theory behind baseline grids.

For deeper context, read the Spacing & Rhythm chapter in the Typography Master guide.

Frequently asked questions

What is vertical rhythm in typography?
Vertical rhythm is a consistent spacing system that aligns text baselines and UI elements across a layout, typically using a baseline grid and line-height multiples.
What line height ratio should I use for a baseline grid?
Start with 1.5 for body text. Choose a line height that produces a clean baseline unit — often the font size multiplied by the ratio, rounded to a whole pixel value.
Do I need a baseline grid for web design?
Strict baseline grids are less common on the web than in print, but consistent line-height multiples and spacing tokens achieve most of the same visual harmony with less rigidity.

Related resources