Eight Things You Can Do Now To Improve On-Screen Readability
1. Take more control over default fonts. The type you want your readers to see might not be installed on their computers. If they don't have it, your type will default to something generic.
To increase the chance that your site will appear with a typeface you intend, you might want to specify up to four different fonts that users might have on their computers, in order of your preference. You'll want to stick with fonts that most users have. The computer will try to use each of these in turn before applying the default typeface. If you want a sans serif, you might choose, for example: "Verdana, Trebuchet, Helvetica, Geneva."
In most cases, "Arial" will replace a sans serif; "Times" or "Times New Roman" will replace a serif.
2. Don't justify your text. At this point, the controls you have over word space are very basic. If you justify text, you'll generally get "rivers" of white space running through each paragraph that are very distracting.
3. Define type size by pixel, not by point size. Each monitor resolution will be different, so the type that you specify as "10 point" might measure as 14 points on one system and something different on another.
4. Limit underlining in text. Too many horizontal lines might cause the reader to stop in mid-thought. Chances are, they won't start again. If you feel the need to identify a link by underlining rather than with color, for example, underline only a word or two.
5. Clean up the details. Just as with print design, consistency is important. Sloppy typographic detail makes readers suspect that the reporting and editing might be sloppy, too. Set up uniform spacing between and around paragraphs. Fill out the lines on headlines so that they don't break to form a "widow." Here's an example of a poorly crafted headline:
If the headline breaks, fix
6. Use Cascading Style Sheets (CSS), a type of html technology that allows you greater control over how your page appears in the browser. For text, this includes control over the font, size, style, color, spacing, weight and alignment, etc.
Another advantage of CSS is that it makes updating your site easier. If you decide to redesign your site and you've used CSS, for example, you merely change the specs in one place and the changes are recorded throughout the site.
One disadvantage is that not all browsers support CSS and its newer version, CSS2.
To read what some of the top interactive designers have to say about CSS, click here.
7. If you have deep enough pockets, and you're intent on creating a specific design brand for your site, your news organization might want to commission a text font of its own. While expensive, this gives you exclusive rights to use the typeface as your brand. This would allow you to embed the font into your site -- which basically means you'd be giving the font to each of your readers.
A less expensive route, with similar typographic control, is to embed a font like Verdana, Georgia or Trebuchet into your site. A word of caution, though, you'll need to check into the license you have for the font. Owning it for use on your personal computer is not the same as owning it for mass circulation. When you embed a font, the user is downloading it onto his or her computer.
You may embed a font only after you have paid for it, according to the terms of your contract.
These two sites will be helpful if you want to go this route:
8. What About PDF Files? Some people contend that the best way to present a newspaper online is by creating a pdf (portable document format) of each newspaper page. Adobe Systems invented the system a little more than 10 years ago. A pdf captures the page -- type, image and graphics -- exactly as it has been printed. It can then be read on the screen, or printed out. This preserves the brand and identity of the publication.
The front pages of more than 300 U.S. and international newspapers are displayed as pdf files on the Newseum site each day.
CORRECTION: An earlier version of this article incorrectly reported that justifying online text would yield excessive hypenation. In fact, type displayed in html is not automatically hypenated.