White space or “negative space”, referring to the empty space between and around elements of a design or page layout, is often overlooked and neglected.
Although many may consider it a waste of valuable screen estate, white space is an essential element in web design and “is to be regarded as an active element, not a passive background,” Jan Tschichold wrote in 1930.
Not only is white space responsible for readability and content prioritization, it also plays an important role in the visual layout and brand positioning.
The importance of white space in web design
- Allows for easier readability and scannability
Web Design Tuts’ tutorial on using white space effectively points out that the basic role of white space is to „reduce the amount of text visitors see all at once and makes reading much easier.” A cluttered page is unattractive and doesn’t make users want to read the content, especially when there’s no visual hierarchy within the text. A lab research (PDF) conducted by Wichita State University showed that white space actually improves reading comprehension, although it may decrease reading speed. - Prioritizes user interface elements
Luke Wroblewski claims in Developing the Invisible that “for designers, white space is often as important as the content itself,” as such invisible elements of the interface help communicate „what’s most important, what’s related, and what needs attention.” - Guides users on a page
As white space can bring elements of the content into focus, it can “actually guide your eye from one point to another,” Carla Rose argues. A very important role of white space is to lead „the viewer around the page by the designer’s intent,” Jason Santa Maria discusses in his article on white space design. - Can create the feeling of sophistication and elegance
The generous use of white space can even contribute to the desired brand positioning. A List Apart has written a comprehensive article about white space which claims that it can “create a feeling of sophistication and elegance for upscale brands.” Cosmetics, for example, use usually extensive white space in their marketing material to tell they’re high quality products. - Is essential for a balanced, harmonious layout
“The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout,” according to Jason Santa Maria.
Elements of white space
- Space around graphics and images
- Margins, paddings and gutters
- Line-spacing and letter-spacing within text content
- Space between columns
Some beautiful websites with generous white space
- apple.com/
- squarespace.com
- shopify.com
- mailchimp.com
What the world would look like without white space
- Check out the White Space Eliminator!