Removing things from a webpage almost always improves it. That’s a hard truth for anyone who has spent weeks writing copy or designing features — but the evidence behind it is consistent enough to treat as a rule.
Why More Content Does Not Equal More Value
Every element you add to a page competes with every other element for the visitor’s attention. When everything competes equally, nothing wins. The cognitive load — the mental energy required to parse the page — climbs with each added element. At some threshold, visitors stop processing and leave.
This is the paradox of crowded web design: removing things often increases conversions because it removes the competition for attention. When there is only one thing to look at, people look at it. When there are twelve things to look at with equal visual weight, people look at nothing in particular and eventually close the tab.
White space is the design tool that controls this. It is not decoration. It is not padding to fill a gap. It is the deliberate separation of elements that forces the eye to move in a controlled sequence — from headline to subheadline to CTA to trust signal — rather than scanning chaotically across a cluttered canvas.
Macro vs. Micro White Space
There are two distinct types of white space, and they operate at completely different scales. Confusing them is why many designers apply one correctly and completely neglect the other.
Macro White Space
Macro white space is the breathing room between major page sections — the gap between the navigation and the hero, between the services section and the testimonials, between the last content block and the footer. It controls the rhythmic cadence of the entire page.
Desktop benchmarks: 80–120px vertical padding between major sections. Use the lower end (80px) for pages with many sections; the upper end (120px) for pages that want maximum impact and a minimal content load.
Mobile benchmarks: 48–64px. Mobile users are already in a condensed environment — but the proportional breathing room still matters. Dropping to 32px or below on mobile is where pages start feeling claustrophobic.
Navigation to hero gap: This is often where the most macro white space is sacrificed. Premium sites let the hero breathe above the headline — 40–60px from the nav bottom to the headline start on desktop is intentional, not wasteful.
Micro White Space
Micro white space is everything at the detail level: the space between a letter and its neighbour, between a line of text and the next, between the text inside a button and the button’s edge, between a card’s content and the card’s border.
These are the decisions that separate refined, premium-feeling design from something that just looks like it was assembled quickly.
Line height (body text): 1.5–1.7. Not 1.0, not 1.2 — both are cramped enough to visibly slow reading. 1.6 is an excellent default for most body text at 16–18px.
Line height (headings): 1.1–1.3. Display headings are intentionally tighter. A 48px heading with line-height 1.5 looks like it has a dangerous gap between lines.
Card internal padding: 20–32px on all sides. Cards with 8–12px internal padding feel like the content is escaping the container.
Button padding: At minimum — 12px top and bottom, 24px left and right. Buttons with insufficient padding look like they were built in 2009.
Paragraph spacing: 1em between paragraphs as a minimum. No paragraph spacing is a readability failure, not a space-saving feature.
Why Crowded Websites Signal Low-End Brands
This pattern is consistent enough to count as a design law: high-end brands use aggressive white space; discount/mass-market brands pack content tightly.
This is not coincidence. It is a psychological signal operating below conscious awareness.
Dense, packed layouts communicate abundance and affordability — “look how much you get.” Spacious layouts communicate scarcity and precision — “we chose carefully what to show you.” When a business positions as premium but builds a crowded website, the two signals contradict each other. The visual execution cancels out the pricing claim.
Look at Tokopedia’s flash sale pages. Items are packed into a grid so tight that visual hierarchy disappears. Prices are large and bold. Everything competes. The message is: deals, volume, low price. That design is doing its job for that positioning.
Now look at a premium dermatology clinic or a high-end architecture firm. Single full-screen images. Generous spacing. Typography that breathes. The visual message is the opposite: craft, selectivity, premium pricing. If either of those businesses put their content through a Tokopedia-style grid, they would undermine their own brand positioning within the first three seconds of someone visiting.
Premium Benchmarks to Study
Apple.com
Apple applies white space more aggressively than almost any other major brand. Product pages use 120px+ padding between sections consistently. Key claims — a single sentence, sometimes a single word — are isolated in the centre of a viewport-height section. Nothing appears alongside the key claim that could compete with it. The effect is that every statement reads with the weight of an announcement.
Their product images float on white backgrounds with 60–80px of clearance on all sides. The isolation is the point — it says this object is worth examining on its own terms.
Aesop.com
Aesop uses an asymmetric, editorial approach. Text blocks with line-height around 1.8, wider than typical line lengths (65–75 characters), wide left and right margins even on desktop, and section breaks that are generous enough to feel like page turns rather than scrolls. Their spacing communicates slow, considered, artisanal — which maps exactly to their brand positioning and price point.
Notion.so
Notion’s marketing site demonstrates that white space works equally well for software products, not just luxury goods. Their homepage uses 128px section padding, centered content with a narrow max-width (~680px for text blocks), and no competing elements alongside the primary claims. Every section communicates one idea. The result is a site that feels more confident and resolved than competitors with busier pages.
Building a Practical Spacing System
The way to eliminate arbitrary spacing decisions is to define your scale in advance and commit to it. Using 8px as the base unit — which aligns with most screen rendering grids — build the following scale:
| Step | Value | Typical Use |
|---|---|---|
| 1 | 4px | Icon-to-label gaps, tight list items |
| 2 | 8px | Input field internal padding, small gaps |
| 3 | 16px | Inline element spacing |
| 4 | 24px | Card sub-element spacing |
| 5 | 32px | Card internal padding (compact) |
| 6 | 48px | Card internal padding (premium), mobile section gap |
| 7 | 64px | Small desktop section padding |
| 8 | 96px | Standard desktop section padding |
| 9 | 128px | Hero and premium desktop section padding |
Once this scale is defined in your design system or CSS custom properties, you never type a spacing value that isn’t on it. The result is a page where every space has the same rhythm — visitors don’t consciously notice it, but they feel that the design is resolved and intentional.
In CSS, this translates cleanly to:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
}Every spacing decision in your CSS references these variables. No magic numbers.
Line Height and Letter Spacing — The Invisible Premium
Typography micro-spacing is where most web designers miss points on premium feel, because it’s invisible until it’s wrong.
Letter spacing on headings: Tighten it. Large display text (36px+) benefits from letter-spacing between -0.02em and -0.04em. This is counterintuitive — most people assume more spacing is always more refined. But for display text, tighter tracking produces visual weight and deliberateness. Body text: stay at 0 or +0.01em.
Line height interaction with font size: A useful formula — as font size increases, reduce line-height. Body at 16px → line-height 1.6. Subheadlines at 24px → line-height 1.4. Display headings at 48px → line-height 1.15. Apply this as a gradient and you get natural rhythm throughout the type scale.
Paragraph width (line length): Target 60–75 characters per line. Too narrow (under 45 chars) creates choppy reading. Too wide (over 85 chars) makes eyes lose their place on return. This is a forgotten micro-white-space decision — the left and right margins on your content container directly control line length.
Answering the “But We Have a Lot to Say” Objection
The most common pushback when introducing more white space: “Our product has 14 features and we can’t cut any of them — there isn’t room for white space.”
White space is not about hiding content. It is about sequencing it.
The solution is triage: what content does a visitor need in order to decide to contact you? That content goes above the fold and gets the white space treatment. Everything else goes lower on the page, or moves to dedicated secondary pages.
A focused page with three clearly communicated points and room to breathe will consistently outperform a page with fourteen points at war with each other. This is not a hypothesis — A/B test data from CRO agencies like CXL and Baymard consistently show that reducing competing elements improves conversion rates.
The business owner who insists on showing every feature on the homepage is optimising for their own comfort (everything is there) rather than the visitor’s experience (only what matters is visible).
White Space Audit Checklist
Use this to audit any existing page against minimum premium standards:
- Section padding is 80px+ on desktop and 48px+ on mobile between major content blocks
- Body text has line-height between 1.5 and 1.7
- Headings have line-height between 1.1 and 1.3
- All spacing values are multiples of 8px — no arbitrary values
- Cards have at least 24px internal padding on all sides
- Primary CTA buttons have at minimum 12px vertical and 24px horizontal padding
- Line length is between 60–75 characters for body text blocks
- No section has more than one primary focal point competing for attention at the same visual weight
Want a spacing and layout audit of your website? Free consultation →
References
- Nielsen Norman Group — “Whitespace in Web Design: What It Is and How to Use It” — https://www.nngroup.com/articles/use-of-white-space/
- Baymard Institute — Reducing Cognitive Load (reference only)
- CXL Institute — How White Space Affects Conversion (reference only)
- Smashing Magazine — The Use of White Space in Typography (reference only)
- Google Web Fundamentals — “Typography and Readability” — https://web.dev/learn/design/typography/
White Space and Layout — Common Questions
Won't white space make my website look unfinished or half-empty?
No — and this is the most common misconception designers face when presenting to clients. White space signals confidence. It tells the visitor: we are so sure of our offer that we don't need to crowd every pixel to sell it. Apple's website has had extensive white space for 20 years and no one calls it unfinished. The brands that fill every pixel are usually the ones that don't trust their own value proposition.
How much section padding should I use on desktop vs. mobile?
On desktop, 80–120px vertical padding between major sections is the standard for a premium feel. On mobile, drop to 48–64px. Going below these numbers is where pages start feeling cramped. Going well above them (160px+) can make a page feel sparse unless you have strong visual anchors in those sections. The safe starting point: 96px desktop, 56px mobile.
What's the base unit I should use for a spacing system?
8px is the near-universal standard, and for good reason — most screens render at multiples of 8 cleanly. Build your full scale from it: 4, 8, 16, 24, 32, 48, 64, 96, 128px. If you find yourself typing '27px' or '43px' as a spacing value, stop — that's a red flag. Every spacing decision should be a named step on your scale, not an arbitrary pixel value.
How do I convince a client to use more white space when they want to add more content?
Show them a before/after, but more importantly, reframe the conversation. White space is not about hiding content — it's about sequencing it. Non-critical content doesn't get deleted; it gets moved lower on the page or to secondary pages. Then show them data: NNGroup research consistently shows that increasing line spacing and margins improves reading speed and comprehension. More readable pages produce more enquiries.