Rounding a modular type scale to a 4px grid merges neighbouring steps

A modular type scale sets each font size by multiplying a base size by one ratio per step, so a 16px base on a ratio of 1.25 gives 20px, then 25px. Designers often round the sizes to a grid, and that is where steps disappear. We generated 936 pairs of neighbouring sizes from the 13 named ratios on bases of 12 to 20px, two steps down and six up, at a 16px root. Rounded half up to 0.25rem, which is 4px at that root, 100 of the 936 pairs landed on the same size. Kept to two decimals, none did. Many sizes sit exactly halfway between grid values, so a different tie rule moves the count to 103 or 104. This is token rounding by the designer; the browser does none of it. Whether two neighbours can merge comes down to one number, the grid divided by the ratio minus one.

Steps closer together than the grid can sound as one note

Two neighbours differ by the smaller size times the ratio minus one. Rounding can send both to one grid value only while that gap is under the grid, so a merge is possible below a size of grid ÷ (ratio − 1) and impossible above it. Our thresholds for five presets:

A minor second on a 4px grid can therefore merge steps anywhere under 60px, the top of its default range included. Rounding half up, on whole pixels only 1 of the 936 pairs merged, a minor second on a 12px base. On 0.125rem it was 34, of which 28 were minor seconds. On the 4px grid the minor second supplied 51 of the 100 and the major second 27. Every ratio from the perfect fourth up contributed three pairs or fewer. Rounding moves the base too: on the 4px grid a 14px base becomes 16px.

The narrowest ratio plays nine tokens on a handful of notes

A revision of our type scale calculator dated 6 November 2026 adds a "Round sizes to" control, from 0.5px up to 0.25rem. It rounds half up, shades rows that share a size and states the threshold. Before that revision the calculator showed only unrounded sizes and never warned that a grid could collapse them, and its FAQ credited Tim Brown's 2011 article with making the musical names common among web designers.

To re-run the example, set a 16px base, the Minor Second preset, six steps up, two down and 0.25rem rounding. The table reads 16, 16, 16, 16, 20, 20, 20, 24, 24: nine tokens on three sizes, with the threshold at 60px. Switch to 0.125rem and the sizes become 14, 16, 16, 18, 18, 20, 20, 22, 24. Three pairs share a size there: sm with base, lg with xl, and 2xl with 3xl.

Rounding detunes the ratio even where every step stays distinct

A scale that keeps all nine sizes can still lose its ratio. On the defaults, a 16px base and the Major Third, whole-pixel rounding gives 10, 13, 16, 20, 25, 31, 39, 49, 61. Nothing merges, yet each step now runs anywhere from 1.231 to 1.300 instead of a steady 1.25.

A perfect fourth rounded to 0.25rem steps by 1.250 at its narrowest and 1.500 at its widest. On the 4px grid the golden ratio's two smallest tokens, xs and sm, both round to 8px, and the next step jumps to 16px, so a scale labelled 1.618 contains one step of exactly 1 and another of exactly 2.

Just intonation tunes most of the presets

The preset values, and most of their names, come from modularscale-sass, the MIT-licensed library by Scott Kellum, Adam Stacoviak and Mason Wendell. Its variables carry names such as $minor-second. The calculator uses the library's ratios up to the octave, 13 of its 19.

Ten of those thirteen are whole-number frequency ratios from just intonation, and all ten appear in the Huygens-Fokker Foundation's "List of intervals", compiled by Manuel Op de Coul, sometimes under other names: 16:15 is the "minor diatonic semitone" there and 15:8 the "classic major seventh". The other three need care. The list gives 16:9 as the Pythagorean minor seventh, with 9:5 as the just one. The augmented fourth preset is √2, the equal-tempered tritone. The golden ratio is no musical interval at all.