Vertical Rhythm Calculator

Calculate vertical rhythm for consistent text spacing.

Base Font Size (px)

Base Line Height

Baseline Unit: 24px

Element	Font Size	Lines	Line Height	Margin Bottom	rem Values
h1	40.0px	2	1.2000	24px	2.500rem / 1.500rem
h2	32.0px	2	1.5000	24px	2.000rem / 1.500rem
h3	28.0px	2	1.7143	24px	1.750rem / 1.500rem
h4	24.0px	1	1.0000	24px	1.500rem / 1.500rem
h5	20.0px	1	1.2000	24px	1.250rem / 1.500rem
h6	16.0px	1	1.5000	24px	1.000rem / 1.500rem
p	16.0px	1	1.5000	24px	1.000rem / 1.500rem
small	14.0px	1	1.7143	24px	0.875rem / 1.500rem

h1 — 40px on the baseline grid

h2 — 32px on the baseline grid

h3 — 28px on the baseline grid

h4 — 24px on the baseline grid

h5 — 20px on the baseline grid

CSS Custom Properties:

:root {
  --baseline: 24px;
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --font-size-h1: 2.500rem;
  --line-height-h1: 1.2000;
  --font-size-h2: 2.000rem;
  --line-height-h2: 1.5000;
  --font-size-h3: 1.750rem;
  --line-height-h3: 1.7143;
  --font-size-h4: 1.500rem;
  --line-height-h4: 1.0000;
  --font-size-h5: 1.250rem;
  --line-height-h5: 1.2000;
  --font-size-h6: 1.000rem;
  --line-height-h6: 1.5000;
  --font-size-p: 1.000rem;
  --line-height-p: 1.5000;
  --font-size-small: 0.875rem;
  --line-height-small: 1.7143;
}