Using Type In Web Design

Abstract
Characteristics of Type
Type as Design Elements
Use Stylesheets

Rik Nilsson

Abstract

Describes the styles and categories of type. Explores the use of type as major elements of a Web page design; grouping like content, where to use which styles. Discusses limits on the number of styles; what happens when too many "fonts" are employed.

Characteristics of Type

"Type" is the printed words on a page. The "look" of a type is generally refered to as the "font". Four categories of type styles (fonts) are generally used in Web design:

Old-Style or Serif: Pronounced "sair-if" (not "sir-eef"), this style of type is the fancy one with little chiseled or pulled horizontal strokes at the ends of the characters (letters). Common serif fonts are Times, Georgia, New York, SchoolBook.
Modern or Sans-serif: This square-cut style of type is usually used for headlines, headings, and tends to appear large, bold and authoritative or attention-getting. Sometimes smaller type sizes are easier to read in sans-serif style. Common modern styles are Arial, Trebuchet, Helvetica and Verdana.
Monospaced: Representations of code or military/technical attitudes are conveyed by this style, the most common of which is Courier.
Decorative or Fancy: Many font faces can be lumped into this category. Chancery, Script, MS Comic Sans are just a few fancy types.

Part of the definition of a font or type face is the size, or x-height. This is the height in points (1/72 of an inch) or pixels of the typeface's lowercase "x". It is best to specify font size in pixels for Web designs that will be viewed on a variety of platforms, since screen pixel sizes vary between 72 pixels per inch on Apple Macintosh, to 96 pixels per inch on Intel-based PCs.

The width of each letter is an "em" and its actual value varies from face to face.

Type as Design Elements

Follow these few guidelines when putting type on your pages:

Don't center all the text

...unless you are conciously aiming to be boring, stuffy and old-fashioned.

Don't mix justifications

Don't center captivating headlines interspersed with left-justified text.

Group and associate

Group related elements (headlines, paragraphs and images) into discrete visual collections separated from other grouped items. Using "whitespace" to segregate clusters of information is a sign of typographical sophistication. Notice the whitespace partitioning this typical Web page:

+--------------------------+
| [LOGO]  Nav Nav Nav Nav  |
|                          |
| Heading         Head     |
| -------------   - ------ |
| -------------   - ------ |
| ---------.      - ------ |
|                 - ------ |
| Heading                  |
| ---------------  ------  |
| --------------- |      | |
| --------------- |      | |
| ---------------  ------  |
| ------------------------ |
| ---------.               |
|                          |
+--------------------------+

The original designers of HTML were scientists and engineers who knew little about typography. In order to be able to see the text on the small, low-resolution monitors of the day, they over-sized everything. The default top and bottom margins of <h1> and <p> elements built into most Web browsers are invariably too large. To correct some of their mistakes you must reduce the spacing between headlines and following paragraphs. You can do this either by setting "margin-top" of paragraphs or "margin-bottom" of heading tags to smaller values, so headings appear more closely associated with the paragraphs they introduce.

Here are some example rules that accomplish the compaction addressed above:

body{
	font:14px/1.2 times,serif;
	background-color:#fff;
	}
h1,h2,h3 {
	font-family: helvetica,arial,sans-serif;
	font-weight:700;
	margin:1em 0px 0px 0px; /* t r b l */
	}
p {
	font:14px/1.2 times,serif;
	margin:0px 0px 0.5em 0px; /* t r b l */
	}

Notice that we lighten up the page in the 'body' rule with a white background, then set the heading bottom and margins to zero. We then control spacing of paragraphs with a bottom margin of 0.5em.

Contrast - But limit number of typefaces

Contrast generates interest. You can use color, type faces and sizes to create contrast. For instance, this otherwise dull page implements contrast by using large bold, dark sans-serif headings above old-style body text. Other forms of contrast can make use of limited light-on-dark text, small bits of italic text, or "pull-quotes" (quotes of body text set in larger type in the margin).

Keep the total number of font faces to a minimum. I recommend a maximum of three or four, counting normal and italic of one typeface as separate faces. In other words, if your page has big, bold Helvetica headlines, Times body text with some italics of both sprinkled lightly around for emphasis (only where needed), you're at the limit. Don't count different colors as different typefaces.

Need more ideas? Good sources of innovative type style usage are Wired magazine and other avantgarde paper publications.

Make it obvious that links are links

"Link" is short for hypertext link; a word or phrase sensitive to a mouse-click that changes the universal resource locator (URL) source of the page. In other words, clicking a link usually brings up another page or may open a window containing an image or other information. Commonly used to switch amongst the pages comprising a Web site, such links should usually be grouped together in a way that clearly indicates they will navigate the user around the site. Frequently these navigation links are grouped into the top or left portions of the page and made a catchy color or font face.

Gimics

Interesting things can be done with style rules. For instance, the drop-capital or "drop-cap" has been used almost since the beginning of paper-publishing to draw the readers' eye to the start of a section.

.dropcap {
	float:left;
	font:48px/.9 times,serif;
	padding:0px;
	margin:0px 2px -2px 0px;    /* t r b l */
	font-weight:700;
	color:#593;
	}

In HTML, the dropcap style is applied to the first letter of the first paragraph of a chapter, Web page or article section, using a <span>...</span> tag container:

<p><span class="dropcap">T</span>his is a drop-capped 
paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.</p>

And results in:

This is a drop-capped paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Use Style Sheets

All do's and don'ts above can be easily controlled with rules in cascading style sheets (CSS). The stylesheet is loaded once and used to render every page on the site, cutting down on bandwidth (load time). Version 5.5 and higher Web browsers of any persuasion can interpret and display CSS with a high degree of consistancy. All new designs and make-overs should incorporate CSS to ensure reliable cross-browser display of your site. Bring up your site's index page and choose "View > Page Source"; If your designer still uses the old slow-to-render <FONT> tags all over the place, it's time you looked for a new designer.