Use the free Spacing Scale Visualizer below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why spacing should be a system, not a guess
Open any polished website and inspect the gaps: the space between a heading and a paragraph, between cards in a grid, between a button and the text below it. Those gaps are not random. They come from a small set of values used again and again, such as 8, 16, 24 and 32 pixels. When spacing follows a scale, the page feels consistent and calm. When every gap is a one-off guess, the page feels subtly uneven, even if the visitor cannot say why.
The Spacing Scale Visualizer above turns that idea into something you can see. Pick a base unit, choose how many steps you want, and pick a pattern. Each step renders as a visible bar with its pixel value, and the tool outputs CSS variables you can copy into your project. Instead of debating whether a gap should be 13 or 17 pixels, your team picks a step from the scale.
How to build a spacing scale
Start with a base unit. Four pixels is the most common base in modern design systems, because it divides cleanly into the screen grid and scales well. Eight pixels is also popular, especially for larger interfaces where a four-pixel step feels too fine. Enter your base, then choose the pattern. Multiples give an even ladder: with a base of four, the steps are 4, 8, 12, 16, 20, 24, 28 and 32. Doubling gives a faster-growing ladder: 4, 8, 16, 32, 64, which suits layouts that need dramatic differences between small details and large sections.
Multiples suit most projects, because the steps are close enough for fine control. Doubling suits marketing pages and presentations, where section gaps should dwarf component gaps. Either way, the rule is the same: use only steps from the scale, never an arbitrary value in between. If a gap feels wrong, move one whole step up or down instead of nudging by two pixels.
How to use the scale in practice
Assign roles to steps. Small steps, such as step one and two, suit gaps inside components: between an icon and its label, or between a checkbox and its text. Middle steps suit gaps between components: between cards, or between a heading and the paragraph under it. Large steps suit gaps between sections: between the hero and the features, or between the article and the footer. When roles are consistent, a visitor learns the rhythm of the page without thinking about it.
The CSS variables make this easy in code. Instead of writing padding values by hand, write padding with a variable, such as var(–space-3). If the design later needs larger spacing overall, change the base unit once and every gap updates together. That single change is the difference between a system and a collection of guesses.
Common spacing mistakes
The most common mistake is using too many different values. A page with gaps of 10, 13, 17, 22 and 31 pixels has no rhythm, and no developer can maintain it. Another mistake is spacing that is too tight everywhere, which makes a page feel cramped and hard to scan. White space is not wasted space: it separates ideas so the eye can parse them. A third mistake is inconsistent vertical rhythm, where section gaps vary randomly instead of following the scale.
Mobile spacing deserves special attention. Touch targets need at least 8 pixels of breathing room, and section gaps that look generous on desktop can feel enormous on a phone. Many teams use the same scale but shift down one step on small screens, which keeps the rhythm while saving vertical space.
Frequently asked questions
What base unit should I choose? Four pixels for most web and app projects, eight pixels for simpler or larger interfaces. The key is consistency, not the specific number.
How many steps do I need? Eight steps cover most projects, from tiny internal gaps to large section breaks. Fewer than five feels limiting, more than twelve becomes hard to remember.
Can I mix multiples and doubling? It is better to pick one pattern per project. Mixing patterns reintroduces the randomness the scale exists to remove.
Pingback: Visualizador de Escalas de Espaciado - Espacios Consistentes Siempre