Timeless Typography

Text - every site's got it, some make it look good, some don't. There's a practical aspect to making your text look good - well laid-out text is easier to read. When text elements adhere to the usual conventions, the reader's eye flows smoothly from one section to the next, and doesn't get confused or fatigued.

I know this is going to spoil a lot of people's fun, but the first rule of good typography is not to use too many fonts. How many is too many? Conservative editors say that a document should use only one font, which may be a larger size and/or bold for headings. More liberal literati, including most newspapers, use two, usually a sans-serif font for headings and a serif font for body text. Three's a crowd, but you might occasionally use a third specialty font (perhaps a cursive font, or a wild and crazy one) to call attention to some particularly special section. Whatever you do, don't use similar fonts together - if your body font is serif, the heading font should either be the same font, or it should be a sans-serif, and vice versa. If you use a third font, it should be something totally different.

Which font to use? And what the heck is a serif? A serif is a little tail that caps off the sharp end of letters like l, m, and n. Theoretically, it leads your eye smoothly and pleasantly on to the next letter. Almost all print publications use a serif font for body text, and sans-serif only for headings. I've heard it said, however, that people tend to find sans-serif fonts easier to read onscreen, and certainly a lot of Web sites use sans-serif fonts for body text.

Nowadays, there are lots and lots of very attractive fonts, with or without serifs, to choose from, so you can pick whatever one you like, right? Wrong. A browser can only display a font that the user has on his or her system, and there's no knowing what people do or don't have out there. If a user doesn't have the font you've specified, the browser will substitute something else, which always seems to be the opposite of what you intended. About the only fonts you can be sure everyone has are the sans-serif Arial and the serif Times, and those two are the ones most Web sites use. How dull can you get? Fortunately, there are a few other fonts that most folks have, so if you need a break from the same old same old, try the serif font Garamond or the sans-serif Verdana.

If you really must have a special font for a heading, you can always make it a graphic element. The drawbacks are that graphic elements load slower and are harder to modify than text elements.

Once again, style sheets are coming over the hill to save the day. With a style sheet, you can specify the font you really want and a number of alternate choices in order of preference, the last one usually being your last-ditch generic choice. For example:

BODY, TD {
   font-family : "Franklin Gothic Book", 
   		  Arial, sans-serif;
   font-size   : 10pt;
	}

The user's system will use Franklin Gothic Book if it has it, if not it will use Arial. If some benighted soul's system has neither font, then it will pick whatever sans-serif font they do have, so we can at least be sure that the font they see will be reasonably close to what we wanted. That is, if their browser supports style sheets properly. Note the TD hack, necessary to make some versions of Netscape display styles within table cells (then again, on other browsers it may screw everything up).

Type attributes like bold, italic, underlined and so on have various functions. These functions include emphasizing certain words or phrases, or marking them as special for some reason. Which attribute should be used for which function depends on what language you're working in, and what style guide you choose to follow. Typography and punctuation can vary quite a bit between British and American English, and even if you stick to one side of the pond, the experts don't all agree on what's correct and what's not. Two rules are firm, however: Always use type attributes to call attention to a word or phrase in body text, never a different font, and be consistent throughout a Web site.

Bold text is used for headings. Nowadays, it is sometimes used instead of italics to emphasize phrases in body text, although this tends to make your text look like marketing copy (perhaps it is). Never use Capitalized Words, or worse yet, ALL CAPS, for emphasis.

Italics are traditionally used for emphasis. Also, the names of books (but not magazines) are usually set in italics, as are foreign words. As for what's foreign and what's not, I won't even touch that one. Vis-à-vis and gesundheit are usually italicized, but liqueur and kindergarten are not. Italics are also sometimes used for extended quotations, or to identify a word that the writer figures the reader isn't familiar with. In the latter case, the word is defined soon after being used for the first time, and only the first instance is italicized.

It is fairly standard to use underlined text to indicate a hyperlink, so I humbly opine that anything that is not a hyperlink should never be underlined on a Web page.

Conventional wisdom says that ALL CAPS should never be used, period. In this liberal age, however, it is occasionally seen in a sub-heading or some such element. Capitalizing the first letter of each word, sometimes called Title Case, is used in titles and sub-headings that are not complete sentences. If you choose to use title case, then it should be used for all headings that do not have a period or other punctuation mark at the end. If a heading is a complete sentence, it should have normal case and punctuation. Many publications don't use title case, but simply capitalize the first word of each heading (and of course all proper nouns as usual).

Both right (your call):

Charlie Morris paid record fee for article

Charlie Morris Paid Record Fee For Article

Desperately Wrong:

Charlie Morris paid record fee for article.

Titles may or may not be centered, but body text should never be centered.

Bulleted lists are used to call attention to individual short phrases. Some designers hate them, but I think they're useful on the Web. In our world of short attention spans and information overload, bullets can help readers quickly to scan the main points of a page. Items in bulleted lists must be organized in a logical hierarchy. That is, only elements of equal standing should be together in the same level. Also, a bulleted list with only one item is tacky.

Wrong:

• Software
• Hardware
• Sound Cards
• Joysticks

Right:

• Software
• Hardware
  • Sound Cards
  • Joysticks

Another element that some designers rail against is the horizontal rule (HR tag). In the early days, these and bullets were about all we had to work with, so they got overused, to say the least. In a way, bullets and horizontal rules are cop-outs. The same effects of separation and emphasis can be achieved simply by the proper use of white space. Designers never seem to tire of talking about "white space" - it's a bit like "structure" is for Bass fishermen, or like "this great Land of ours" is for politicians. In fact, the proper use of white space (or tan, or whatever your background color is) is one of the critical elements that separates artistry from amateurishness. White space is used to separate elements, and to draw attention to elements, among other things.

To take the bulleted list above as an example, the same effect could have been created easily (in print, at least) without the bullets. White space to the left would denote a list, and a little extra vertical space between "Software" and "Hardware" would show which elements belonged to the higher-level list and which to the lower. It would look neater and more elegant. Alas, traditional HTML gives you limited control over white space. You can't adjust the tracking (space between letters) or leading (space between lines). Style sheets and the absolute positioning available in HTML 4.0 however, make the future appear whiter, so bullets and horizontal rules may be on the way out.

White space can not only separate elements from each other, it can call attention to a particular element. How many times have you seen a newspaper ad that has one tiny paragraph in the lower right corner, while the rest of the page is blank? Why did they pay for a full-page ad when they only used a couple of square inches? And why is it always the lower right corner? You read the little sucker, didn't you? Aha!

Perhaps no typographical issue is so controversial as how to delimit paragraphs. In print, the first line of a paragraph is indented, and there is no extra line break between paragraphs (an extra line break may be used to indicate the beginning of a new section). On the Web, most publications use an extra line break between paragraphs, usually without an indent. This makes some designers see red, and one begs publishers to do "whatever it takes" to create an indent. Actually, it's quite easy. Just insert 3 to 5 non-breaking spaces where you want an indent, for example:

<BR>&nbsp;&nbsp;&nbsp;

instead of a <P> tag. Personally, I prefer the extra line break for onscreen text.

Have Your Colors Done
Designing Attractive Web Pages
It's Always Something