Improving Readability with Separators & White Space

People read web pages by, well, not reading them at all. Research on how people read websites shows that site visitors scan new pages, while only 16 percent read word-by-word.

Separators and spacers help visually group sections together so they’re easier to scan and digest. If you have text-heavy page, adding white space and separators helps our fallible human eye identify groupings and sections of content.

Separator

A separator is a horizontal rule that can be used to distinguish sections of content on a page. Separators serve as visual dividers and signal a change of topic.

The WashU Web Theme provides two styles of separator:

• Full-Width: Spans the full width of the content area
• Short: Centered and spans only a section of the content area

Separator examples

Full-Width separator:

---

Short separator:

---

Choosing a default separator

To set a default separator style to use throughout your site

1. Insert a Separator block on a page
2. Select the separator
3. In the settings at the top right of your window, expand the Styles menu
4. Under the Default Style dropdown, choose your preferred style — either Full-Width or Short

Spacer

The spacer block appears as white space on the page. Insert it between blocks when you need to air out your content. Spacers are especially useful to spread out elements on content-heavy pages.

There is a spacer between this line of text …

… and this line of text.