We are a nation of scanners. When we encounter a new web page our eyes quickly dart through the content looking for keywords and sentences, callouts and subheadings, details that will grab our attention and encourage us to read more.

Research studies have shown this to be true. Jakob Nielsen’s seminal study from 1997 on “How Users Read on the Web,” found that the vast majority of users scan pages for information, and are very unlikely to read pages word for word. In a subsequent Alertbox post from 2008, Neilsen argues that on average, users only read about 20% of the text on a web page.

It is not just impatience that keeps us from reading online content thoroughly. The article “The Technology of Text” by Kevin Larson, a reading psychologist from Microsoft’s Advanced Reading Technology Team, demonstrated that reading online is much more difficult than reading in print because of the low quality (dpi) of computer text which causes eye fatigue and slows down considerably our ability to comprehend what we read.

Flagler screenshot without typographical styles

[Before typographic styling]

So, if you know that people are not going to read all of your copy, how can you make sure they at least get the message and take the action you want them to take?

First and foremost, text needs to be written for the Web. Far too often, people take content from their publications and paste it on their website with little or no thought about how the information will be interpreted. There are a lot of tips available for writing copy so that people are more likely to read it. Common suggestions include:

  • Crafting memorable headlines and clear sub-headings
  • Bulleted or numbered lists
  • Step-by-step instructions
  • And, in general, keeping text brief and to the point

But even if text is written for the Web, it doesn’t guarantee people will still be able to scan it quickly. Long pages of content that are not properly styled will quickly be skipped, leaving your site visitors without the information they are seeking.

Typography is the art of designing and choosing typefaces, selecting the size, color, spacing, and placement of content, and using type to create a hierarchy of information.  Web typography is an increasingly important factor in site design, usability and readability.

How can you get started?

Establish a hierarchy

  • Decide what you want your site visitor to see first, second and third. Style an intro sentence, headings and subheadings to engage visitors and encourage them to read more.
  • An introductory sentence or paragraph can be set off with larger type, different font or color. (Consider choosing two main fonts to work with, a serif and a sans serif. Use the serif for headings, and the sans serif for body copy.)
  • Make the main heading stand out from body copy by selecting a different font, color, size, or boldness (but not all of those things please! Over-emphasis has the reverse effect –  people will avoid looking at it.)
  • Treat subheadings in a similar way, but make sure the hierarchy is clear. Subheadings should be smaller than main headings but still distinguishable from the text. They could be the same color as the text but a little bigger and bolder. Or perhaps they have a visual clue that helps break up the text, such as a line underneath.

Flagler screenshot after using typographic styling

[After typographic styling]

Embrace space

  • Allowing enough white space aroun d the page content, above subheadings, and between lines of copy (line-height) makes the content more inviting, and less intimidating.

Play with Contrast

  • While black text on a white background is best for long paragraphs of text, if all of the type on the page is treated the same way, it takes longer for a user to pull out different information
  • Consider making your biggest calls to action contrast significantly from the rest of the content on the page. A brightly colored button in a sea of black and white will stand out prominently and encourage uses to take that action. Similarly a caption can stand out nicely under a photo in a colored box.

Find out more tips about typography on the Web at my webinar next Tuesday, September 20, “Web Typography – Techniques for Improving the Effectiveness of Your Website.” Space is limited, so register today.

You can also learn more about Web typography and a multitude of other subjects related to the Web geared specifically to Web strategists, content managers, designers and developers at Empower 2011 – SiteExecutive user conference.