Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink

Further Reading Robert Bringhurst, The Elements of Typographic Style (Point Roberts, WA: Hartley & Marks, 1992) John Lewis, Typography: Design and Practice (New York: Taplinger, 1978) Edward R. Tufte, Envisioning Information (Cheshire, CT: Graphics Press, 1990) Robin Williams, The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice (San Francisco: Peachpit Press, 1994) Adrian Wilson, The Design of Books (San Francisco: Chronicle Books, 1993) Herman Zapf, About Alphabets: Some Marginal Notes on Type Design (Cambridge, MA: MIT Press, 1970)

Info pollution.
Data smog.
Chart junk.

The more ubiquitous the Net becomes in our daily lives, the more cluttered it becomes with pages that look like they've been designed in the dark—or worse, designed with the elbows and not the eyes.

Paula Antonelli, the curator of architecture and design for the Museum of Modern Art, remarks, "Most of the Internet exemplifies bad design—there's no balance between means and ends." The ends may be to get you to buy something, or to subscribe to some political philosophy, or to share your passions and knowledge. But the means are often unattractive enough to chase readers away—which is just what you don't want to do when designing your site.

Let's set aside the bells and whistles, the flashing JavaScript gewgaws and banner ads that fill (and sometimes assault) our eyes as we go from page to page. Here we'll concentrate not on images but words, and on simple techniques of typographic design that will best serve your ends—which, all other goals aside, should be to encourage your readers to pay attention to what you have to say.

Selecting the Right Font

If your computer is of recent vintage, you probably have an ample store of typefaces tucked away somewhere on your hard drive—fonts that came bundled with the operating system and other pieces of software. You likely own far more fonts, in fact, than the average commercial typesetting house kept on hand in the days before digital type became common.

Unless you make your living in typographic or graphic design, the chances are also good that you use only a handful of these fonts—workhorses like Times New Roman, Courier, and Palatino. The other fonts on your drive are little more than clutter, and you can safely dispose of them (and often free up system resources by doing so.)

Most commercially available typefaces are grouped in families that reflect both physical similarities and historical origins. For instances, so-called Old Style fonts, like Palatino and Garamond, were designed in the twentieth century, but hearken back to metal type forms made in the Renaissance; modern fonts like Helvetica and Gill Sans echo hand-drawn sign-lettering forms of more recent vintage. Browsing through a type catalog such as Adobe's online library of proprietary faces will give you a good idea of what members of those families have in common.

For our purposes, we'll divide type into just two categories: serif and sans serif.

This is a line of serif type.

This is a line of sans serif type.

Serif characters have small "hooks," or serifs, at their tops that connect one letter to the next. Though ancient, this convention bows to realities of vision that optical scientists have only recently discovered. When reading normal text in Western alphabets, our eyes skim over the tops of letterforms. The more discernible those forms are, and the more closely connected they are to their neighbors, the quicker we're able to read them.

Try this experiment: Take a sheet of paper or an index card, open any book of prose that falls to hand, and lay the paper across a line of type so that the text is completely covered. Slowly lower the paper until just the tops of the letters are exposed. Can you read the sentence? Lower the paper until you can. If you're reading a well-designed serif face, you won't have had to lower the paper much to pick out individual letters.

The earliest sans serif faces, like Arial and Helvetica, were designed in the eighteenth century and lack these hooks. Their first use was as an early kind of Braille for the blind; incised into paper, the letters were easy to trace with a finger. For the sighted, sans serif type slows the eye's progress across the page. Each letter stands alone and must be read as such, which you'll see if you try our experiment on a line of sans serif type. (You'll find such type in most print advertising, which wants you to take your time over each word, the idea being that you'll then be inspired to buy the product in question.)

The lesson is this: Choose your font to match the purpose of your content. For long pieces of text, a serif face is preferred; for headlines, display type, pull quotes, click-here-to-purchase callouts, and any other material that you want your reader to linger over, use a sans serif font. [Ed. note: whether serif or sans serif fonts are easier to read has long been a controversial issue—you can see where we stand on this issue.] Some modern digital sans serif fonts—Arial, Optima, Verdana, and Helvetica—also have the roundness and easily distinguished letterforms of the serif counterparts, and they're well suited for on-screen presentation of all kinds of writing.

Still, the longer the text, the more swiftly you want your reader to be able to move through it. And here our time-tested standbys, like Times New Roman and Garamond, as well as more recent fonts like Minion Web—which has inexplicably disappeared from Microsoft type packages—prove their usefulness again and again.

Once you've selected a font that suits your purposes, remember that almost any of its visual virtues will disappear as it shrinks. Most serif fonts are designed to be optimally readable at 10 to 14 points; most sans serif fonts can be reduced a point or two below that and remain legible. As a rule of thumb, don't take your text below 10 points unless you know for a fact that your audience has exceptionally sharp vision—which rules out all but the teenage audience.

No matter how serious your message, it won't be taken seriously if it's rendered in some joke font like Chilada or Comic Sans. And whatever your taste, when designing for the Web use type that has been developed for that medium, or at least that has a full digital character set. This rules out almost all of the fonts you'll find on a two-thousand-alphabets-for-ten-bucks CD.

Paragraph Design

A corollary: There's no surer sign of a crackpot message than deranged design. A dead giveaway, in print or on screen, is type that extends from edge to edge without benefit of a margin space that allows room for your thumbs in the material world, and that affords a resting and reference point for the eye in cyberspace.

Allow ample margins around your text—at least an inch, or even two, on all sides. Ideally, legible paragraphs will have only ten to twelve words per line, a feat best accomplished not by blowing up the type to larger sizes (use large type only to emphasize headlines and other important elements), but by affording your paragraphs plenty of breathing space.

Designers differ over the use of multiple columns, and certainly a well-designed page can accommodate dual-column text easily. But the difficulty in such a layout lies in making sure that your reader knows exactly where to move from one column to the next—no easy feat. Sticking to a single-column format avoids this problem.

If you do use multiple columns, be sure to set headlines and subheads flush left rather than try to center them over a column—this can throw the overall page design off balance. And however you lay out your page, set your paragraphs ragged right (unjustified). In fine typography, it's a chore at best to set text so that both the right and left edges align. In word-processed type, this dual alignment is achieved by inserting extra spaces between words, with sometimes unforeseen and unpleasant visual consequences.

Making Sense of White Space

The human eye, the product of millions of years of evolution, is designed to take in light, not darkness. When we read, our eye goes first to the white spaces, whether on screen or on paper; it then discerns the dark forms that overlie it.

As a nod to typographic convention—and as a courtesy to your readers, who steadily lose the ability to perceive even those white spaces with every passing day—allow plenty of white space both in the margins and between lines of type. This between-line spacing (called "leading") helps the type stand out against the background. Another rule of thumb is to allow leading of at least 25 percent of the text weight—that is, with 10 point type use at least 2.5 points of leading, with 12 point type use at least 3 points.

The following examples illustrate how between-line spacing affects the overall look of a paragraph of text.

Example 1 is highly readable on screen and on paper alike. Example 2, with no spacing, is much less readable, and Example 3, with a 50 percent allotment for leading, offers perhaps a little too much of a good thing.

Burrowing into the Page

As tempting as it is to consider the Web as a revolutionary new form of communication, and the monitor as a kind of supertelevision, the guiding metaphor for the best-designed Web pages remains the book.

Printed text is two-dimensional. So is the screen. Avoid attempts to extend the screen to a third dimension with shadowing, embossing, and other effects. Let your words stand naked, on their own merit, just as they would on a printed page.

If the Web is a sort of glowing book, then Web pages are best designed as book pages would be. The title page of a book doesn't sport the first chapter and the index. Like a book, a well-designed Web site should invite its reader to burrow deep within.

In practical terms, this means that a home page should use typography sparingly, giving only essential information and allowing links to provide other data. Because you'll want your reader to linger a bit over those essentials, that preliminary page is probably best set in a sans serif face, shifting to serif as the reader tunnels deeper into more text-rich pages.

Even the worst paper is still more readable than the best screen, and most people will download or print out text material if it extends beyond a screen or two in length. Bearing this in mind, keep your preliminaries short, and let those text-rich pages run as long as they need to.

Where Do You Stand? Which type of font do you use for body text? Take our Reader Poll!

A Few Parting Words

It's also worth remembering that whereas most graphic designers have good, if not state-of-the-art equipment, most consumers are at least a generation behind them, and probably many more. If you're well up to date on the technology, then test your pages on a machine like the one you owned when you first encountered the Internet. If your pages look good on, say a CGA monitor powered by a 486 box running Netscape 1.0, then they'll shimmer and shine on equipment of more recent vintage. If they're not readable on older gear, then you may be driving away a significant portion of your audience.

Intelligent design improves our lives: a well-made machine, whether a toothbrush or a Formula 1 automobile, is a pleasure to use and to behold. Just so, intelligent typographic design enhances the words it serves. Even the most elegant typography won't help a garbled message. But a message well stated can only be improved by a suitable typeface and text layout—the foundations of good design, in print and in cyberspace alike.

Gregory is the author or editor of twenty books, contributes regularly to Amazon.com, Britannica.com, and other online and print publications.

Related Articles

The Seven Stages of Type Appreciation

RELATED ARTICLES No Related Articles		TOP 5 ARTICLES No Top Articles.