Some of you who now design web pages may have started out designing documents for print, such as newsletters or other publications. When designing pages for the web, take time to question the typographical rules that are taken for granted in print media. A web page is read on a screen--a very alien environment for reading (in fact, some people prefer to print web documents and read them on paper). There are several ways you can make your text more readable on the web, reduce eye strain, and give your users a more pleasant browsing experience. In fact, literature indicates that people don't read on the web...they browse, spending about 10-20 seconds per page.

Some of you who now design web pages may have stared out designing documents for print, such as newsletters or other publications. When designing pages for the web, take the time to question the typographical rules that are taken for granted in print media. A web page is read on a screen -- a very alien environment for reading (in fact, some people prefer to print web documents and read them on paper.) There are several ways you can make your text more readable on the web, reduce eye strain, and give your users a more pleasant browsing experience.

In the print world, one learns that serif typefaces are easier to read in print, because the serifs create a line for the eye to travel. This rule is highly debatable in web use -- in many cases, a sans-serif font can be easier to read in the web viewing environment. Sans-serif fonts that were designed for use on the screen rather than in print (for example, Microsoft's Verdana) have more flat edges and less rounded corners than serif fonts; their blockiness makes them easier to read on the screen.

Choosing whether to use a serif or sans-serif font in your web page is a matter of personal preference -- when reading web pages, take note of when you find a paragraph easy or difficult to read, and then find out what font is used by looking at the page's source.

Some typographic techniques that make a page look good in print media can actually make pages harder to read on the web. The following are some techniques that should be avoided in web use.

It is most natural for your user to read left to right, so stick to left-aligning text in the body of your page. Reading text on a screen is difficult by nature, and it is made more difficult if the reader's eye has no left margin to return to. Centering is not off-limits, but it should be used sparingly.

Italicized text looks pretty in print, but is difficult to read on a screen because its angles fight the square pixel grid of the computer screen. If using italics for emphasis, try using a different color instead.

An <h1> size (about 24pt) is rarely appropriate. If you're designing web pages on a Macintosh, bear in mind that large font sizes to you will look even larger in Windows.

You've probably heard that a line of text should be kept to about 8-10 words per line. A line of text all the way across a browser window is much longer than that, and can be very difficult to read. Try constraining your line widths through the use of tables with defined widths (either an absolute width or a percentage will work.) You can also try breaking up your page into two or three columns. Keep in mind that the browser window has more of a landscape orientation.

Stick to the fonts you are somewhat certain will be installed on your user's machine. It is also a good idea to define both a Windows and Mac system font (when multiple fonts are listed, the browser will display the first font listed that is installed on the system.) These are some good font sets for web use (with the <font face> tag):

Times New Roman, Times, serif: a serif font set.

Arial, Helvetica, sans-serif: a sans-serif font set.

Verdana, Arial, Helvetica, sans-serif: another sans-serif font set that takes advantage of the font Verdana, designed for screen use.

Courier New, Courier, mono: fixed-width fonts.

One other note about text on the web -- when designing web pages on a Macintosh, keep in mind that your text will appear larger in a Windows environment. Text generally looks about two to three points larger on Windows. This will effect how much area your text takes up on the screen and also how lines wrap. To simulate this viewing environment, you can change your browser's default font size from 12pt to 14pt, but the best policy is to check your pages on both operating systems.