What Is White Space, And Why Does My Website Need It?

By Julie

What Is White Space, And Why Does My Website Need It?

When potential customers arrive at your website, you want to make sure they find what they’re looking for quickly. You know that today’s average internet user has a short attention span, and if you don’t hook them within the first few seconds, they’ll be gone faster than your website took to load. Naturally, this means you fill your homepage with relevant text and images enticing them to keep reading. Since you don’t know exactly what every visitor will be searching for, you try to cram in as many diverse calls to action as possible.

But no matter what you try, Google is flagging your bounce rate at a steady 70%. You’re losing over two thirds of the people who land on your website. What can you do to fix it?

What if I told you the greatest weapon at your disposal isn’t your stellar content or those colourful stock images full of smiling faces? There’s an unsung hero in website design, one that when used correctly goes completely ignored — but if it’s missing, everyone notices.

And its name is white space.

What is White Space?

At any given spot on your website, there is either text, an image, or white space. White space, or negative space, is the space found inside and around other elements on a webpage. It’s the gap between lines of text, the blank areas to the sides of your content, and what keeps your website menu from running headlong into your logo.

Screenshot of the Apple homepage
Bam. Look at all that white.

White space doesn’t have to be strictly white. It can be black, red, or even orange. What makes it ‘white space’ is that it forms the background for your website text and images to sit on, the same way a canvas holds paint strokes together. It’s the spaces of nothing.

Yes, I’m saying that to make your website more attractive to visitors, you need to add literal gaps of nothing. Hear me out.

Why Should I Care About White Space?

White Space Helps Us Breathe

Imagine you are at a concert. Orchestra or heavy metal, it doesn’t matter; you’re excited to be there and take a break from the daily grind. Start time rolls around, the lights dim, and the musicians appear on stage. The first notes of a guitar are strummed—

And then they never stop. There’s an endless onslaught of music note after note, without pause in between them. The singer isn’t taking a single breath between words either. They just flow into each other, the song’s beat and melody disappearing in a barrage of pure noise.

All the silence between musical notes has been removed. This is what design without white space feels like.

Image of an audio cassette tape with the tape pulled out

White space balances out the content around it. It gives the content emphasis without needing to capitalize, add animation, or slap on a bold colour (which could only add to the visual noise). As humans, there’s a limit to how much we can pay attention to at once, and a limit to how much attention we are willing to give something before we just give up. White space is the king of making everything else take a step back so that we can digest and appreciate what’s in front of us.

White Space Helps Us Read

Most people think of white space as those large expanses of empty space you could stick a whole fist through. It’s really a lot more nuanced than that. For example, what about the thin lines of space between the paragraphs of text you’re reading right now? That’s white space too, and it’s working together with the text it surrounds to make sure you can read what’s on the screen without wanting to gouge your eyeballs out.

Image demonstrating white space in a print layout

Proper application of white space in all sizes will help users navigate your content, whether they’re reading every single word or skimming for sections relevant to them. It helps keep everything organized too. Humans like to group things that are visually close together as related to each other. So by using white space around an image and its caption, you’re creating a nice invisible box around the two that tells users that they belong together and not with the rest of the content around them.

White Space Helps Your Brand

Yes, really. Having adequate white space for your brand is as important as making sure the colours on your website match your printed flyers.

White space can be a big indicator of price, and thus quality. Think of the last time you saw a delivery menu for your local pizza place. I’m willing to bet an extra-large pepperoni with a 2L bottle of coke that there was a lot less white space in that flyer than the menu for that posh Italian spot downtown. It’s not the only factor in projecting a high-quality product, but it is one that gets far less attention than it deserves.

If you’re that local pizza guy, maybe using a lot of white space isn’t what you want to do — you don’t want customers to think you’re out of their pizza delivery price range. In your case, you’d just need to make sure you’re using the right amount of white space so that people can actually read what your delivery special is. But what if you’re a realtor for million-dollar homes, or a tech startup targeting larger businesses? White space just became your brand’s new best friend. All the colour theory and fancy car pictures in the world won’t help if they’re crammed together.

Image comparing shoes on the Walmart and Nike websites

You know before even looking at the brand names or prices which website is going to have the expensive shoes. The amount of white space on Nike’s website screams sophistication, while giving the few elements on the screen — namely the shoes — room to shine.

White Space Helps Your Message

Image of the famous Volkswagen 'Think Small' ad

Sometimes, white space plays a very active and visible role in design. Would this old Volkswagen ad be as powerful if all the white space was cropped out? In the case of this ad, the white space around the car is just as important — if not more so — than the car itself.

White space also goes hand-in-hand with another popular design concept: ‘less is more’. When you land on Google’s homepage, there’s no confusion about what you should do next. There’s a whole lot of white on that page, and it draws your attention straight to their bright, colourful logo, and then down to the search box. Sure, there’s a whole lot of other things you can do with Google conveniently hidden in tiny links and menus, but they aren’t cluttering up the screen and taking away from what most people are there for: searching for cute cat photos.

Screenshot of the Google search page

Takeaway

The space around your text and images is just as important as the text and images themselves. It works together with the other components of good design — content hierarchy, colour theory, user experience, and more — to present your business in a balanced, easily digestible way for users who are too busy to spend more than a second figuring out what they’re looking at. It even tells your users whether to expect a high-quality product or not.

When working on a new website, pay attention to the amount of space you’re leaving untouched. And the next time you go to a concert, enjoy the spaces of silence between music notes. They’re the true heroes.

Looking for a website redesign with more white space? Give us a holler.

About the author

I'm a designer and programmer with a can-do attitude and a song recommendation for every mood. Good design is like music: it moves people. If at first you don't succeed, try again with a different soundtrack.
Read more posts by Julie
Phone Icon
Call Us
Contact Icon
Contact
Contact us