Will Whitespace Make Your Web Design Better?
What is Whitespace?
Whitespace, also known as negative space, is a term often heard in the art and design world. In web design, whitespace is the empty space (whether it is white or colored) that surrounds the components on a webpage. It is the empty space in between the text, titles, graphics, and logos on your site.
Within the various elements of a webpage, macro whitespace is the negative space surrounding the larger elements of the site, the space between the header menu and main body text, for example. Micro whitespace refers to the more easily overlooked miniscule space between lines, images and descriptions, and other small page details.
Whitespace is an important element in web design, as it can be used to separate and highlight items, provide visual relief, and alleviate perceptions of clutter or constraint. However, it’s not uncommon for web designers to try to utilize all the space provided by filling it with many elements.
More Stuff, Less Space
More product, more content, more callouts – all these can lead to more purchases and more traffic, so it’s easy to see why “more” could be understood as “better.” Many times whitespace might seem like wasted real estate. What’s often forgotten is that whitespace can be artfully used to direct the viewer’s attention to more important elements. It can also lend to a sense of balance and elegance through simplicity in the page design.
Whitespace offsets the visual weight of content and is essential for a website to appear simple, comfortable, and concise. Too much content and too little negative space may leave a page looking messy, crammed, or unprofessional. With no visual breathing room for the viewer’s eye, the visitor might experience feelings of constriction or confinement. You wouldn’t find it easy to read a book if all the lines and paragraphs ran together, so why hint at that in your web content?
Will Whitespace Make Your Content Better?
While leaving a page crammed with text and content may frustrate readers as they try to scan a site for essential information, leaving gross amounts of whitespace in between all elements may lead to needless scrolling as users have to navigate down the page while the take in the information. Is there a perfect balance between whitespace and content? Several studies performed by the software usability research lab at Wichita State University sought to answer questions surrounding whitespace and reading online content.
Finding Content on a Page
In one experiment, three versions of an online travel website were created. The content was identical on all three, but the information was spaced differently across the pages. In the low whitespace condition, much of the content on travel information was crammed together in three columns with little room to separate categories or paragraphs. In a medium whitespace condition, the columns and content categories were spaced enough to provide clear distinctions between groups. In the high whitespace condition, a large amount of whitespace was provided around each section of content, giving it an empty look.
During the study, participants were asked questions that required that they locate information throughout the pages. In the end, the amount of time it took the users to find links within the page content didn’t differ based on the design. However, participants rated a higher level of satisfaction with the medium whitespace design, and rated this layout as preferred.
Readability and Margins
In another study, reading speed and comprehension were examined with regards to whitespace and content layout. Four content layouts were created for mock webpages. In the designs, the line height between the paragraphs was varied between standard (5mm of space between lines) and sub-optimal (4mm of space between lines). Margins were also varied between 10mm of whitespace surrounding the text or 2mm of whitespace surrounding the text. Altogether, four conditions were created with these variables.
 Text with Margins and Standard Line Spacing |
 Text with No Margins and Standard Line Spacing |
 Text with Margins and Sub-Optimal Line Height |
 Text with No Margins and Sub-Optimal Line Heigh |
Participants were asked to read the text at their own speed and answer comprehension questions about the paragraphs. In the end, words per minute reading speed was higher for the conditions where there were no margins, but reading comprehension suffered. The higher reading comprehension scores were for those conditions with larger margins. Participants also reported lower levels of fatigue and eyestrain when margins were involved, and an analysis showed that the element design that include 10mm margins and standard line spacing of 5mm was the preferred format.
Best Practices for Using Whitespace
If content and reading comprehension are important to your site, take the middle road with whitespace – not too much, not too little. The amount of whitespace between lines, paragraphs, and content sections does influence your user’s ability to read, scan, and understand the information. News, media, and elearning sites should all note that pushing information too closely together makes it more tasking to scan and extract information from. Likewise, if exaggerated spacing is used, the words will seem isolated and the relevance of the information may be disconnected.
When used properly, whitespace focuses attention on specific elements, can increase findability, and will draw the eye to certain places on the page. Effective whitespace also offers the illusion of simplicity and professionalism.
