Typography

Fonts (type styles)
Good typography is just as important on a web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial, it should still be pleasing to look at and easy to read.
In every situation where type is used - in publishing, signage, packaging, television etc. - the designer has to adapt his techniques to suit the medium.
A headline style that works just fine in a magazine spread would not necessarily work on a poster.

A magazine is always viewed straight-on at arms length so letter spacing can be as tight as you like and the words will still be readable.
A poster is, more often than not, viewed obliquely, which distorts the type to some extent. Here, a little extra letter spacing helps identification of the individual characters, and hence the words.

Designing for a computer screen has its own set of problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, and the problems get even worse.
It is the designer's job to understand these issues and to address them - to maintain some kind of control when everything else is shifting.

Difference between a font and typeface
A font is a complete set of characters in a particular size and style of type. This includes the letter set, the number set, and all of the special character and diacritical marks you get by pressing the shift, option, or command/control keys.

A typeface contains a series of fonts. For instance, Times Bold, Times Italic, and Times Roman are actually 3 fonts (even though people often refer to one entire font family as a "font.")

There are 3 basic categories of typefaces:
Serif, with little "feet," is a more traditional-looking style. Common serif typefaces include Times Roman, Garamond, and Palatino. The following graphic image shows serif typefaces:

Sans serif, with no "feet," a more contemporary looking style. Common sans serif typefaces include Helvetica, Arial, and Avant Garde.

A decorative typeface is everything that doesn't fit neatly into the other two categories. This would include script typefaces and many others.

There can be many variations of the same type design within a single typeface. Most typefaces have at least 3 variations: normal, italic (slanted), and bold. Some have other variations including condensed, expanded, light, demi, demi bold, black, heavy, or ultra, among many other possibilities.

The height of a typeface is described in points. The size of a typeface is often chosen from a series of set sizes, such as 10 point, 12 point, 14 point, 24 point, 48 point, and so on. Thanks to modern computer technology and a handy utility called Adobe Type Manager (ATM), you can enter any point size for your typeface and have it appear smoothly on your screen and in print.

One thing to take caution about is that type sizes are not standard. Meaning, one size in a particular typeface is not necessarily the same size as the same point size in another face. For example, all of the typefaces shown above are 16 pt, but they are not the same size in dimension (length and width).

Typefaces in web site design
Applying different fonts and typefaces in web site design is not as simple as it is in print design. For example, let's say you would like your web pages' text to display in the typeface Avant Garde. In order for your web pages to actually appear in this typeface, your visitors must have the Avant Garde typeface installed in their computers. If your visitors do not have this typeface, your web pages will look completely different than what you intended.

The only way to have a typeface display exactly as you intend it to display on a web page, you must put the typeface in a graphic image.

If you want to force a typeface in the text of your web pages, we recommend that you use the most common typefaces already installed on computers. The most common serif typefaces are Times and Times New Roman. The most common sans serif typefaces are Arial, Helvetica, and Verdana.
back to top