If you were to Google ways to improve your website’s readability, you’d find thousands of articles and blog entries with tips, opinions, and advice. Most of it would cover similar ground and reinforce conventional wisdom. Some of it would be flat out wrong. And nearly all of it would lack scientific underpinnings and be based solely on personal preference and anecdotal evidence.
So what should you believe? Better yet, what do the empirical studies say about making website copy easier to read?
It turns out they say quite a lot. And much of it is contrary to commonly held beliefs. The following highlights 5 design tips culled from research conducted by several well-known, reputable institutions from Stanford University to Nielsen Norman Group:
1) Serif vs. Sans Serif
Perhaps no topic is discussed with more misplaced confidence than the debate over using serif or sans serif fonts in headline and body text.
Briefly, “serifs” are the small decorative lines on the end of a letter or symbol. Take a close look at Times Roman on your computer as an example. A “sans serif” font does not have these lines. See Helvetica for comparison.
For years, designers using serif fonts have claimed the serifs guide the horizontal flow of the eyes, making text easier to read.
The trouble is, there’s no definitive research to support this.
In fact, the research makes almost an opposite claim that eyes did not move along a line of text in one smooth sweep but in a series of quick jerks, which renders the need for serifs irrelevant.
Serifs are likely just a historical artifact with no apparent benefit that we’ve come to accept and grown used to.
But don’t jump onto the sans serif bandwagon just yet. The most recent studies show virtually no difference in the legibility between serif and sans serif fonts.
The bottom line: it doesn’t really matter. Feel free to use either. Other factors, such as size, white space, stroke thickness, x-height, and line-height, matter much more.
2) Font Size
Similar to the serif-vs.-sans serif discussion above, there’s a great deal of misinformation and legacy thinking involved when choosing the best font size.
First, font sizes vary depending upon font faces and browser used. Second, sizes can be described in a bewildering variety of mutually incompatible units, such as points, pixels, ems, and percentages. And third, font size as displayed on the computer screen can be easily manipulated by the reader.
So, in short, there’s no definitive answer for the best font size, like always use 14 pixels or 1em for body copy.
Interestingly, what the research does support is counter-intuitive.
A large font size, while being more comfortable to read, promotes scanning as visitors look for words and phrases that capture their attention. This is especially true for headlines on a website’s home page. Tests show that headlines with large type are scanned more often than headlines using smaller type.
Conversely, a smaller font size -- but one that’s still comfortable to the eyes -- actually encourages people to read the individual words because the smaller text requires more focused behavior.
Take a look at the most popular news-oriented websites. From the New York Times and Wall Street Journal to Vanity Fair and even The Huffington Post, the text of stories is displayed in relatively smaller fonts. Yet, people will still read the full articles.
The trend in website design today may be towards larger fonts, but just be aware that the increase in size may be easier to read yet make the text more likely to be scanned.
3) White Space
Font size matters, but a text’s readability may be more influenced by its surrounding white space.
One of the more definitive studies suggests that the use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Further, this type of layout was also chosen during the research as “most liked” and “easiest to read.”
There are no exact metrics for creating the perfect white space. And white space can be created a number of different ways. However, here’s a pretty good guide to get started:
- Provide comfortable left and right margins
- Use a line-height -- called leading in the print world -- around 1.5 times the font size
- Limit your paragraphs to 4-6 lines or fewer (there’s nothing wrong with a one-sentence paragraph)
- Keep spacing between paragraphs at 75% of line-height
- Add headings and subheads as well as bullet points and lists to provide variety in line lenghts
- Be sure to maintain high contrast between font colors and the background. Black or near-black text on a white background is easiest to read.
Here’s a habit you may find the most difficult to break: Stop capitalizing every important word in your headline.
The publishing industry refers to this as the “Up” style, and its use is popular among traditional publishers such as Time, People and Parents Magazine.
However, research has shown that capitalization reduces reading comprehension because it slows down the eye movement and requires the reader to ake more effort to extract the information.
Readers, in general, are used to comprehending sentences with natural capitalization – and punctuation for that matter.
The initial caps styling, along with underlining and double spacing after a period, is a relic of lousy typewriter design, monospaced typefaces, and limited printing options.
In days of yore, initial caps or even all caps were used to distinguish headlines from the rest of the copy. This is no longer necessary since the introduction of desktop publishing.
So follow the lead of the Associated Press. Ditch the cap-every-word approach. And capitalize only the first word and proper nouns in the headline. However, you can keep the Up style for few-word headlines like “Great War Ends!” and “Dewey Defeats Truman.”
5) Headline-to-body ratio and styling
Type size also influences how people read headlines in conjunction with the summary or teaser text beneath them. You’ll find this most often on home pages where there are a several of text boxes that highlight content on interior pages.
Research has shown that when the headline and text are similar in size and weight, people tend to read both. But when the headline is significantly larger or set apart from the text with a visual break, people would often skip the smaller text.
The most common visual break is underlining. When you underline the headline, readers tend to skip the text below.
Before you implement any of the design tips above, keep this in mind: Website design requires a delicate balance between building the appropriate brand image and usability, i.e., form and function. All guidelines should be adapted to the situation. Common sense and aesthetic quality should prevail. Or as Steve Jobs once said, “It's technology married with liberal arts, married with the humanities, that yields us the result that makes our heart sing.”