7 Spacing Rules Most Designers Ignore (With Visual Examples)

Original carousel by @lubosvolkov, follow for more design rules and visual breakdowns.

---

Spacing is the invisible architecture of good design. You don't notice it when it's right, but when it's wrong, your layout feels off in a way you can't quite name. The difference between an amateur UI and a professional one often comes down to spacing, not color, not typography, not the choice of icons.

Here are 7 spacing rules that most designers either don't know or consistently ignore. Each one is a quick upgrade to any interface.

Rule 1: Use a Base-8 Spacing System

Pick a base unit, 8 pixels, and derive all your spacing from it. 8px, 16px, 24px, 32px, 48px, 64px. This creates a rhythm that feels intentional and harmonious rather than arbitrary.

Why 8? Because most screen resolutions divide evenly by 8, so your spacing aligns with pixel grids perfectly. No half-pixel rendering issues, no blurry edges. It also scales naturally: what works at 8px works proportionally at 16px, 32px, and beyond.

Rule 2: Group Related Elements Closely

Elements that belong together should be closer to each other than to elements they don't relate to. This is Gestalt's principle of proximity in action. A label and its input field should have tighter spacing than two separate form fields.

The pattern: related groups use 8-16px internal spacing, while groups are separated by 24-32px. The visual hierarchy flows from the grouping, not from borders or backgrounds.

Rule 3: The 3x Rule for Section Separation

If your base spacing within a section is 16px, the spacing between sections should be at least 3x that, 48px or more. This creates clear visual breaks between content areas without needing dividers or borders.

The multiplier forces sections to feel like distinct blocks rather than a continuous stream of content. It's the difference between reading a well-structured document and a wall of text with no paragraph breaks.

Rule 4: Consistent Card Padding

Every card in your interface should have the same internal padding. If one card uses 24px padding and another uses 20px, the inconsistency is subtle but noticeable, it makes the layout feel slightly unstable.

Choose one padding value (24px is a good default for desktop, 16px for mobile) and apply it to every card, panel, and container. The internal spacing within the card then follows its own 8px grid.

Rule 5: Touch Targets Need Space

Interactive elements on mobile need at least 44x44pt of tappable area (Apple's guideline) or 48x48dp (Google's guideline). But equally important: the spacing between adjacent touch targets should be at least 8px to prevent accidental taps.

A button that's too close to another button isn't just a usability problem, it makes the interface feel cramped and unsafe. Users hesitate because they're not sure they'll tap the right thing.

Rule 6: Text Spacing Follows Line Height Rules

Line height for body text should be 1.5x the font size. For headings, 1.2-1.3x. Paragraph spacing above should be equal to the text size, and spacing below should be 0.5x the text size. This creates a natural reading rhythm.

The most common mistake: tight line heights on body text. When lines are too close together, reading speed drops and comprehension suffers. Give your text room to breathe and the entire interface feels more relaxed.

Rule 7: Whitespace Is Not Wasted Space

The most ignored rule of all: whitespace is a design element, not empty space that needs to be filled. Generous whitespace around your most important content draws the eye there. It creates focus.

Apple's product pages use enormous whitespace. Not because they have nothing to say, but because the whitespace communicates confidence and premium quality. The absence of clutter is itself a design statement.

The Quick Spacing Checklist

Before shipping any UI, run through this checklist:

• [ ] All spacing uses multiples of 8
• [ ] Related elements are grouped closely
• [ ] Sections are separated by 3x the internal spacing
• [ ] Card padding is consistent across the entire interface
• [ ] Touch targets are at least 44pt with 8px gaps between them
• [ ] Body text line height is 1.5x font size
• [ ] Important content has generous whitespace around it

If you hit all seven, your spacing will be better than 90% of interfaces out there. Not because these rules are exotic, they're not. But because most designers apply them inconsistently.

The best spacing system is the one you actually follow.

Want to build your own design tool or web app? Try Base44, turn your ideas into working apps without writing code.

---

Original carousel by @lubosvolkov on Instagram. View the original post.