← Go Back

White Space

What is white space?

White space (negative space) is the empty area between and around design elements. It doesn’t have to be white; it’s the absence of content. Used well, it gives layout breathing room, supports hierarchy, and improves readability and usability.

Use it when: you’re designing layout, typography, or UI. Consistent spacing (margins, padding, line height) makes screens easier to scan and use.

Copy/paste checklist

  • [ ] Between sections – More space between major sections than within them (e.g. margin-bottom on section blocks).
  • [ ] Around primary elements – Give the main message or CTA room so it stands out. See hierarchy.
  • [ ] Within text – Line height (e.g. 1.4–1.6 for body); paragraph spacing so blocks don’t merge. See typography.
  • [ ] Touch targets – Enough space between interactive elements (e.g. 44×44px minimum) so they’re tappable. See accessibility.
  • [ ] Consistent scale – Use a spacing scale (e.g. 4px, 8px, 16px, 24px) from your design system so spacing is consistent.

Why white space matters

  • Reduces crowding so users can focus and scan.
  • Supports hierarchy by grouping related items and separating unrelated ones.
  • Improves readability through line and paragraph spacing.
  • Makes UI feel intentional and easier to use; cluttered layouts increase cognitive load.

What good use of white space includes

Checklist

  • [ ] Consistent scale – Spacing uses a defined scale (e.g. 4/8/16/24/32px) so it’s repeatable. See design system.
  • [ ] More space between groups – Space between related items (e.g. label and input) less than space between groups (e.g. form sections).
  • [ ] Room for primary content – The main message or action isn’t squeezed; it has visual weight. See hierarchy.
  • [ ] Readable text – Line height and paragraph spacing support typography and readability.
  • [ ] Not “wasted” – White space is intentional (grouping, emphasis, rest), not leftover. But don’t fill it just because it’s empty.

Common formats

  • Macro: Large gaps between major areas (e.g. header, main, footer). Use for page structure.
  • Micro: Small gaps (e.g. between icon and label, between lines). Use for typography and component internals.
  • Spacing scale: Tokens like space-1 (4px), space-2 (8px), etc. Use so design system and code stay consistent.

Examples

Example (the realistic one)

Page layout: 24px margin between header and main; 16px between main sections; 8px between a label and its input. Body text: Line height 1.5; 16px margin between paragraphs. Primary CTA: 24px margin above and below so it’s clearly the main action. Buttons: 8px gap between icon and label inside the button; 16px between adjacent buttons. You use the same scale (8, 16, 24) across the product so spacing feels consistent. See design system and hierarchy.

Common pitfalls

  • Too little space: Everything cramped; hard to scan and tap. → Do this instead: Increase spacing between sections and around primary elements; use a spacing scale.
  • Inconsistent spacing: Random 7px, 13px, 19px. → Do this instead: Pick a scale (e.g. 4n) and use it everywhere.
  • Filling every gap: “We must use the space.” → Do this instead: White space is part of the design; it improves focus and readability.
  • Ignoring touch targets: Buttons or links too close together on mobile. → Do this instead: Keep minimum 44×44px and enough gap between tappable elements. See accessibility.
  • White space vs hierarchy: Hierarchy is the order of importance; white space is one way to create it (grouping and separation).
  • White space vs layout: Layout is the arrangement of elements; white space is the empty area that defines and separates them.
  • White space vs typography: Typography includes line height and paragraph spacing; that’s white space within text.
  • Hierarchy – white space reinforces grouping and emphasis.
  • Typography – line height and paragraph spacing.
  • UI design – spacing is part of UI clarity.
  • Design systems – spacing scale and tokens.
  • Wireframe – wireframes should show spacing, not only structure.
  • Accessibility – adequate spacing for touch and focus.

Next step

Pick one screen and apply a simple spacing scale (e.g. 8, 16, 24px). Increase space between sections and around the primary CTA; ensure line height and paragraph spacing support readability. Compare before/after with your team. Add spacing tokens to your design system if you have one.

Related Terms