Modular scale calculator
Typographic sizes from a base and a ratio, with a table of steps.
Fill in the fields and the result will appear here automatically.
A modular scale produces type sizes by multiplication rather than by eye: every step is the previous one multiplied by a fixed ratio, so headings, body text and captions stay in a single relationship no matter how many sizes a design ends up needing. Step zero is the base — normally body text — with positive steps climbing towards headings and negative steps descending to captions and fine print. The ratio does most of the work: 1.2 gives a quiet scale where sizes stay close together, while 1.618 opens gaps wide enough that a heading two steps up is more than twice the body size.
How it works
Formula and logic
Size at step k = B·q^k. Positive base B and q>1 define an ascending scale. Up/down fields are integer counts from 0 to 20, not signed indices. Step zero is included, giving 1+up+down sizes. Negative k divides by q^|k|. The table previews the first 12 steps; the minimum and maximum cover the entire requested scale. All lengths retain the base’s unit.
Example
A base of 16 with a ratio of 1.25 reaches 48.828 five steps up and 10.24 two steps down.
Fields and units
- Base size — length unit
- Scale ratio — 1
- Steps up from the base — steps
- Steps down from the base — steps
How to use
- — Enter the base size — usually the body text size.
- — Choose a ratio: 1.2 for a tight scale, 1.618 for a dramatic one.
- — Enter how many steps you need above the base for headings.
- — Enter how many steps you need below it for captions and fine print.
Method and limitations
- Calculation method
- Formula and logic
- Limitation
- Geometric size scale without automatic typography selection. Twenty steps in either direction is this tool’s limit; px and rem are not converted.
FAQ
Which ratio should I pick?
Ratios between 1.125 and 1.25 keep sizes close and suit dense interfaces. Larger ones — 1.414, 1.5, 1.618 — give strong contrast and work better for editorial layouts with few levels.
Should I round the sizes?
For CSS there is no need: browsers handle fractional pixels and rem values fine. Round only when a design system requires whole numbers, and round the whole scale the same way.
Does the base have to be the body size?
It does not have to be, but it usually should be. Anchoring the scale to the size people read most keeps the rest of the sizes in a defined relationship to it.
Why does the scale grow so fast at the top?
Because it is geometric. Each step multiplies rather than adds, so distances widen as the steps climb — that is the property that keeps the small end finely spaced without cramping the large end.