DESIGN-> text> choosing screen fonts

....... Introduction

In general, readers tend to read selectively when reading web pages, looking for important information rather than reading every word.

Furthermore, people often prefer to print large documents and read them offline. The text in your document, however, must still be legible on a computer monitor.

To display text that is as legible as possible, you can use specially designed "screen fonts", which overcome the limitations of today's computer monitors.

There is, however, a major problem with selecting a specific font. The problem with designing pages with a particular font in mind is that users can specify a font in their browser as the default display font, overriding your chosen font, and thus not seeing the text as you intended.

To get around this you could use all graphic text, which will look the same for all users, but a better solution is to use legible fonts that most users are likely to have installed on their computer.

Screen fonts

Printers uses hundreds of dots of ink per square inch to render type, but the computer screen uses only 72 to 96 pixels (the dots that make up the screen) per square inch. You can see a grid of pixels in Figure 1.

There are far fewer dots to display letters on screen than there are on paper, and, to make matters worse, pixels are square.

You can see the result of displaying a curved letter shape with a grid of large, square pixels in the curve of the letter N —jagged edges. Jagged edges on screen show up when a small font size (less than 10 points) is used.

There are fonts specially designed to look good on a computer screen. These are called screen fonts.

Figure 1

Serif and sans serif fonts

The two major categories of fonts are serif and sans-serif fonts. Serifs, the small lines at the top and bottom of some letters, make printed text legible, but they do not show up well on a computer screen.

Because of the way monitors work, serifs tend to disappear on the computer screen, particularly at small type sizes, and sans-serif (without serifs) fonts are now widely used on the Web for screen text.

Verdana and Arial are the most common sans serif fonts on the Web, and are on most users' computers. Both are easy to read on screen because they, and MS Trebuchet, were designed specifically for screen reading.

Times and Times New Roman —a screen version of Times— are the most common serif fonts on the Web. If you want to use a serif font that most users are likely to have on their computer, use Georgia rather than Times. Georgia is legible on screen and looks good when printed.

Text in both sets of sample sentences is in 12 points; what makes one font more legible than another?

What makes fonts legible?

You may have noticed in the sample sentences above that sans serif fonts produce larger, more "open" letters than serif fonts and, as a result, longer sentences.

Verdana (Fig.1) is legible on screen partly because it has added space between letters (kerning) and large counters, which makes the letters distinct even at small sizes (i.e. 9 points and below); it is also easy to read when printed.

Verdana is available on most users' computers, including Macs, so most people will see your page as you intend (although users can change the text size).

Selecting a serif screen font

Georgia (Fig.2), a serif font, has generous kerning, which prevents letters from appearing to run together on screen, and the larger counters make the round letters appear more distinct on screen. The larger serifs are more distinct on screen than those in other serif fonts.

The letter shapes tend to use 90 or 45 degree angles, which render well on screen and are not too jagged (because pixels are square, and there are about 72 per inch on screen).

Times... not

Times (Fig.3) and Times New Roman, despite their poor on-screen legibility, are still widely used. Times is a print font, while Times New Roman is the screen version.

In the example, you can see how the uprights of the "m" and the "p" are so close that they blur together on screen (unlike Georgia, above).

Times was originally designed to maximize the amount of text that could be displayed in a line of print —hence letters that are close together. This runs counter to what makes text legible on a monitor. If you need to get a lot of text on a line, it is better to use Arial.