The first and most important rule of good web typography
is to plan for change. Michael McPherson,
principal of Boston-based branding and design firm
Corey McPherson Nash
clear ideas about web design. When asked what are
the most important typographic aspects to consider,
his first answer is, “Realize that your type can—and
will—be resized, cut, and generally mutilated by
browsers, poor monitors, and search engines. Half of
the visitors to your site will read and navigate using
search engines that completely strip your design and
layout from the content. Plan for it.”
How do you plan for catastrophic typographic
changes? By following the other golden rule of web
typography: Keep things simple.
1. Avoid fancy type.
Fancy typefaces are generally not at home on the
web. This is because decorative typefaces can detract
from the communication process. And, unless fancy
typefaces are used very large, the fancy bits are lost
because of the low resolution of computer monitors.
There are, however, typefaces that have been
specifically designed to perform well in a resolutionchallenged
environment. These are straightforward
designs that were drawn to take the best advantage of
limited pixels. McPherson has his favorites: “The best
typefaces are styles that were developed with lowresolution
output in mind. We like Verdana, Georgia,
Arial, DIN, Base, and Matrix.” Of those favorites,
Verdana and Georgia were expressly designed for
on-screen viewing. Other designs to consider would
be Trebuchet, Lucida, or ITC Charter. All have great
track records online.
Scripts generally do not translate well to web
pages. If you really want to use a script, choose one
that is bold and not too fancy. Try a face like Brophy
Script or Nadianne.
While bold designs are usually the best for headlines
and subheads, a typeface that is too bold—or
that has very narrow counters—can be difficult to
read on the web. If you’re not sure which weight of
the font to use, choose the lighter one.
2. Don’t use too many fonts.
Limit web pages to one or two typefaces. It’s all
right to use one or two variations (like bold or italic)
from each family, but three or more different typefaces
do nothing but clutter the page and confuse
the message. Web pages are not the place to show
off the size and diversity of your type library.
3. Set type big.
Setting type big also makes it easer for visitors to
read the content. The simple fact is, with modest
screen resolutions, the bigger the type, the more
pixels you have to define the letters … and the better
your electronic pages will look. Text type as big
as 16 point won’t look ungainly and will be significantly easier to read than the smaller stuff.
4. Lose the decoration.
A reader should never have to plow through a forest
of buttons and fancy graphics to get simple information.
If it doesn’t aid in the communication process,
5. Use HTML copy.
Another McPherson guideline is to set most of
the copy in HTML using a basic “system font”
like Verdana. “In most cases designers should use
HTML type rather than graphic type for the nonbranded
parts of the page,” says McPherson. “Type
converted to an image is not searchable, requires
longer download time, and is more difficult to
change or maintain.” Setting the type in a system
font will also go a long way in ensuring that your
copy will look the way you intend. McPherson also
advises, “When using HTML copy, Cascading Style
Sheets are valuable tools for controlling the appearance
of the pages on a range of browsers.”
For those places where text is preserved as an
image, try adding a little “plus-tracking.” This can
help to keep letters from blending together—fonts
straight from the box almost always space too tight
for web graphics.
6. Don’t rely too much on color.
Color is not as strong a tool on the web as it is in
print. “One of the most common mistakes is relying
on color to achieve legibility,” warns McPherson.
“Web designers—and clients—must remember
that a website can appear very different on different
monitors and browsers. The robust structure of the
typographic layout is far more important than subtle
nuances of color.”
7. Design for scanning (online readers don’t read).
The only person that will read every word of
what you’ve written is your mother. Everybody
else is too busy. Readers skim, peruse, scan, and
generally bounce around. This is true for the
world of print—and doubly so for the web. Large
blocks of copy also tend to be somewhat daunting.
Unless they are devoted fans of McSweeney’s
(www.mcsweeneys.net), most online readers will not
take the plunge into a large vat of text, especially at
the top levels of a site.
8. Make text bite-size.
McPherson recommends “breaking the text into
smaller chunks and providing informative subheads
to help readers skim for information. Jump
links for long columns are helpful, and sometimes
it is advisable to divide the copy and place it on
separate pages with links.” Other sage advice from
McPherson: “Web page visitors tend to be more
tolerant of larger amounts of text at deeper levels
within the site. They have self-selected at the upper
levels and are looking for more content as they travel
9. Keep line lengths short.
Keeping line lengths short is also a smart idea. A
good rule of thumb is to keep column width to a
maximum of 12 words. Narrow columns aid the
reading process—especially in web pages. They
allow the eye to quickly scan a line and drop down
to the next. If very long lines are used, the reader
may have to scroll horizontally to read the text.
When this happens, you can count on about one
line being read.