Spacing Calculator

How to use it

1. Enter the base size in pixels (2 to 32). This is the smallest step of the scale.
2. Pick a ratio from 1 (linear) up to 2. A ratio of 1.5 grows each step by half again.
3. Enter the number of steps (4 to 10). Steps are named 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl and 4xl, smallest first.
4. Choose the output unit: rem (divided by the rem base, 16 by default) or px.
5. Read the table: every step shows its px value, its rem value and a bar for relative size.
6. Copy the :root custom properties from the output card.

Common use cases

• Design token files - generate --space-* variables before building components.
• Padding and margin audits - replace ad hoc values with a short named scale.
• Responsive layouts - keep a small set of steps that also work at larger root font sizes.
• Type and space together - use the same ratio for spacing as for the type scale.
• Teaching modular scale - show how one ratio produces the whole ladder.

Why it stays private

The scale is plain arithmetic in this page: a base size, a ratio and a division. Nothing is uploaded, and the tool works offline.

FAQ

Q: How is each step computed? A: Step n is the base size times the ratio to the power of n, starting from n = 0 for the smallest step. With a base of 4 and a ratio of 1.5 the first steps are 4, 6, 9, 13.5 and 20.25 px, shown with two decimals.

Q: How does the rem conversion work? A: Each pixel value is divided by the rem base, 16 by default. If your root font size differs, change the rem base field and every rem value updates.

Q: Why do some values have decimals? A: The ratio produces fractional pixels, which is normal for spacing tokens. The tool keeps two decimals for px and three for rem. Round further by hand if your system needs whole pixels.

Q: Do the CSS comments match the output unit? A: The comment beside each variable always shows the px value, so you can read the real size even when the output unit is rem.