White space, or negative space, is one of the most overlooked design elements that makes a great website. It is simply the blank space on a webpage (so it can technically be any color). It can either be the space between major elements like the sidebar and the header (macro) or the space between smaller elements like the padding, line spacing, and letter spacing (micro).

Why white space makes a good website design

White space for a client may be seen as prime “real estate” and they may want to maximize the space by displaying as much content as possible. However, too much content creates clutter and noise that can adversely affect the user experience. An effective use of white space will help focus their attention on the content and message that is valuable to the client, to better inform them and lead to better conversion rates.

Example of cluttered content (left image) vs white space design (right image):

Here are other benefits using white space on a page:

• Reduces clutter and increases readability: Separate research studies by Lin and Chaparro et al. both state that an increase in space between paragraphs, as well as in the left and right margins, will also increase reading comprehension.
• Emphasizes important content and guides users around the site: White space highlights calls-to-action that demand focused attention. Visitor’s search for information is accelerated when messaging becomes clear and direct with white space design. Buttons and headlines that are surrounded by white, undistracted space catch the users’ eyes and steers them around the site.
• Gives a high quality feel to the website and brand: An organized white space design makes the website appear more professional and elegant. A busy layout with small print and too much text looks spammy and hurts the appeal of the brand.
• Responsive web design: White space helps to adapt the layout from desktop to mobile for a consistent user experience. When downsizing to a mobile viewport, the negative space makes the content breathable, allows text to take more space and to be legible and buttons easy to click.

Example of white space web design that contributes to responsiveness in various screen sizes:

Here are some suggestions on how to incorporate white space in web design:

• Break down your content: Help your users quickly find what they are looking for on your site by having small amounts of consumable content with links leading to additional information if necessary. Similar to a blog post, displaying a brief introductory paragraph and an action button can help not only focus the content, but also reduce page loading times – which helps with SEO.
• Add space around the important content: By doing so, you’re creating an emphasis on what you want the visitors to focus on. Too much content used to attract attention, such as flashy animated banners, often distracts users instead of helping conversions. Try simplifying the layout by having fewer options, creating concise messaging and making the option you would like your users to select more prominent.
• Spacing: Use a grid to organize content and allow adequate spacing among different elements. As mentioned above, the reading comparison by Chapparo et al. shows the comprehension effect of margins (10mm of margin white space is more readable than 2mm of margin white space) on a text. The same study suggests that leading, or the space between the lines of text, has an affect on the participants’ layout satisfaction. We suggest using optimum space of 1.2em – 1.5em between lines of text to increase readability.
• Balance the layout: Consider the relationship between each element on the page for a harmonious layout. Too much white space or negative space can make the webpage look empty.

Examples of websites with white (or ‘negative’) space design: