The style of text you choose and the way you use it has huge implications for the usability of your site. There is much to be said for boring predictability in this area, people read most easily when the appearance of the text they are reading has some familiarity. 

Reading From a Screen

There is a lot of evidence to support the belief that serif fonts, such as Times New Roman (TNR), are more readable than sans serif fonts, such as Arial, in printed material. On the page the serifs provide visual clues that help readers to see the shapes of letters and words, at least partly because they are so widely used that we are accustomed to seeing them. 

On screen the situation is less clear cut. Even high screen resolutions are insufficient to accurately reproduce the serifs and the lower the resolution the greater the problem. 

Thus it has been generally recommended that sans serif fonts, such as Arial and Verdana, are used online and they are they ones we most commonly see. However recent research seems to knock conventional wisdom on the head and reveals that font readability might in fact be determined by what the user is accustomed to reading. All studies are unanimous on size however - anything less that 10pt creates difficulties for many users.

Another problem on screen is that it is difficult to read wide lines of text. Anything more than 10 to 12 words per line becomes awkward and readers tend to lose their place in the text. 

The behaviour of readers using the Internet is quite different from readers of books. Mostly Internet users scan pages looking for visual clues to the content they need. So to facilitate this text needs to be broken into small blocks, paragraphs need headlines and important words should be emphasized.

Design Decisions and Choices

1. Font Selection

You cannot choose any font you like - users can only see fonts that are loaded on their computers. There are just a few that you can rely on the majority of people having and they are fairly plain. Times New Roman, Ariel and New Courier are on most computers though some Macs will not have them. Other commonly available ones are Verdana and Tahoma. These fonts also have the advantage that being common they will be more easily read.

If the font you specify is unavailable the text will appear in the default font as set in the users browser. This is not necessarily a bad thing and some people would recommend that it is best not to specify a font at all and to let the users' choice prevail. In practice most users never change from the default, usually Arial or Times New Roman. 

Thus the choice of font for the main text content is fairly limited and not too difficult to make. You can introduce less common fonts to your site however. If you are a 'font junkie' and have vast collections of fonts, they can be used to make small graphics (.gifs) of text to use as headings or on navigation buttons. If you do this be sure to use alternate text for these graphics, partly because search engines cannot read text in a graphic and partly because neither can text only browsers.

Fonts should be used consistently and in moderation even when using them as graphics. It takes a lot of skill to make a mixture of font faces on the same page look anything other than a mess.

2. Font Size 

Although users can change the font size they see in their browsers, many are unaware of this and others will not do so just to read a site whose body text is too small for them to read comfortably. They will simply leave. Large text is the mark of the novice designer. It seems to equate with 'make it bigger and they will see it better' but they won't, most of it will disappear below the crease and never be read. Unless you are very sure of your audience a medium sized font (10 or 12 pixels) is the best choice for text intended to be read.

Another common mistake is the use of huge headings. These are not only unnecessary but also look ugly and push the rest of the text down the page. There are many other ways to emphasize headings - use bold text, or italicized text, different colored text or text on colored background. Never use underlines to emphasize headings, Internet users take it as a given that anything underlined is a link and if they find it is not become uncomfortable.

Once you have decided on a size the problems begin. Different browsers will render your text differently. The default font size in Netscape is smaller than that in Internet Explorer; Macs tend to display fonts smaller still. You need to test your page at various resolutions and in various browsers and if possible find a friend with a Mac also. You cannot expect it to look identical on all but it should look good and be readable. If you err slightly on the side of large rather than small you will avoid most problems. 

The ideal for text is probably not to set a size at all and allow the users choice to prevail. Few of us however are satisfied with this from a design point of view, the default heading sizes for example tend to be much larger than we would generally choose. Using CSS and defining your text size in percentages is one way to both have some control over design while still allowing for user choice. It can be tricky to pull off in a cross browser compatible manner but it is possible with a bit of care.

3. Text Alignment

This is a design decision that will be made largely in the context of the rest of your layout. In the vast majority of cases where text is intended to be read left aligned text is best, chiefly because it is what people are used to reading. However right aligned text and centered text have a place in certain page layouts. 

Centered text should be used sparingly; it is difficult to read, is another indicator of inexperience and unless very expertly designed can look a bit ugly, especially when used for long blocks of text. Centering of page headings, or headlines within articles, as a means of making them stand out can work very well however.

Justified text is almost always a problem on web pages. In print justified text is created by making small and subtle changes in the spacing between words and between the letters within words. Even high screen resolutions have difficulty in recreating these small changes without seriously altering the 'shape' of words. As a result spacing tends to be uneven, breaking up the shape of words and phrases and making them difficult to read. 

Another problem is that browsers do not support hyphenation, so while in print a word can be broken over two lines with a hyphen in the middle on screen e x c e s s i v e spacing within words will occur instead with very unhappy results from a visual point of view.

4. Text Layout

As previously mentioned it is best not to have lines that are too wide, with the general guide line of aiming for no more than 10-12 words per line. Using a multiple column layout will help with this in some page layouts but you need to be sure that the columns are not too narrow on small screens or at lower resolutions. This can result in an untidy page with long thin blocks of text sometimes no more than a word or two in width.

White space (which need not actually be white!) is a very important factor in improving text readability. Using wide margins, to create areas of space on the page around the text, can give your paragraphs 'shape' and make the text easier to read.

Paragraphs on screen should be not just narrow but also short, no more than 8 to 10 lines long, and there should be a generous space between them. Even with relatively narrow lines it has been well demonstrated that when reading from a screen users have difficulty moving from the end of one line of text to the beginning of the next line. Creating 'shapes' on the page with your paragraphs makes life easier for them.

Some Links

How Users Read on the Web
A pretty old article from Jacob Neilsen but still worth a read.
http://www.useit.com/alertbox/9710a.html

HTML E-Mail: Text Font Readability Study
An interesting look at the serif/san serif debate
http://www.wilsonweb.com/wmt6/html-email-fonts.htm

A mixture of stuff
From Dan Furhman who has lots to say on the subject of fonts, browsers, typography and CSS; some heavy going but a lot of interesting stuff too.
http://style.cleverchimp.com/

Katherine Nolan
OutFront.net
A Microsoft FrontPage Learning Community