White space is the “negative space” between elements. Basically, it’s anywhere on your page that is not filled up with text or images. It doesn’t actually have to be white; it can be filled with the background color. The important thing is that there is no information in that space that the user has to digest.
White space is not wasted space. It is strategically placed in a design to give the user’s eye a chance to rest and to create a visual flow between elements. White space is used on everything – flyers, logos, websites, and more. When it is used well, it helps create a design that is professional and pleasing. When used poorly (or ignored entirely) it creates a cluttered look that reflects poorly on the company.
White space gives each element room to “breathe” and makes it easier for visitors to understand what they are seeing. It helps to separate blocks of information into groups so the reader can easily scan the information.
White space can also help a design feel more organized and sophisticated. A typical junk mail flyer is loaded with bright colors, images, and screaming calls to action, which gives it the impression of urgency, but also of lower quality. In contrast, a luxury brochure will use white space to show how sophisticated it is and project an aura of serenity and elegance.
On a website, white space is used to separate different blocks of content. The navigation bar at the top or side, the content, ads, special offers, product listings, etc. should have a significant amount of white space between them so readers can quickly recognize the layout of the website.
White space makes it easier for visitors to quickly scan the information. Most visitors don’t really read websites, they quickly scan them to see whether the information they are looking for is there or not. If it is, they will go back and read the content, but if it is not (or they can’t tell whether it is), they will leave the website and go somewhere else.
White space can also help draw attention to certain areas or pieces of information. The more space there is around an object, the more that object stands out. In the example below, though the color, position, and size of the “cool offer” is the same, it stands out much more when there is more space between the offer and the surrounding text.
Using white space to separate certain groups also makes it clear that the items within each group relate to each other. The white space around a photo and its caption help reinforce the relationship between the caption and the photo because of their proximity.
White space can also be used between individual lines of text or even between individual letters or icons. It increases legibility by preventing letters and icons from running into each other. The white space within text can be controlled by the font, line spacing, and the kerning. Using white space around text can also increase legibility. Adding extra space (within reason) between paragraphs and margins can increase reading comprehension by 20%.