How it works
A modular scale multiplies one base size by a fixed ratio for each step up and divides for each step down. This generator produces ten steps, from −5 to +4, using size = base × ratio^step, so at the default 16 px base and 1.2 ratio, step +1 is 19.20 px and step −1 is 13.33 px. Each row also reports rem (px ÷ 16), em (px ÷ base), and a suggested line-height of 1.7 − 0.1 × (step + 5), clamped between 1.05 and 1.7.
The ratio dropdown is the real design decision. Minor second 1.067 and Major second 1.125 give tight, dense scales suited to dashboards and data-heavy interfaces. Minor third 1.2, the default, and Major third 1.25 suit most websites. Perfect fourth 1.333, Augmented fourth 1.414, Perfect fifth 1.5 and Golden ratio 1.618 open up fast and work best for editorial or landing pages. Base size accepts 8 to 32 px, and the CSS variable prefix defaults to --fs.
Two caveats are worth knowing before you paste the export. The rem column always divides by 16, so if you change the root font size in your own stylesheet the exported rem values will no longer match the pixel figures shown. And the step names are offset from the arithmetic: the ten tokens run xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl and 5xl across steps −5 to +4, which places step 0 — the size you actually typed — under the name xl rather than base.
Frequently asked questions
Which type scale ratio should I choose? +
1.2, the minor third, is the default and the safest for general web work. Go tighter with 1.125 for information-dense interfaces where many sizes must coexist. Reach for 1.5 or the 1.618 golden ratio only when you have few sizes and want dramatic headline contrast.
Can I export the scale straight into Tailwind? +
Yes. The Copy Tailwind fontSize block button puts a ready-made fontSize object on your clipboard, each entry pairing a rem value with its calculated lineHeight. The Copy CSS custom properties button instead emits a :root block using whatever variable prefix you have set.
How is the suggested line-height calculated? +
It falls as size grows, using 1.7 − 0.1 × (step + 5) clamped into a 1.05 to 1.7 range. The smallest step receives 1.7 and the largest steps bottom out at 1.05. Treat it as a starting point and adjust once you know your real line length.
Why do the rem and em columns show different numbers? +
rem always divides the pixel size by 16, the browser default root size, while em divides by whichever base you entered. With a 16 px base the two columns are identical; set the base to 18 and they diverge at every step of the scale.
How do I get more than ten sizes out of it? +
You cannot from this tool, which always outputs the same fixed ten steps from −5 to +4. To extend the range, multiply the largest value by the ratio again yourself, or lower the base size and shift which portion of the scale you use.
Why a ratio rather than a list of sizes
A modular scale multiplies a base size repeatedly by a fixed ratio, so every step relates to every other by the same proportion. The named ratios are musical and classical intervals — 1.125 the major second, 1.2 the minor third, 1.25 the major third, 1.333 the perfect fourth, 1.414 the augmented fourth — which is where the convention comes from rather than from any evidence about legibility.
The practical benefit is consistency and decision economy: sizes chosen individually drift and end up nearly-but-not-quite matching, which reads as sloppy without being identifiable.
Choosing a ratio, and where scales break
Small ratios like 1.125 produce gentle hierarchy suited to dense text-heavy interfaces. Large ones like 1.414 produce dramatic contrast that works for marketing pages and becomes unusable in a UI, because four or five steps up from a 16 px base is enormous.
Scales generated by pure ratio also produce awkward fractional values, and rounding them is normal — the proportional relationship survives rounding to whole pixels perfectly well.
The bigger limitation is that one scale rarely serves every viewport. Large display sizes need to compress on small screens far more than body text does, which is why responsive type usually means two scales or a fluid interpolation rather than one set of fixed steps.
