UI Spacing Calculator
Generate consistent spacing and typography scales based on a base size and ratio.
Last reviewed by the Radiatus Cloud team
| Step | Variable | REM | Pixels | Preview (Width) |
|---|
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Build a spacing and type scale
Consistent spacing is what quietly separates a polished interface from a sloppy one, and the reliable way to achieve it is a scale: a set of sizes derived from a base value by a fixed ratio, rather than a pile of arbitrary pixel numbers. This generator produces both a spacing and a typography scale from a base size and a ratio you choose, so every gap and font size in your design flows from one coherent system instead of a series of one-off decisions.
Why a ratio-based scale works
Choosing sizes at random gives an interface with subtly inconsistent gaps that read as untidy without anyone being able to say exactly why. A scale multiplies a base size by a ratio repeatedly, producing a sequence of sizes that relate to one another harmoniously, the very same principle that underlies musical intervals. Because every single value derives from just two numbers, the base and the ratio, the whole system stays perfectly consistent and is trivial to adjust later by changing one of them.
One system, every size
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is a spacing scale?
A set of spacing and font sizes derived from a base value by multiplying by a ratio, so every size relates to the others harmoniously rather than being chosen at random.
Why use a scale instead of arbitrary values?
Because arbitrary sizes read as subtly inconsistent. A scale makes gaps and type sizes relate to one another, which is what makes an interface look considered.
What does the ratio control?
How quickly the sizes grow. A larger ratio gives more dramatic jumps between steps; a smaller one gives a gentler progression.
Does it cover typography too?
Yes. The same scale produces font sizes, so spacing and type share one consistent system.
Is my input uploaded?
No. The generator runs entirely in your browser.
Privacy & Security
Calculated locally.
About This Tool
This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.