The Details Matter

April 29, 2014

By Web Programmer Ross Nelson

Imagine the following: You decide to go all out and visit a 5 star restaurant for a lavish meal. The venue is amazing, the patrons are well dressed and the atmosphere is top notch. You are handed the menu and the descriptions of the meals whet your appetite for a fantastic meal. Finally the meal arrives. You are surprised. While the description of your meal was accurate, they have packaged it in a paper bag and wrapped it up in something reminiscent of your local fast food joint.

Is this the presentation you expected? Not at all. The same can be said for your website’s presentation. If it leaves something to be desired, you may be losing potential clients. A website should be easy to navigate and a pleasure to browse. The quality of your site’s design greatly affects its ease of use.

Much of a site’s usability can be attributed to its use of whitespace. Whitespace can be defined as the empty spaces in a design. It is used to separate design elements and group similar ones. Whitespace is not always “white” — it is the empty parts of the page. When there is a lack of whitespace on the page, a site will look cluttered. Your visitors will not know how to best navigate your site or what to look at first, resulting in a higher rate of visitors leaving the site prematurely.

One designer relates, “when used correctly, whitespace can enhance the performance of a web-site, improve readability and make a great first impression.” The InspiredMag blog states, “in many ways, white spaces direct how and upon what terms we “read” a particular design. They dictate (and thus direct) the visual flow and coherency of a visual composition.”

The design of the typography on your site is another important factor lending to its usability. When text is cramped, small, or lacks hierarchy, the legibility is lost. A term often used when laying out type is how scannable it is.

What makes copy scannable? Header size and position, body text size, text line height, text contrast and line length all impact how scannable copy is.

Researchers have found reading takes place in small leaps of 5–10 characters at a time. 55–60 characters (including spaces) per line could be considered an appropriate line length, allowing the eye 6–12 quick stops on each line. This can be a delicate balance and is affected by the size of your text. If lines are too short, readers can not easily retain the information within each line. If the lines are too long, jumping back to the beginning of a line can become difficult.

Think back to the meal you expected to be served. How should it have been presented? Your selected meal should be delicately placed on a large plate, some color arrangements and lots of whitespace. Now that you know what to look for, consider the following examples of excellent use of whitespace and typography in the wild.

Whitespace Examples

Typographic Examples