Modular Scale Generator
Pick a base size and a ratio — φ by default — and get a full range of proportionally related sizes for type or layout.
Scale
| Step | Size (px) | Size (rem, 16px root) |
|---|---|---|
| -2 | 6.11 | 0.382rem |
| -1 | 9.89 | 0.618rem |
| 0 (base) | 16 | 1.000rem |
| 1 | 25.89 | 1.618rem |
| 2 | 41.89 | 2.618rem |
| 3 | 67.77 | 4.236rem |
| 4 | 109.66 | 6.854rem |
| 5 | 177.42 | 11.089rem |
One ratio, every size on the page
Instead of picking heading sizes by feel — 16px body, 24px subhead, 32px heading, and hoping they look related — a modular scale generates every size from one base number and one ratio. Because each step is a power of the same ratio, any two sizes on the scale relate to each other exactly the way any other two do, which is what makes a page built on a scale feel coherent even before you can say why.
Try switching the ratio between φ (≈1.618) and something closer to 1.25 to see how much the “steepness” of the visual hierarchy changes with the same base size.
Frequently Asked Questions
What is a modular scale?
A modular scale is a sequence of sizes generated by repeatedly multiplying (or dividing) a base value by a fixed ratio: size(step) = base × ratio^step. It gives every size on the page — headings, body text, spacing, image widths — a consistent mathematical relationship instead of arbitrary jumps, which is why type systems and grid systems both lean on it.
Why use φ (the golden ratio) as the ratio?
φ ≈ 1.618 produces a scale that grows quickly enough to create clear visual hierarchy between steps, without the extreme jumps a larger ratio (like 2 or 3) produces. It's a popular default for exactly that reason, but it's a design choice, not a law — musical-interval ratios like 1.25 (major third) or 1.333 (perfect fourth) are common alternatives for a gentler scale.
How do I use the negative steps?
Negative steps divide the base size instead of multiplying it, giving you smaller sizes for captions, footnotes, or fine print that still sit on the same scale as your headings. Step 0 is always exactly your base size, unrounded.
Can I use this for spacing instead of font sizes?
Yes — the underlying math doesn't know or care whether the base is a font size, a spacing unit, or an image width. Many design systems reuse the same scale for both type and spacing so the whole layout shares one rhythm.
Educational design tool. A pleasant-looking scale still depends on your typeface, content, and layout — treat the generated numbers as a well-reasoned starting point, not a rule.