The Dark Art of White Space
I once redesigned a site where the only change I made was increasing the padding. Same content. Same images. Same fonts. Same colours. I added space between sections, space around text, space between the navigation items, space between the footer columns. Nothing was moved, added, or removed. The client's reaction: "It looks like a completely different website. It looks expensive now."
That's white space. The most powerful design tool you have, and the one that costs literally nothing to use. It's also the one clients fight you on hardest, because it looks like you're not doing anything.
Why Empty Space Isn't Empty
White space (or negative space, if you want to sound more intentional about it) isn't the absence of design. It's an active design choice. Every pixel of space between elements is communicating something: relationship, hierarchy, importance, breathing room, calm.
Elements that are close together are perceived as related. Elements that are far apart are perceived as separate. This is Gestalt psychology's proximity principle, and it's operating on every visitor to every website whether they're aware of it or not. When you cluster a heading, a paragraph, and a button together with tight spacing, they read as a single unit. When you separate that unit from the next section with generous padding, the sections read as distinct ideas. The space is doing the organising.
This is why cramming more content into a page doesn't make the page more informative. It makes it harder to parse. When everything is close together, nothing is grouped. When nothing is grouped, the visitor's brain has to work harder to establish relationships between elements, and most brains won't bother. They'll skim, get confused, and leave.
Micro and Macro White Space
Designers who understand white space know it operates at two scales, and both matter.
Macro white space is the space between major elements: the padding inside sections, the margins between the header and the content, the gap between the last section and the footer. This is the space that gives a page its overall feeling of openness or density. Increase macro white space and the page feels calmer, more premium, more confident. Decrease it and the page feels busy, urgent, or cheap.
On Squarespace, macro white space is controlled primarily through section padding (adjustable in each section's settings) and the site-wide spacing settings in Site Styles. The default padding values are almost always too small for a premium feel. I routinely set section padding to 80px to 120px top and bottom as a starting point, adjusting from there based on content.
Micro white space is the space within elements: line height in text, letter spacing, the padding inside a button, the gap between an icon and its label, the space between list items. This is less visible but equally important. Cramped micro white space makes text harder to read, buttons harder to tap, and layouts feel claustrophobic even when the macro spacing is generous.
In Squarespace, micro white space is controlled through Site Styles (line height, letter spacing, button padding) and custom CSS. The areas most likely to need attention: line height on body text (1.6 to 1.7 for readable paragraphs), padding inside buttons (add more horizontal padding than you think you need), and spacing between navigation items (the default is often tight enough that items feel crowded).
The Spacing System
Random spacing is the enemy of polished design. If your section padding is 80px in one place, 60px in another, and 100px in a third, the inconsistency registers subconsciously even if nobody can identify it. The page feels "off" without anyone being able to say why.
A spacing system uses a base unit (8px is the most common) and builds every spacing value from multiples of that unit: 8, 16, 24, 32, 48, 64, 80, 96, 128. Every margin, every padding, every gap on the site is one of these values. No exceptions. No "about 70px." Either 64 or 80.
This constraint sounds limiting but is actually liberating. You stop debating whether 70px or 75px looks better (it doesn't matter, they're both close enough) and start making faster decisions that are guaranteed to be consistent. And consistency, applied rigorously across every element, is what makes a site feel designed rather than assembled.
In Squarespace, applying a spacing system requires custom CSS for precision, because the platform's visual controls don't map to exact pixel values. But even approximating a system through the section padding controls (using "Large" consistently rather than mixing "Medium" and "Large") produces noticeably more cohesive results than adjusting each section independently.
Asymmetric Space
Beginners use space symmetrically: equal padding on all sides, centred content, evenly distributed elements. This is safe and rarely looks wrong, but it also rarely looks interesting.
Advanced use of white space is asymmetric. A heading pushed to the left third of the section with the right two-thirds empty. A text block with generous space above and tight space below, pulling it visually closer to the content that follows. An image with ample space on one side and almost none on the other, creating directional tension that guides the eye.
Asymmetric space creates visual energy. It suggests movement, direction, and intention. It's harder to get right because the balance has to be deliberate (asymmetric ≠ random), but when it works, it elevates a design from "clean and professional" to "this was designed by someone who knows what they're doing."
In Squarespace's Fluid Engine, asymmetric layouts are straightforward: drag blocks to off-centre positions on the grid, leave columns intentionally empty, let content sit in the left or right third rather than always centring it. The key is consistency: if your design language is asymmetric, it should be asymmetric throughout, not asymmetric on the homepage and centred everywhere else.
How to Win the White Space Argument
You will have this argument with clients. They will look at a section with one heading, one sentence, and 120px of padding and say "can we use that space for something?" They will want to add more content, more images, more testimonials, more everything, because empty space feels like wasted real estate.
Here are the arguments that actually work:
"Would you put ten paintings on the same wall?" Every gallery, every museum, every high-end retail space uses empty space to make individual items more visible and more valuable. A painting surrounded by white wall commands attention. The same painting in a wall of twenty paintings becomes wallpaper. Their website works the same way.
"Let's look at the sites you admire." Pull up the reference sites they sent at the start of the project. Nearly every "premium" or "modern" site they admire will use significantly more white space than they're comfortable with on their own site. Point this out. The sites they like work because of the space, not despite it.
"Let's test it." Show them two versions of a section: one with tight spacing and everything filled in, one with generous space and fewer elements. Not in a mockup. On the live site, in the browser, at actual size. The comparison almost always wins the argument, because the spacious version looks undeniably better at full scale, even if it looks "empty" in a small screenshot.
And if none of that works: "The space is what makes the things in it more visible. If we fill the space, we make everything less visible. Including the call to action that generates your enquiries."
That last one usually lands.
The Practical Minimum
If you take nothing else from this article, apply these five rules to every Squarespace site you build:
Section padding: minimum 80px top and bottom. More for hero sections and key content areas. Less only for sections that are intentionally grouped (like a two-part section with a heading section immediately above a content section).
Body text line height: 1.6. Not 1.4. Not "auto." 1.6. Your text will breathe and your readers will stay longer.
One idea per section. If a section is trying to communicate two things, split it into two sections with space between them.
Don't stretch content to full width. Text blocks and content groups should occupy 60% to 75% of the section width on desktop, with the remaining space acting as margins that frame the content.
Let the footer breathe. The footer is the last thing visitors see before they decide whether to act, and most Squarespace footers are crammed with everything that didn't fit anywhere else. Pare it back. Generous padding. Only essential information. Let it feel like a conclusion, not an afterthought.
White space costs nothing, requires no plugins, needs no custom code, and is available on every Squarespace plan. It is, without exaggeration, the single fastest way to make any website look more professional. Use more of it.