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
Line height: 1.50
Paragraph spacing: 1.00em
1.5rem
24px1rem
16pxSpace above headings 1.5–3× paragraph gap; space below 0.5–0.75× paragraph gap.
| Element | Margin top | Margin bottom |
|---|---|---|
| H1 | 3rem (48px) | 0.75rem (12px) |
| H2 | 2.5rem (40px) | 0.65rem (10.4px) |
| H3 | 2rem (32px) | 0.6rem (9.6px) |
| H4 | 1.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.50;
/* 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 of 24px each.What this vertical rhythm calculator 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
Enter your base font size and desired line height ratio.
Review the computed baseline unit and rhythm multiples.
Apply heading and paragraph spacing values to your layout.
Use the grid preview to verify visual alignment.
Read Spacing & Rhythm for the theory behind baseline grids.
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
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.