Design/Archive/Wikimedia Foundation Design/Whitespace

This is a work in progress This page describes guidelines around whitespace, alignment and visual hierarchy within projects run by the Wikimedia Foundation.

Alignment
Alignment is the placement of text and graphics so they line up on the page. Use alignment to: Good alignment is invisible. Most readers won't conciously notice that everything is lined up neatly but they will feel it when things are out of alignment. Lack of alignment creates a sloppy, unorganized look. Mixing too many alignments can have a similiar effect. It is considered OK to break alignment when it serves a specific purpose such as to intentionally create tension or draw attention to a specific element on the page.
 * Create order
 * Organize page elements
 * Group items
 * Create visual connections

Whitespace
Whitespace is a critical element for both visual impact and readability. It feels quite inviting when a web page is laid out in such a fashion that the organization of the page (and the site) is clearly conveyed in a split of a second. A common way that people pursue organization is by having markers that separate the different parts of the site: in web design icons and illustrations are used to separate various types of content. Traditional systems such as the Swiss style emphasizes using using less, so instead of adding more elements to work with, they prefer to remove as much as possible. This is a great example of the ‘less is more’ principle and of the ‘the content is the interface’ wisdom.

Marking Paragraphs
Paragraphs do not occur in nature. Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways

In the Elements of Typographic Style, Robert Bringhurst summarizes that the function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.