White space

What is white space?

White space, also called negative space, is the empty area around and between the elements of a layout: margins, padding, the gaps between paragraphs, lines and images. It does not have to be white. Any area left free of content counts, whatever its colour or background. Used well, white space makes a page easier to read, directs attention to what matters and gives a brand a calm, confident look.

Many beginners treat empty space as wasted space and fill it. Experienced designers do the opposite: they plan it as carefully as the content, because it is one of the strongest tools of visual hierarchy.

Micro and macro white space

Designers distinguish two scales, and both need attention.

• Micro white space: the small gaps inside a component, such as letter spacing, line height, the space between a label and a field, or the padding inside a button. It drives legibility.
• Macro white space: the larger gaps between sections, columns and blocks, such as the margin around a hero or the space between two page sections. It drives structure and rhythm.

In CSS, both are controlled with properties like margin, padding, gap and line-height. A simple spacing scale keeps them consistent:

:root {
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 5rem;
}
.section { padding-block: var(--space-xl); }
p { line-height: 1.6; margin-bottom: var(--space-m); }

Why white space matters

• Readability: comfortable line height and margins make long text easier to scan and understand.
• Focus: space around a button or headline isolates it and makes it stand out without extra colour or size.
• Grouping: elements placed close together read as related, which supports clear navigation and forms.
• Perceived quality: premium and editorial brands rely on generous space to signal clarity and confidence.
• Lower cognitive load: fewer competing elements mean visitors decide faster.

White space versus clutter

More space is not always better. Data-heavy interfaces need compact spacing so users can compare values without scrolling. The goal is purposeful space, not maximum space.

Best practices and common mistakes

• Use a consistent spacing scale, for example multiples of 8px, rather than arbitrary values.
• Keep line height around 1.4 to 1.7 for body text and limit line length to roughly 60 to 80 characters.
• Give related items less space between them than unrelated ones.
• Increase section spacing on large screens and tighten it on mobile, where every pixel counts. A grid system makes this predictable.
• Do not fill empty areas just because they look empty. Remove an element before adding a decoration.
• Avoid trapped white space, such as awkward holes between columns, that breaks the flow of the page.

White space, UX and conversion

White space affects how fast people understand a page. Around a call to action or inside a hero section, it removes distraction and sharpens the message. It also supports typography, since good spacing is what makes a type scale feel balanced. Together these effects improve UX design and usually help conversion on a landing page.

White space at BeBranded

At BeBranded, we define spacing as part of the design system from the first wireframe: a spacing scale, section rhythm and component padding that stay consistent from page to page. We test layouts on real devices to make sure the space works on mobile as well as desktop. It is a core principle of our design service, where clarity comes before decoration.