5 Minute Guide: Why White Space Is Your Friend in Web Design

5 Minute Guide: Why White Space Is Your Friend in Web Design

“White space is to be regarded as an active element, not a passive background.” – Jan Tschichold

When building web pages, designers usually focus on the things that you can see in the design, what they perceive as active elements: fonts, colors, images, text, menus and so on. Unfortunately, white space is not usually perceived as one of these elements. And that’s really a shame, because white space is one of the most useful weapons you have in your web design arsenal.

What Is White Space?

White space is the default state of any spot on your web page. Whenever you open a new document, it starts out as full of white space which you then fill up with elements. If we were to define white space simply, we’d say that it’s the space around your design elements that helps them stand out and separates them from each other.

Don’t be fooled by the name of this particular element. It doesn’t actually have to be white. It can be any color. It’s just that it comes off as blank space in your design.

There are two kinds of white space. First off, we have undefined white space, which is the space that we were discussing in the previous paragraph, the space that pops up to fill any new document. And then there is active white space, which is the white space that you get when you place a design element in undefined white space.

Be careful when using white space in your designs. It’s important that you have it, but if you have too much of it or if you use it inexpertly, it may wind up as looking like wasted space, and you don’t want that. What you should follow when using white space is to create an aired out look for your site that makes your design elements stand out.

How Does White Space Affect Design?

White space has two uses in web design, depending on whether you’re looking at the micro level or the macro level. The first is legibility and the second is tone. Let’s take a look at these two uses.

First, legibility. This is the use that comes from white space properly used at the micro level. When discussing white space at the micro level, you refer to kerning, leading and tracking. Leading refers to the space between different lines of text, kerning and tracking refer to the space between the letters in a word. Obviously, these elements have a huge impact on the legibility of your pages’ content. That’s why it’s important to get it right. For example, if you have a lot of text with little padding around it, you may want to increase the leading or tracking in order to make the text legible.

Second, tone. This is comes up when looking at white space at the macro level. That is to say, the spacing around the biggest objects on the page. More space creates an aired-out look that conveys the impression of elegance. The more white space, the more high-end, elegant and luxurious the design feels.

What Are The Advantages of Using White Space?

We’ve already touched upon these aspects, but let’s elaborate a little:

First of all, white space can make your design look elegant and sophisticated. Take a look at the following two websites:

5-Minute-Guide-Why-White-Space-Is-Your-Friend-in-Web-Design-1 5-Minute-Guide-Why-White-Space-Is-Your-Friend-in-Web-Design-2

Image 1 source & Image 2 source

Which website looks better? I’m willing to bet that you said that it’s the Apple website. And that makes sense. They have properly used white space over there. The other website is just a mess. There’s too much of everything in there. Minimalism and usage of white space makes the Apple website look sleek and elegant, refined and classy. The massive clutter of elements in the other website just makes it look poorly designed and cheap.

Second, white space makes your site legible and improves its usability. Without the use of white space at the micro level, your visitors won’t really want to read your content, as it’ll look intimidating and, quite honestly, it’s hard to read text that doesn’t have proper leading, kerning and tracking. Let’s take a look at a successful example of white space used at the micro level.

5-Minute-Guide-Why-White-Space-Is-Your-Friend-in-Web-Design-3

Image source

Look how well the text reads on this example. It’s really no wonder it makes such good use of white space at the micro level, seeing as it’s a typography website. Observe the pretty large leading distance as well as the smaller distance between separate letters. The two balance each other out. While they have used kerning in order to avoid strange looking lines of white space to go through the paragraph (that is to say, they have made the letters come closer together when their shapes allowed it), they have increased the leading distance in order to keep the paragraph legible.

How Should You Use White Space?

Well, first of all, you should keep in mind one basic principle that should guide you throughout your design. This principle is, simply put, the old adage “less is more”.

That is to say, if you put in too much of anything in a web page, it will wind up looking cluttered. That’s where white space comes in. Don’t go into too much detail for each element. Simplicity and minimalism are your biggest friends when designing.

Now, let’s get into how you can actually use white space properly with a few tips.

Break the Overall Structure (Just Once or Twice!)

5-Minute-Guide-Why-White-Space-Is-Your-Friend-in-Web-Design-4

Image source

Your website has to have structure. Usually it’s aligned to a grid of sorts. That is to say, all elements are evenly distanced relative to one another. That is a good thing. Otherwise your website would be distracting and hard to follow.

Still, this can lead to a pretty monotonous design. So let an element break that structure. Make it float outside of the grid you’ve established for all your other elements. This helps that element stand out from the rest.

Use Consistent Spacing

5-Minute-Guide-Why-White-Space-Is-Your-Friend-in-Web-Design-5

Image source

Now, what we said in the previous paragraph doesn’t mean you should break the grid by changing the padding between one element and the others. Make sure that the margins around each object are consistent. Look at the example picture above. Which design would you say looks more balanced? Odds are you said that the one on the right side. That’s because the margins are consistent there. Don’t ever think that breaking the monotony of the grid should ever be done at the expense of consistent spacing. 

Well, that about wraps up our look into white space: what it is, how it can improve your design and how you too can use it in your own web designs. What do you think? Do you prefer the rich in white space look that most mobile app landing pages and luxury products have, or do you prefer a more down-market, approachable look obtainable by using less white space? How much white space do you usually use in your designs? Why? Let us know in the comments section below!

2 Comments on “5 Minute Guide: Why White Space Is Your Friend in Web Design

  1. Sure wish graphic designers would put that into practice when designing signs for their clients!!

  2. There are some brilliant tips here. I’ve been researching how to lay out my web page so that it doesn’t look so cluttered and you have given me some great ideas here, especially about the margins and the balance of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *