from Floyd College Instructional Resource Center
text> choosing screen fonts
readers tend to read selectively when reading web pages, looking for important
information rather than reading every word.
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.
text that is as legible as possible, you can use specially designed "screen
fonts", which overcome the limitations of today's computer monitors.
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.
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.
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.
fonts specially designed to look good on a computer screen. These are
called screen fonts.
Serif and sans serif fonts
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.
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.
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.
Serifs can aid reading by providing more visual information about letter
shapes, and thus for increasing the speed of letter recognition. Most
people are familiar with serif fonts like Times from desktop publishing.
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.
in both sets of sample sentences is in 12 points; what makes one font
more legible than another?
What makes fonts legible?
may have noticed in the sample sentences above that sans serif fonts produce
larger, more "open" letters than serif fonts and, as a result,
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.
available on most users' computers, including Macs, so most people will
see your page as you intend (although users can change the text size).
the IRC site, Verdana is used for all text, including that on the main
navigation tabs, because it is so legible on screen.
It should probably be your font of choice for all body text.
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.
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).
is no coincidence that both Verdana and Georgia were designed specifically
for use as screen fonts by Matthew Carter for Microsoft. You can download
them for free.
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).
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.
the best practice is not to use Times on any display text.