Whitespace is not a passive element on a page, or space that has just been neglected. It is an important element in the design of the new Commission web presence. According to research, the correct use of whitespace results in the following advantages:

  • improved readability

  • improved legibility

  • higher comprehension level

  • more effective content, as it brings focus and prioritises user interface elements

Mechanics of reading online

The eye of a reader flows across a line of text, focussing on points in the line. When they have reached the end of the line, their eyes need to jump back the full length of 1 line and down the height of 1 line.


When the length is too long, readers can get disoriented while making the jump. Increasing line height, and the whitespace that surrounds lines of text, helps eyes make the jump by making the vertical distance larger between lines of text.

Optimal Line length

Optimal line-length is somewhere between 45 and 75 characters. We apply this rule to our text as much as possible. By limiting the amount of characters per line, the width of a paragraph is no longer only dependent on the width of its container.

A side-effect of this causes whitespace to appear next to blocks of text whenever the container width exceeds the line length. With our text-heavy content, this rule is frequently applied, resulting in plenty of whitespace, and a better reading experience.

Line height

Adding whitespace between two successive lines of text helps to guide the reader from the end of the top line to the beginning of the bottom line. This increases the readability of blocks of text.

In this regard, optimal line height lies somewhere between 1.4 and 1.6 times the font size, depending on the line length and typeface. The general rule is that line height should increase in proportion to line length.

Paragraph spacing and margins

Research tells us that breaking long texts into paragraphs and adding spacing in between these paragraphs increases comprehension. In web writing this spacing supports the user’s eye movement when skimming the page content.

Whitespace in page layout

Reading on the web is very different from reading in print.

“F for fast. That's how users read your precious content.”

– Nielsen Norman Group, “F-shaped pattern for reading web content”,

Research shows us that users scan the page following an F-shaped pattern. This has certain implications for layout. We try to support this pattern, not work against it. The F-shaped pattern tells us that horizontal scanning (i.e. reading) is mostly done at the top of the page, drawing the most attention to content displayed there. The further users scroll down a page, the more they scan in a vertical direction.

This favours single column layouts where all titles are aligned on a vertical scan line that the user's eyes can follow. This applies for content or text pages. The situation is different for overview or category pages, where a layout in ‘block’ can alter the scanning behaviour and guide the user's eyes towards the right side of the screen.

These best practices either use whitespace as an active element or result in whitespace as a by-product.   

As with any rule there are exceptions to the above mentioned principles. We will test these design aspects with actual users in the future and adapt where needed.

 



Comments

Nishah's picture

Nice! For sure this article would be very helpful to those who are aspiring to become web designers creating a responsive website. This could also make existing developers better as they would be further guided on their works.

Add new comment