Skip to content

Design Pattern: Use White Spacing

User Need

I need a good use of white space, so that the chunks are clear and the page does not get overwhelming.

What to Do

Put white space around objects and text, including boxes, paragraph headings, and content, so that each section is clearly separated.

How it Helps

White space (also called negative space or the background color) reduces clutter and provides definition to content. This gives the viewer a clear overview of a web page. It is used by designers to enhance text and the position of objects on a page.

Using white space aids navigation through a page and helps people read it. It can help the user find important elements on a page. For those with cognitive and learning disabilities, white space has been shown to ease reading difficulties and improve understanding of content.

Make sure users can also adjust the amount of white space around objects and text via a web extension or user setting. This supports the ability to identify important elements in the content of a web page.

More Details

Use clear spacing between letters, words, sentences lines, paragraphs, and blocks of text.

Allow for the ability to easily adjust white space around objects and text, including boxes, paragraph headings, and content, to a degree that suits the user and does not disrupt the overall integrity of a web page. Do not add so much white space that important content cannot be seen above the scroll.

Note that “white space” is a term that means the background color. It does not always need to be always white!

Examples

Use:

  1. White space around separate sections of the content.

Avoid:

  1. Dense pages.

Related Information

User Story

Personas

Reference

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.