“Add more white space” is the design advice everyone agrees with and almost nobody understands. New bloggers hear it, look at their site, and shrug because they have no idea what to add or where to add it. The phrase makes white space sound like an ingredient you sprinkle on top.
That’s not what it is. White space is a structural choice. It’s how a design says “these things are related” and “these things are not.” This post explains what white space actually means and how to use it.
White space is not “empty” space
The first confusion: white space isn’t blank. It’s not “missing content.” It’s intentional space that does specific work on the page.
Designers also call this “negative space,” which is more accurate but less common. The space between paragraphs is white space. The margin around a button is white space. The padding inside a card is white space. The gap between sections is white space. Even if your blog has a dark background, the empty parts are still “white space” in the design sense.
What white space actually does
White space does four jobs on a page, all of them invisible when done well and obvious when done badly.
1. It groups related items
Items close together feel related. Items far apart feel separate. This is called the “law of proximity” and it’s how readers parse a page before they read a word. If a heading is closer to the wrong paragraph, the reader gets confused about what the heading covers. Space is what does the grouping.
2. It separates unrelated items
The flip side. When two sections are not related, white space tells the reader so. The space between a post and the comments section, between an article and the footer, between two sidebar widgets — that’s the page saying “these are different things.”
3. It gives the eye somewhere to rest
Dense pages exhaust readers. Comfortable spacing between paragraphs, headings, and images lets the eye take small breaks while reading. Long-form blogs especially need this. A 2000-word article with no breathing room feels twice as long as the same article with proper spacing.
4. It signals quality
Cluttered pages read as cheap. Spacious pages read as deliberate, considered, and trustworthy. Whether or not this is rational, it’s how readers respond. Premium publications use generous white space deliberately to feel premium.
Where white space lives on a blog
To use white space well, you need to know the layers it shows up in. From smallest to largest:
Inside characters and words
Letter spacing and word spacing. Mostly the font does this for you but headings sometimes benefit from a small letter-spacing adjustment.
Between lines
Line height. Body text should have a line height of roughly 1.6 to 1.7x font size. Headings can use tighter line height (1.1 to 1.3) because they’re shorter.
Between paragraphs
Paragraph spacing. Should be roughly equal to one line of body text. Tight paragraph spacing makes posts feel claustrophobic.
Around headings
Space above a heading should be roughly twice the space below. This makes the heading feel like it belongs to the section that follows, not the one before.
Between sections
Larger spacing between major sections of the page. Header to content, content to footer, post to comments. These gaps tell the reader they’ve finished one thing and moved to another.
Around the page
Margins on the edge. On desktop, you don’t want text running edge-to-edge. On mobile, you still want at least 16–20px of breathing room on each side.
The mistakes that look like “I need more white space”
Several different problems all look like a white-space problem from a distance:
- Lines of text running edge to edge. Add side margins, not just paragraph spacing.
- Headings that don’t feel attached to anything. Adjust space above vs below.
- Images and text fighting each other. Add padding around figures.
- Sidebar items running together. Add spacing between widgets.
- Comments crammed under the article. Add a major section gap before the comments block.
- Dense sticky CTAs interrupting reading. Either give them their own space or remove them.
The mistakes that look like “I have too much white space”
The opposite is rarer but exists:
- Single sentences sitting in their own enormous boxes. Looks expensive in screenshots, exhausting to read on real pages.
- Headings floating in space with no clear section underneath.
- Spacing inconsistent across the site. 80px gaps in one place and 20px gaps in another, with no logic. The lack of pattern is the problem, not the size.
The “scale” principle
Good white space uses a consistent scale. Pick a unit (often 8px or 16px) and make all your spacing multiples of it. 8, 16, 24, 32, 48, 64. Don’t have one element with 19px padding and another with 23px. The eye picks up on the inconsistency even if it can’t name it.
Most modern themes ship with a spacing scale built in. Don’t fight it. Use the scale.
How to test your white space
Two quick tests:
- Squint at the page. You should still be able to see the rough structure: header, content, sidebar, footer. If everything blurs into one block, you have a white-space problem.
- Print a blog post to PDF and look at it. Print exposes spacing problems instantly. Cramped paragraphs, awkward heading spacing, edge-to-edge text — all become obvious.
How themes handle this
Most of your white space is determined by your theme’s defaults: line heights, paragraph spacing, section padding, container widths. A theme with thoughtful defaults makes the whole question disappear. A theme with cramped defaults forces you to fight CSS forever.
When evaluating a theme, look at how their demo handles spacing in long-form posts. Generous? Cramped? Mixed? That tells you a lot about whether the theme will fight you or work with you.
The short version
White space isn’t empty. It groups related items, separates unrelated ones, gives the eye places to rest, and signals quality. It shows up at every scale from letter spacing to page margins. Use a consistent scale across the site. Don’t think of it as a flourish to add. Think of it as the structure that makes the rest of the design legible.
