home > design tips > web site design > fonts and typefaces

Fonts and typefaces in web site design

While the terms fonts and typefaces are often used interchangeably, the two graphic design terms have different definitions.

• Difference between a font and typeface
• Types of typefaces
  • Serif
  • Sans serif
  • Decorative
• Typefaces in web site design

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.")

Types of typefaces

There are 3 basic categories of typefaces:

1. 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:

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

3. 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 desire 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.

If you have any specific questions about our web site design tips, or if you would like permission to republish this design tip on your web site or newsletter, please use our contact form or email us at info@grantasticdesigns.com.

design services | gallery | design tips | faqs
design glossaries | about us | links | request a quotation
site map | search | contact us | back to home

Related web site design tips:

• HTML code for graphic images

• Using graphics in web page design

• Making web sites and web graphic images easy to read

• Using GIFs and JPEGs in web site design

• Image maps and web site design