Typefaces and website design

So you want a specific look on your website. Which font/typeface should you use? How will it appear to the end user? We try to answer some of those questions here.

The definition of a typeface

The style or design of a font such as Helvetica. For example, the type family Helvetica contains the typefaces Helvetica, Helvetica Bold, Helvetica Italic and Helvetica Bold Italic. Whereas 10pt Helvetica Bold refers to a font.

The Typefaces

There are 3 typefaces to consider. (There are actually 4, but we will not use "Slab Serif" in this illustration.)

Serif - This traditional typeface has short cross-strokes or finishing strokes in the letterforms. The most common are Times, Garamond, Georgia and Palatino.

Sans Serif - This typeface has a more modern feel and has no serifs or "finishing strokes" in the letterforms. The most commonly used for website design includes Helvetica, Arial, Verdana and Century Gothic.

Decorative - Typefaces in this category range from script to a hand-drawn look to everything in between. A few examples would be Brush Script, Comic Sans and Chalet.

Variations

Typefaces have three commonly used variations. These include plain, italic (oblique) and bold. Some type families include more typefaces such as a light, demi or demi-bold version. Some may have condensed or expanded versions. Each variation can give your design a completely different look.

An important fact to remember when designing, there is no standard for type sizes! Using the same size in different typefaces will get slightly or sometimes drastically different results.

Applying Typefaces to your website

To use typefaces in website design can be a little tricky. The safest way is to use typefaces common to most operating systems such as Times, Garamond, Helvetica, Verdana or Arial.

If you need a decorative or not so common serif or sans serif font then convert the type to a graphic first for the best results. If a visitor to your site doesn't have the font you used installed on their computer, the browser will use a default typeface and change the look of your design.

top of page^