Spacing Scale Generator
Pick a base unit and how many steps you need to generate a consistent spacing scale, linear or geometric, with every value in px and rem.
Linear spacing scale
| Step | px | rem | Preview |
|---|---|---|---|
| 1 | 8px | 0.5rem | |
| 2 | 16px | 1rem | |
| 3 | 24px | 1.5rem | |
| 4 | 32px | 2rem | |
| 5 | 40px | 2.5rem | |
| 6 | 48px | 3rem |
Consistent spacing is what makes a layout feel calm
Much of what reads as “polished” in an interface is really just consistent spacing. When every gap is a multiple of the same base unit, elements line up on an invisible grid and the eye can rest. When spacing is chosen ad hoc — 13px here, 18px there — the layout feels subtly noisy even when nothing is obviously wrong.
Generate a scale from a single base unit, give each step a token name in your system, and reach for those tokens instead of raw numbers. The rem column keeps the whole scale responsive to the user’s font-size settings.
Frequently Asked Questions
What is a spacing scale?
It is a fixed set of spacing values used for every margin, padding, and gap in an interface, instead of arbitrary one-off numbers. Basing all spacing on a scale keeps rhythm consistent and makes layouts predictable across a whole product.
Should I use a 4px or 8px base unit?
Both are common. An 8px base (8, 16, 24, 32…) keeps the scale simple and is widely used in design systems. A 4px base gives finer control for tight components while still aligning to a grid. Many teams use 4px as the base unit but lean on the 8px multiples for most layout spacing.
What is the difference between a linear and geometric scale?
With a multiplier of 1 the scale is linear: base, 2×base, 3×base, and so on (8, 16, 24, 32). With a multiplier above 1 it is geometric: base, base×multiplier, base×multiplier² (with a base of 4 and multiplier of 2 that gives 4, 8, 16, 32, 64). Linear scales offer evenly spaced options; geometric scales grow quickly and suit large layout gaps.
How is each step calculated?
For a linear scale, step n equals base × n. For a geometric scale, step n equals base × multiplier^(n−1). The rem column divides each px value by a 16px root, so an 8px step becomes 0.5rem.
How many spacing steps should a system have?
Usually six to nine. Too few and you cannot express tight versus generous spacing; too many and the scale stops constraining anything. A compact, well-labelled set — often mapped to tokens like space-1, space-2, and so on — is easier for a team to apply consistently.
This is a helper that gives estimates — verify against your design system and how the spacing looks in your real layouts before adopting the scale.