Website readability

["Geoff Hart (by way of \"Eric J. Ray\" <ejray -at- raycomm -dot- com>)" <ght -at- MTL -dot- FERIC -dot- CA>]

Doug Max wondered about the best font, font color, and font size for
use on a Website. As in all typographic issues, there is no one
"best" solution; rather, there will almost always be several equally
good alternative solutions. Here are a few general suggestions:

General: Much though I love the theory of "cascading style sheets", I
hate being locked into some designer's personal preference for fonts.
Based on my own reaction to online typography, I much prefer letting
users choose their own fonts. If you can resist the temptation to
hardwire the typography in your HTML document, you're more likely to
succeed for a larger number of users.

Font: Sans serif is generally the most readable online, but if you're
using a reasonably large size (say, 12-point), serif works every bit
as well. (Personal experience... YMMV.)  Make sure that whichever
font you choose, the one (1) is distinct from the lower-case L and I
(l and i); in many fonts, the three characters are indistinguishable,
and this poses particular problems for e-mail addresses and URLs
(many users still write them down instead of copying them
automatically); even outside e-mail and URLs, words like "fill"
become difficult to read. Try to pick a font with relatively even
strokes (i.e., fine strokes can vanish more easily, just like serifs)
and with a good x-height (the height of the lower-case x).

Color: Black on pale ivory or tan probably offers the best
combination of high contrast (essential for legibility) and "easy on
the eyes"; black on white provides the greatest contrast, but may be
overkill and looks kinda dull. If you avoid a textured background,
you can afford to use more color; if you use texture, you'll really
have to make the color faint or the font bold to preserve legibility.
The trick in preserving contrast is to pick colors that have very
different "values" (i.e. % of black mixed into the colors); most
graphics programs will let you figure out the value of each color,
even if only by converting the colored objects to grayscale and
making a visual estimation of the degree of contrast. Another
easy test is to make a black and white photocopy of a color
printout; if the subjective degree of contrast remains good, the
color choice is suitable. Don't forget, even though you've probably
got a nice 17-inch monitor that displays thousands or millions of
colors, a large chunk of your audience is stuck with character
terminals (e.g., Lynx) or monochrome screens (e.g., many dumb
terminals, older laptops), or endures one of several forms of color
blindness and won't be able to make color distinctions anyway unless
you base them on value. (There are a few poor souls who can't make
value judgments--pun not intended--but I believe they can generally
make color (hue) distinctions instead.)

Size: My reflex reaction nowadays, as a result of aging eyes that
resent staring at computer screens all day, is to automatically
reformat any online text I have to read into at least 12 point and
sometimes 14 (it'll depend on the typeface used). Given that there
are no paper costs to cover, and no difference whatsoever in download
time, I can't understand why anyone would settle for anything less
than 10 point on the Web, yet I'm continuously being assaulted by
miniscule type. Don't do it! If you won't let your users define their
own type sizes, make sure to start large enough that the type will
remain legible even for curmudgeons like me.
--Geoff Hart @8^{)}
geoff-h -at- mtl -dot- feric -dot- ca

"Men are from Earth. Women are from Earth. Deal with it."--Author unknown

 From ??? -at- ??? Sun Jan 00 00:00:00 0000=