What is white space on a website? (Plus benefits and examples).

Some web design trends come and go. But white space isn’t one of them.

A web design essential, white space can improve the user experience (UX), the branding and even the conversion rate of your website.

So in this post, we explain what white space is and how you (or your web design agency) can use just the right amount of it in your web designs. Here are the topics we’ll be covering:

• What is white space on a website?
• The two types of web design white space
• The benefits of white space in web design
• White space in web design: best practices
• 6 examples of white space on websites

Ready? Then, let’s start with a white space definition.

What is white space on a website?

White space — also known as negative space — is the empty space around web design elements, like logos, text, and images. It isn’t always white. In fact, as you’ll see in the examples of white space below, it can be any colour at all.

You tend to find white space in:

• The margins of a website
• The spaces between text blogs, images and call to action (CTA) buttons
• The spaces between letters and lines of text
• In or around images

When a web designer includes enough white space, it improves user experience (UX). Each web page is easy to understand and users know exactly where to click.

The two types of web design white space

There are two primary types of white space in web design. These are:

Micro white space

Micro white space refers to the tiny spaces between:

• Letters, words and lines of text
• Paragraphs
• Menu navigation links
• Form fields
• Images or content that is presented in a grid

Micro white space helps users to understand and read your content.

Macro white space

Macro white space refers to the larger spaces within your web design. These can be found:

• In the margins of your website
• In hero images
• Between sections on a page
• Around your logo
• Around CTA buttons

Macro white space ensures a good website layout, so your website is nice to look at and easy to navigate.

The benefits of white space in web design

White space isn’t something that web users tend to notice. But it has a huge impact on their website experience. Here’s how the right amount of white space benefits your website and your business.

Makes text readable

Crowded website text is hard to read — and it can be pretty overwhelming for a website visitor, particularly on a small smartphone screen. White space between letters, words, lines and paragraphs makes the text on your website readable. So it’s easier for users to read and understand your message.

Improves user focus

Throw lots of cluttered web content at users and they’ll struggle to process it all. They’ll find it hard to understand what you’re trying to tell them and to make a decision about your product or services. By including white space in web design, you give users time to digest your content, which means they’re more likely to understand and remember it.

Makes it easy for users to navigate your site

When there’s enough white space between menu navigation links, it’s easy for users to find and click on the relevant option. You can also make your menu stand out by adding white space between your header and the rest of your website content.

Encourages users to click on CTAs

Good web designers leave lots of white space around CTA buttons. This makes buttons stand out, catch the eye of website users and encourage clicks.

Guides users through your website

White space indicates how important each piece of website content is. The more white space, the more impact each web element makes. So use white space to guide users through your website and optimise your web conversion funnel in the process.

Supports a good user experience

When you use plenty of white space in web design, you get rid of any visual clutter. You space out elements so they never overwhelm a user. This means your site is great to look at — and easy to use, too.

Improves your branding

Less-is-more web design looks clean and professional. You can use it to evoke luxury, simplicity and clarity. It’s aesthetically appealing and it’s stood the test of time. A design that incorporates lots of white space helps you create strong website branding that’ll remain relevant for years to come.

White space in web design: best practices

White space is good for users, branding and website performance. But how do you ensure there’s just the right amount of it on your website? Here are a few best practices to keep in mind.

Consider website hierarchy

As we’ve already talked about, white space helps you draw user attention to the most important elements on your website. So take some time to think about which content should stand out.

Be sure to leave enough space around menu items, CTAs and key services or features. This helps guide users through your site.

Adopt a “less is more” approach

When adding any new element to a web page, ask yourself this question:

Does this element add significant value to the user experience?

If the answer’s no, carefully consider whether it deserves a place in your web design. You can also try taking away elements to see whether this improves the feeling of space, without impacting the user journey.

But don’t go overboard

Go to Google’s homepage and they have one of the sparsest interfaces you’re ever likely to come across. But very few brands can get away with that much white space.

So don’t be tempted to strip things back to basics. And avoid putting so much space between elements that they start to feel disconnected. This can harm the user experience just as much as a cluttered design.

Remember that related elements — for example, the fields on a form — should be placed relatively close together. You can then create white space around the form.

Improve the legibility of your text

When designing the text for your website, choosing a font is just the first step. As part of website typography design, you need to look closely at spacing. This includes:

• Tracking — deciding on the space between all letters
• Leading — deciding on the space between each line of text
• Kerning — fine-tuning the space between specific letter combinations (things like TT and WA that often create too much or too little white space)

The right amount of space makes it easy for users to read all text on your website.

Think mobile-first

What looks balanced on a desktop screen will likely feel overcrowded on a smartphone. So it can help to think mobile-first. That means ensuring your web design looks great on smaller devices before scaling up for desktop.

Look at the padding and margins you use for smaller screens. Check the length of your paragraphs. Also, ensure there’s enough space between interactive elements so it’s easy for users to click with a finger or thumb.

Choose images wisely

The images you put on your website should include enough white space. This might mean your chosen image has:

• A blank or minimal background
• A subject surrounded by lots of negative space
• An in-focus subject and a blurred background
• A minimalistic colour scheme

When there’s enough white space in an image, it’s easy to overlay text and buttons in a way that is readable and uncluttered.

6 examples of white space on websites

Want some white space inspiration? Here are a few of our websites that use white space beautifully (if we do say so ourselves!).

Aurora Nights

Showing that white space doesn’t have to be white, the Aurora Nights website uses a moving image of the northern lights for its home page. The beauty of this image is the amount of white space it contains. It packs a big visual punch but the text and CTA on top of the image are still easy to read.

Black Pear Software

Look at the header menu on the Black Pear Software website and you’ll see plenty of white space around each menu item. Straightaway, users can see the menu options available to them.

There’s also good use of white space around the logo, which makes it more noticeable and memorable. There’s loads of white space around the call to action — “Contact us”. And there’s even white space between the header and the next piece of content.

The end result is a slick and professional-looking website that’s easy on the eye and simple for users to navigate.

MJ Supplies

If you’ve read our post about product page best practices, you’ll know that a good product page answers all customer questions. So they tend to include a fair amount of content.

Use of white space is a great way to avoid overwhelming a user — and it’s something we can see in action on the M J Supplies website.

Here, the text is well-spaced. The product title and price catch the eye. The “Add to cart” button is instantly visible. This is all achieved with good web design and the right amount of white space.

B-Fit Gym

On the B-Fit Gym website, each service is separated by white space. This helps users to understand the different services on offer. The spacing is balanced across the page, creating an aesthetically pleasing and easy-to-understand page. And there’s a clear separation between the subheading and CTA, too.

Medela

There’s a lot of information on this Medela website product page. Prices, product ratings, add-to-cart buttons, product titles and product images.

The grid layout, which includes lots of white space, helps users to make sense of the content in front of them.

It’s easy for users to spot filter and sorting functions because they are separated by white space at the top of the page. And there’s good use of white space between each product listing, too.

Xenia Students

On this About page from the Xenia Students website, the header image is pretty busy. There’s a lot going on and everything is in focus. So why does this image work so well?

It’s because a greyscale effect has been applied. This reduces the colour contrast of the photo and creates enough white space to make the page heading stand out.

Want to improve the design of your website? The Radical team can help with branding, a website refresh or a complete redesign. Get in touch with us to chat about your project.