UI Spacing Scale Calculator

Work out ui spacing scale instantly with clear inputs, formula shown and shareable results.

About UI Spacing Scale Calculator

Each token multiplies the previous by the growth ratio starting from the base unit, producing a geometric spacing scale. A geometric scale keeps the perceived jump between spacing tokens consistent, which is why a 4, 6, 9, 13 scale reads better than 4, 8, 12, 16 at large sizes.

Formula

Spacing scale

token k = base unit x ratio ^ k

Worked example

With the default values below, UI Spacing Scale Calculator returns Largest spacing value of 68.34. Change any input above and every figure here is recalculated in your browser.

Inputs used

Base spacing unitminimum 0.5 px: 4 px
Steps in the scaleaccepts 2–16: 8
Growth ratioaccepts 1.05–3: 1.5

Results

Largest spacing value: 68.34 px
Full spacing scale: 4, 6, 9, 13.5, 20.25, 30.38, 45.56, 68.34 px
Number of tokens: 8
Largest value in rem: 4.271 rem

Step by step

1Values used
2Spacing scale
3Largest spacing value= 68.34 px
4Full spacing scale= 4, 6, 9, 13.5, 20.25, 30.38, 45.56, 68.34 px
5Number of tokens= 8
6Largest value in rem= 4.271 rem

Assumptions and limits

The result is derived only from the 3 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 3 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the UI Spacing Scale figure worked out?

token k = base unit x ratio ^ k. Each token multiplies the previous by the growth ratio starting from the base unit, producing a geometric spacing scale.

Why does this matter?

A geometric scale keeps the perceived jump between spacing tokens consistent, which is why a 4, 6, 9, 13 scale reads better than 4, 8, 12, 16 at large sizes.

What do I need to enter?

Enter base spacing unit, steps in the scale, growth ratio. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.