Type Scale & Vertical Rhythm Calculator

A modular scale multiplies a base size by a fixed ratio for each step up and divides by it for each step down: size(n) = base × ratioⁿ. The presets are the musical intervals designers commonly reach for (minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5, golden 1.618), but any ratio above 1 works. Sizes are shown unrounded in px and as rem at the root size you give (16 px unless you change it), so 20 px is 1.25rem.

Body text at 16 px with line-height 1.5 sits on 24 px lines. For every other size the raw line height (size × line-height) is rounded up to the next multiple of the baseline unit, so a 31.25 px heading takes 48 px rather than 46.875 and the text below it lands back on the grid. The default unit is half the body line (12 px here), the usual compromise between a strict full-line grid and a loose one; type any unit — 4 or 8 px for a spacing-system grid — to override it. The resulting unitless ratio is shown so you can spot steps that end up too tight or too loose and adjust the unit.

The custom properties name each step --step-n in rem with its px size and snapped line height in a comment, plus --baseline for margins that should stay on the grid. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.