Type Scale Generator

A type scale is one base size multiplied by a ratio, stepped up for headings and down for captions. The arithmetic is trivial and gets done wrong constantly, in one specific way: people compute each step from the one before it and round as they go, so by the fifth heading the size is no longer on the scale at all. Every step here is computed from the base and the exponent directly, so rounding one step cannot move any other.

Base size

Your body text size. Everything else is derived from it.

Ratio

Steps up

Headings and display sizes above the body size.

Steps down

Captions and fine print below the body size.

Rounding

Unit

Major third: The 5:4 musical interval, 1.25 exactly.

Your scale will appear here.

What this generator does

Computes the ramp and shows its working. The layout grid generator on this site does the horizontal arithmetic — columns, gutters, margins; this does the vertical. It shows both the exact value and the rounded one for every step, so you can see what rounding cost you, and it warns when the ratio is small enough that two neighbouring steps have collapsed onto the same number, which stops it being a scale at all.

How to use this tool

Set your body text size as the base.
Pick a ratio — larger ratios give more dramatic headings.
Set how many steps up and down you need, and how to round.
Copy the CSS custom properties straight into a stylesheet.

Understanding the controls

Base size: Your body text size. Everything else is derived from it, so this is the one number that genuinely matters.
Ratio: Nine named ratios, each with its source: the musical intervals, √2 (the A4-to-A3 paper ratio) and the golden ratio. Smaller ratios give subtle scales that need more steps; larger ones get dramatic quickly.
Steps up and down: How many heading sizes above the base and how many small sizes below it.
Rounding: Whole numbers, halves, quarters or exact. Whole numbers are the usual choice for pixels; with a small ratio they can collapse two steps together, which the page flags rather than shipping.
Unit: px, rem or pt. It only affects the exported CSS — the arithmetic is the same.

Worked examples

16px, major third (1.25): 16, 20, 25, 31, 39, 49 — step 5 is exactly 16 × 1.25⁵.
16px, perfect fourth (1.333): A more dramatic ramp reaching about 67 by step 5.
8px base, minor second (1.067): Flagged — whole-number rounding collapses neighbouring steps.
Exported CSS: Custom properties named by step, ready to paste.

Common use cases

Setting up the type scale for a new design system
Checking whether an existing set of sizes is actually a scale
Choosing between ratios with a live preview at each size
Producing CSS custom properties without doing the maths by hand
Teaching why a modular scale looks more coherent than chosen sizes

How this generator works

Each step is the base multiplied by the ratio raised to that step's number, computed from the exponent every time. That is the whole design decision: iterative multiplication accumulates rounding error, so a scale built step-by-step drifts away from the ratio it claims. The finished scale is checked before display — every step re-derived from the base, the exact ramp confirmed to rise, and any two steps rounding to the same value reported as a collapse.

Randomness and fairness

Nothing here is random. The same base, ratio and rounding always give the same scale, which is what makes it safe to put in a design system.

For how randomness is produced across the whole site, see how Generate Random works.

Assumptions this tool makes

A single ratio applies across the whole ramp, which is what makes it a modular scale.

Limitations and good to know

It produces sizes only. Line height, letter spacing and weight are not part of a modular scale and are not generated.
A single ratio applied everywhere is a starting point; most real systems break the scale somewhere deliberately.
It has no view on accessibility — check your body size and contrast separately, because a scale says nothing about legibility.
Responsive scales that change ratio at breakpoints are not modelled; generate one per breakpoint.

Common mistakes

Computing each size from the one before it: That is exactly the drift this avoids. Every step should come from the base and the exponent, which is why both columns are shown.
Choosing a large ratio and then needing eight headings: At 1.5 the sixth step is over eleven times the base. Fewer, larger jumps or a smaller ratio — not both.
Ignoring a collapse warning: If two steps round to the same number they are not two steps. Use finer rounding or a bigger ratio.

Practical tips

Pick the ratio by looking at the preview column rather than by name — 1.25 and 1.333 read very differently in practice.
Generate more steps than you need and delete the ends; it is easier than rebuilding.
Keep the exact column somewhere — it is what lets somebody else check the scale later.

Privacy and your data

Everything is computed in your browser from the numbers you set. There is nothing to upload, nothing is stored between visits, and no settings are written into the page address. Analytics records only that the tool was used.

Frequently asked questions

Which ratio should I use?: Smaller ratios like 1.125 or 1.2 suit text-heavy interfaces where headings should not shout. Larger ones like 1.414 or 1.618 suit editorial and marketing pages. The preview column is more useful than the names.
Why show the exact value as well as the rounded one?: So you can see what rounding cost, and so anybody checking the scale later can confirm the sizes really are base × ratio to a power rather than numbers somebody liked.
Should line height come from the same scale?: Usually not. Line height is a ratio of the font size rather than a step on the size ramp, and tying them together tends to give unreadable results at the extremes.