How to make whitespace work on the Web

Default avatar.
July 23, 2014
How to make whitespace work on the Web.

thumbnailThe term white space is sometimes used interchangeably with negative space, and the concept is the same. Though the term refers to “white” space in particular, the area in question does not have to be white at all. It’s just the empty space around the elements of a webpage layout.

Space like this can come in many different forms, such as the space in between images and graphics, gutters, margins, columns and even lines of type. While it seems to be made of “nothing”—only in that no other design element occupies the space—white space should not be treated in that manner. Treating it as “nothing” can lead to missed opportunities in designing something truly aesthetic and appealing.

White space, done right, can actually provide a good amount of benefit to web design. Instead of reducing white space in web design, go against the grain and make sure to increase white space on a webpage. Some well-known and popular brands are already moving in this direction, and it’s time that more designers followed their lead.

More white space equals a more luxurious brand and website

Clients typically want designers to use up as much space as possible on a website since it can be costly to pay for site real estate, and there are screen limits to where messaging can be included. However, doing the opposite—increasing white space—prompts the designer to craft a smarter brand message in a more restrictive space.

In addition, perception will be that a website with more white space is one whose content is more vital than its screen space. As a result, a brand seems more luxurious because it appears able to sacrifice more screen space to focus on its content messaging instead.

Luxury brands haven’t failed to understand this phenomenon and regularly use more white space to achieve this precise effect. Pottery Barn is a well-known retailer of more upscale home furnishings, and its website’s smart use of white space reflects this to a tee. White space dominates on the homepage, with a lot of it existing on the sides of the page to better direct site visitors’ attention to its deals and promotions in the middle of the page. Even the brand name itself features generous white space between the characters at the top of the page.


White space to promote smooth searches

A simple, though ideal, demonstration of the effective simplicity of white space can be seen in two major search engines: Google and Yahoo Search.

Google understands precisely that users looking for a certain search topic don’t want to be distracted with loud backgrounds and ads. Therefore, white space dominates the entire Google search engine page, with the actual search only occupying a thin sliver of space in the middle of the page. Similarly, Yahoo Search embodies this smart use of white space, too. While the webpage does have a pretty long menu bar at the top, the idea’s the same: a lot of white space so that the user can concentrate on the search and nothing but the search.

Readability and legibility get a much-deserved boost

Readability and legibility on any given website are bolstered when white space is smartly used. If the text on a page is squished together excessively, then it will get in the way of a comfortable reading experience, which hampers the overall user experience. More white space improves the reading experience by making text easier to scan, adding also to comprehension.

One individual’s site that has a handle on this principle is Information Highwayman, which is the site of D Bnonn Tennant, a copywriter and marketer. As someone who boasts he knows what great web content can do for any small business, it’s reassuring to see that Tennant practices what he preaches on his own site. The spacing between characters in the headline copy, text and menu bar is conducive to ensuring readability and legibility.


White space can also be used in between different sections of content, not only to improve the reading experience, but to break up various parts of content for easier absorption of information. Andrew Lucas’ site demonstrates this nicely. He’s a web designer from London, and he uses white space effectively on his homepage.


It makes colors more vivid

Perhaps the most direct, though simplest, benefit of white space is that it makes other colors on a website stand out to the point that they’re brighter than ever. This is very helpful for catching the eye of the site visitor, as the colors’ depth, richness and even intensity are emphasized more than ever.

The web designer behind the I Am Dan website gets this so well that he epitomizes this concept on his homepage with his sparse use of color. Much of his website is just white space that’s broken up by the rare splash of red. Because of this tactic, the red colors highlighting links to his portfolio and inviting site visitors to browse his site stand out effectively, thus increasing the chances that visitors will complete the call to action.


Zurb is a web-design company that also demonstrates how white space can make colors stand out. Its homepage is characterized by one solid color at the top of the homepage and colorful icons to different webpages (right by the fold). Aside from this minimal use of color, the whole design of the homepage features white space.


Simple colors like green, orange and red will have the effect of creating a look that’s both pleasant and well-focused. Both of the sites mentioned above take a minimalist approach to color because there is so much white space. As a result, the colors are used very judiciously, which makes users appreciate them all the more.

White space is not wasted space

Web designers have to increasingly move away from the mistaken belief that they have to cram every element and color possible into the screen when designing a site. As illustrated in the examples above, white space can make a powerful impact when it’s used in such a way to highlight a brand’s content, boost readability and legibility and make minimalist colors stand out.

The phrase “less is more” truly applies to the whole concept of white space, no matter how you look at it. In a broader sense, this take on minimalism in web design has also been getting popular lately, and it’s certainly a trend that will continue.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at

Read Next

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…