Also available in: Español · Português · Français · العربية
Modular Scale Generator
A type scale from any base and ratio, with the achieved ratio printed beside every step so you can see exactly what rounding cost you.
What is a modular scale?
A modular scale is a set of font sizes built by repeatedly multiplying a base size by a fixed ratio. Start at 18px with a ratio of 1.25 and you get 22.5, 28.125, 35.15625 going up, and 14.4, 11.52 going down. The appeal is consistency: every neighbouring pair stands in the same relation, so the sizes feel like a system rather than a list of numbers somebody liked.
The ratios have names because they are borrowed from music. A major third, a perfect fourth, a perfect fifth and an octave are intervals in just intonation, and in that system they are exact fractions — 5/4, 4/3, 3/2 and 2. That is worth knowing because every published table of scale ratios shows them as decimals instead, and the decimals are rounded.
This modular scale generator does the ordinary job and then does the part nobody else does: beside every step it prints the ratio that step actually achieved, and tells you how many of them still match the ratio you asked for. Usually most of them do not.
How to use it
- Set your base size and pick a ratio. Nine named intervals are built in, or choose Custom and type your own. The line under the picker tells you the exact fraction the interval really is, and the rounded decimal the tables usually print.
- Choose how many steps you need above and below the base. Negative steps are the small sizes — captions, labels — and positive steps are the headings.
- Look at the last column, then untick the rounding box. That column is the ratio each step actually holds against the one below it. With rounding on, most steps drift. With it off, every step is exact. The summary underneath counts them, and the CSS block gives you custom properties ready to paste.
Rounding to whole pixels breaks the scale
A geometric sequence does not survive being rounded. Take the default on this page — a major third from an 18px base. Rounded to whole pixels the sizes are 12, 14, 18, 23, 28, 35, 44, 55, 69, and only two of those eight steps still stand in a 1.25 relation to the one below. The very first pair, 12 to 14, is a ratio of 1.1667: it is 6.67% away from the ratio the scale was chosen for, and it is the largest text on the page next to the smallest.
That is not a quirk of one setting. Across all nine ratios on this page at the two commonest base sizes, 16 and 18 pixels, only 39 of 144 neighbouring pairs still hold their promised ratio — 27.1% — and the worst single pair is 10% out. So the property that makes a modular scale worth using is, in the ordinary case, mostly absent from the numbers that reach the stylesheet.
The most surprising offender is the octave. Doubling is the simplest ratio there is and rounding cannot possibly break it, since twice a whole number is a whole number. But rounding before doubling can: from an 18px base the step two below is 4.5, which rounds to 5, and 5 doubled is 10 rather than the 9 the scale wants. That is a 10% miss on the simplest ratio in the table, and it is the worst drift anywhere in it. From a 16px base the same octave is perfect at every step, because 16 halves cleanly all the way down. Base parity decides it, which is why the base is the first control on the page.
The fix is not to pick a different ratio. It is to stop rounding — CSS is perfectly happy with 1.3333rem or 22.5px, and the rem column here is exact whether or not the pixel column is. Untick the rounding box and the counter goes to eight out of eight with a worst drift of zero.
The published ratios are rounded too
There is a second, smaller rounding sitting underneath the first, and it is in almost every table of scale ratios on the web. A perfect fourth is written 1.333. It is not 1.333; it is 4/3, which is 1.3333 recurring. A minor third is 6/5, a major third 5/4, a perfect fifth 3/2, a major second 9/8. Those are exact, and the decimals published beside them are not.
The size difference is small — by the sixth step above a 16px base, using 1.333 instead of 4/3 costs you less than a whole pixel. But the error runs in one direction every step, because 1.333 is below 4/3 rather than either side of it, so it accumulates rather than cancelling. And it has one consequence that is not small at all: with the exact fraction, three of the rounded pairs at a 16px base land on the ratio exactly, because 4/3 is a ratio of small whole numbers and pairs like 12 and 16 satisfy it. With 1.333, not one pair can ever be exact, because 1.333 is not the ratio of any two small whole numbers at all.
Two of the nine are genuinely irrational and no decimal will ever be exact for them. The augmented fourth is the square root of two, and the golden ratio is one plus the square root of five, all over two. This page uses the exact value for all nine and tells you underneath the picker which kind you have chosen.
Honest limitations
None of this means a rounded scale is unusable. Type sizes are a design decision, not a measurement, and 23px instead of 22.5px will not hurt anybody. The claim here is narrower and worth being precise about: once you round, the thing you have is no longer a modular scale, it is a list of sizes that started as one. If the ratio was your reason for choosing this method, you should know when you have stopped having it.
The counter compares each pair against the ratio you asked for and calls a pair exact only when the two match to within a fraction of a trillionth. That is deliberately strict, because anything looser would quietly report near-misses as successes and there would be no point to the column.
Browsers add one more rounding this page cannot show you. A size expressed in rem is computed exactly, but glyphs are ultimately painted onto a device pixel grid, and how that is resolved depends on the browser, the platform and the display. So the rem column is exact as a computed value and approximate as ink. That is still strictly better than rounding it yourself, because the browser rounds at the last possible moment rather than the first.
Finally, the scale says nothing about which sizes you should actually use. A generator will happily hand you nine steps; most interfaces need four or five, and the ones you skip matter as much as the ones you keep.
Why is it free?
It is arithmetic, and it runs in your browser. There is no server involved, so there is nothing to bill for and no account to create.
Nothing is uploaded and nothing is stored. Reload the page and it has forgotten your scale.