|
(originally published in The
Jerusalem Post, October 2004)
Typography: How It Affects Your Web Site's Success
A discussion among designers about type styles (fonts) can
sound like a connoisseur's review of a fine wine, utilizing
terms such as robust, generous, unassuming, warm, flaccid,
etc. While this can sound comical to the uninitiated, remember
that in subtle, even subliminal ways, poor font choices (a
frequent hallmark of amateur design) undermine the image
a site aims to project. A typeface can be modern or traditional.
It can also be whimsical or conservative, artistic or "techno",
classic or strongly associated with a very specific historical
period.
Typography, among the more esoteric graphical arts, is a
key tool in a designer's kit. And font selection is among
the first design decisions in a new Web site, especially
if logo design is part of the project. Informed choices of
typeface, letter sizes, line lengths, line spacing, character
spacing, and word spacing greatly affect a visitor's ability
to easily read -- and remember -- the information on a Web
page.
Skillful use of fonts can also supply interest
and "eye candy" even when more conventional graphics
-- images -- are absent. Most letter shapes are intrinsically
beautiful. Greatly magnifying letters can have a remarkably
strong graphic effect. It's useful to study poster art of
the 20th century to see how very effective good typographical
design is.
But there's a major "gotcha" regarding typography
on the Web: few fonts are available for text rendering across
many types of browsers. Special text effects must be prepared
as images in graphics programs, and should be kept to a minimum
since, like all graphics, they can make pages load slowly.
They're best reserved for headlines, pull quotes, drop caps,
etc.
It's also important to prepare these letter images in an
appropriate program that can produce clean, legible typeface
and optimize the image so it downloads quickly. Graphical
text should not be jagged or blurred.
Layout is an equally important typographical
consideration. Whitespace -- the empty areas between page
elements -- is your friend. A frequent problem in Web page
design is crowding so many elements together that the reader
doesn't know where to look first. Skillful typography guides
the reader's eye and helps him to absorb and retain the information
on a page.
Uber-designer Robin Williams offers a memorable acronym for
the essentials of good layout: CRAP. Contrast, repetition,
alignment, and proximity. Here's a sampling of her cogent
advice on each of these elements:
- Contrast. Create a focal point
with strong contrast. Wimpy, barely noticeable differences
produce conflict rather than contrast.
- Repetition. Repeat certain
elements (colors, illustrations, typefaces) to link the
disparate parts.
- Alignment. Work with a grid that lines
up the sections of a page with one another. Be consistent.
- Proximity. Group related items closely
together.
When these layout principles are skillfully applied, a page
can have tremendous impact -- as well as legibility -- even
if there are no illustrations, and even if a page is only
in black and white. (Varying text density, size and typeface
produces many "colors" of gray that can highlight
specific portions of the page.) Great newspaper typography
aptly illustrates these principles.
Want to apply an acid test to typographical design? Print
out a Web page in black and white and cover up any photographs.
A well-designed page will still be clear, organized, and
very attractive.
Typography is a deep, rich topic and I can't do it justice
in a brief article. But it's worth exploring further, even
if you have no interest in joining the ranks of fontaholics.
Grasping typographical basics will make all your
written communications more successful: resumes, proposals,
business letters, newsletters, business cards, etc. Explore
some of the resources I've prepared for you below. Have fun!
Resources:
What
You See Is What You Get: An analysis of the logos of
the 2004 US Presidential contenders, illustrating the power --
and the wimpiness --of their respective subliminal
messages.
I'm a Robin Williams groupie. Not the actor; the designer.
Unfortunately, her online articles are slightly dated and
don't really showcase her witty, fun-to-read style -- but
they're still worth a look:
For a more in-depth understanding of typography and design,
Williams' books are a must-have:
John D. Berry's online columns offer a good overview of
typographic issues:
Pictures are worth lots of words; check out effective typographic
examples of posters and newspapers:
Do you have any questions? Contact
me and I'll try to answer them in upcoming articles. Also,
you may subscribe for
free to the AtarTec newsletter, which consists of new
articles as well as notifications of critical Windows
updates and relevant virus information.
Request a free
estimate for your web site project.
to top
|
