What Is Whitespace?

Date First Published: 19th August 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 4/10

CONTENTS

Importance Of Whitespace
Types Of Whitespace
Examples Of Whitespace In Web Design

Learn more about what whitespace is in this article.

In web design, whitespace, also known as negative space is simply the space left blank or unmarked between different elements on a website. Whitespace is often used to balance elements, prevent the page from looking overloaded, and create a pleasant composition. Without whitespace, visitors would get too distracted by the different elements of websites and they would have no visual breaks, making it harder for them to focus. Also, websites would be less navigable and understandable. It is believed that whitespace is one of the most powerful creative elements in web design and it is not to be confused with emptiness.

Note:

Whitespace does not have to be white. It can be any solid colour, pattern, or background image. This is why the term 'whitespace' is a little misleading.

Importance Of Whitespace

Whitespace also helps visitors process information quicker. In the image of this article above, see how the use of more whitespace makes the text easier to read and break down. Text that is squished together into a big chunk of information can make it much more difficult for readers to find what they are looking for. Using whitespace to group certain things together is helpful for creating a sense of balance and sophistication.

There should always be a good balance of whitespace on a website. Too much whitespace can make a website look empty with an overly simplified user interface. On the other hand, a lack of whitespace can cause websites to look overloaded with elements. Ideally, there should be enough whitespace for visitors to focus on the main content and take visual breaks.

Examples of whitespace include:

The space within or around images.
The spaces between text blocks and content boxes.
The wide margins on a page.
The space around sidebars.
The space between paragraphs, words, and headings.

Types Of Whitespace

Micro whitespace - The smaller gaps built around the main content, such as the whitespace between words, letters, paragraphs, form fields, images, tables, and videos. Micro whitespace improves the readability of content. Without it, all the main content would be next to each other in one big block and be much more difficult to read. The spacing ensures that visitors can read them with ease.
Macro whitespace - Refers to the whitespace of larger areas. Macro whitespace can be found in the margins of a website, between sections on a page, and in the space that separates the content and the sidebar. Macro whitespace improves the layout of a website and makes it easier to navigate and understand.
Passive whitespace - The gaps that are naturally built in the design or typography of a website. The size of these gaps can be controlled, but they will automatically be there without the web designer manually placing them.
Active whitespace - These are empty areas that are intentionally added by a web designer to guide a visitor's eyes to certain areas. It is added for design and structure, and to separate one element from another.

Examples Of Whitespace In Web Design

Below are examples of how different websites use whitespace.

Apple

Apple uses whitespace on both sides to draw visitors attention to the product. This is an example of active whitespace. Apple also uses passive whitespace for the text with a sufficient amount of spacing between letters.

Nivea

In order to draw visitor's to the links, Nivea uses whitespace around those elements. A large area of the page has been left unmarked on the left and right sides of the page. The photos below encourage visitors to check the latest news and keep scrolling, ensuring that nothing distracts the visitors from it. None of the images are crowded together and the top navigation bar is hidden until the visitor scrolls to the top of the page.

Google

Google's homepage has stayed in the same structure since it was first launched in 1998. Most of the page consists of whitespace, with a top navigation bar, a footer, and a search bar in the middle. The heavy use of whitespace focuses the visitor's eyes on the search bar to perform a Google search.