DESIGNING FOR THE EASY READ AND SEO FRIENDLY WEBSITE

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 that those studies say quite a lot. And much of it is contrary to commonly held beliefs. Below are five design tips culled from research conducted by a number of 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 a comparison. For years, designers using serif fonts have claimed that they 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 do 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 an historical artifact with no clear benefit that we’ve come to accept and have 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. Truly.
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, there’s a great deal of misinformation and legacy thinking involved when choosing the best font sizes. First, font sizes vary depending upon font faces and the browser settings used. Second, sizes can be described in a bewildering variety of mutually incompatible units, such as points, pixels, ems and percentages. And third, font sizes as displayed on the computer screen can be easily manipulated by the reader with one keystroke. So, in short, there’s no definitive answer for the best font size.Interestingly, what the research does support is counter-intuitive. A large font size, while being easier 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 newsoriented 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 still read the full articles.
The trend in website design today may be towards larger fonts,but while an increase in size may be easier on the eyes, research shows that it also promotes scanning rather than reading articles in their entirety.

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 percent. Further, this type of layout was also chosen 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 to 6 lines or fewer • Keep spacing between paragraphs at 75 percent of line height • Add headings and subheads (also bullet points and lists) to provide variety in line lengths • Maintain high contrast between the font and background colors (black or near-black text on a white background is easiest to read)

4) Headlines

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 publications such as Time, People and Parents Magazine. However, research has shown that capitalization actually reduces reading comprehension because it slows down the eye movement and requires the reader to take 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 bad typewriter design, monospaced typefaces and limited printing options. In the 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-everyword 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!” .

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 number of designated sections 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 have a tendency to skip the text below.

Final Suggestion

Before you implement any of these design tips, 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.

http://www.ferrassi.com/2011/12/designing-for-the-easy-read/