Plain Figures CreativeType scale and line spacing, also on a baseline grid
Work out harmonious type sizes from a body size and a ratio, with the line spacing for each, rounded to a baseline grid if you like, and copy the values as CSS.
| Step | Size | Line spacing |
|---|---|---|
| 5 | 30.52 pt | 42.72 pt |
| 4 | 24.41 pt | 34.18 pt |
| 3 | 19.53 pt | 27.34 pt |
| 2 | 15.63 pt | 21.88 pt |
| 1 | 12.50 pt | 17.50 pt |
| 0 | 10.00 pt | 14.00 pt |
| -1 | 8.00 pt | 11.20 pt |
| -2 | 6.40 pt | 8.96 pt |
Grid and rhythm
Grid and rhythm
Grid and rhythm
Grid and rhythm
Grid and rhythm
Grid and rhythm
Grid and rhythm
Grid and rhythm
CSS values
:root {
--step-5: 30.52pt;
--leading-5: 42.72pt;
--step-4: 24.41pt;
--leading-4: 34.18pt;
--step-3: 19.53pt;
--leading-3: 27.34pt;
--step-2: 15.63pt;
--leading-2: 21.88pt;
--step-1: 12.5pt;
--leading-1: 17.5pt;
--step-0: 10pt;
--leading-0: 14pt;
--step-m1: 8pt;
--leading-m1: 11.2pt;
--step-m2: 6.4pt;
--leading-m2: 8.96pt;
}How it works
Each step of the scale is the previous one multiplied by the ratio: size = body size × ratio^step. Negative steps give smaller sizes, for notes and captions.
The ratios are given by their exact value, for example 5:4 = 1.25 or φ = (1 + √5) / 2 ≈ 1.618. You can also enter any other ratio greater than 1.
The line spacing is the size times the chosen factor. With a baseline grid every line spacing is rounded up to a whole number of lines, so all text stays on the grid. The link opens the layout grid generator with this baseline grid.
Sources
- CSS Values and Units Module Level 3, absolute lengths (1pt = 1/72 in, 1px = 1/96 in), World Wide Web Consortium (W3C) (retrieved on 20 October 2026)