The terms ‘typeface’ and font’ are often used interchangeably, but there is a difference. A typeface consists of a family of fonts.

In professional typesetting, even in desktop publishing, you don’t use the bold and italic on the menu, but set the weight and look of the typeface by choosing the appropriate font (bold, condensed, italic etc).

For example, for the typeface Accord, fonts can include: Accord Heavy SF, Accord Light SF, Accord SF.

Typeface Accord

For the typeface Franklin Gothic, fonts can include: Franklin Gothic Book, Franklin Gothic Demi, Franklin Gothic Demi Condensed, Franklin Gothic Heavy.

Typeface and font

Typefaces fall into two categories: serif and sans serif.

Sans serif typefaces are much plainer. A serif is simply the ‘adornment’ at the edge of letters. ‘Sans’ simply means ‘without’ (from French), so sans serif just means ‘without a  serif’.
Serif typefaces

Sans serif typefaces

Serifs highlighted

Traditionally sans serif typefaces were used for titles and headings and serif typefaces for the main text — known as the ‘body copy’ in typesetting. This was because a serif typeface is usually considered to be easier on the eye when it is set at a smaller size in print.

However, serif typefaces would also be used sometimes for titles and headings: most famously the Times Newspaper which has its own Times New Roman typeface.

In modern typography body copy is increasingly set in sans serif fonts, or at least very plain serif fonts that are very close to being sans serif.

To give contrast, a serif font is sometimes used for titles and headings. This is because sans serif fonts are felt to be easier to read on screens.

Web-safe fonts

The choice of typefaces and fonts you can use on a website is more limited.

In the early days of the web the font you saw was dictated by your browser.

Web designers used a set of ‘web-safe fonts’ that worked on most browsers. These were set as a family. The principle was that if the first font in the family didn’t work, there were two or three other options that the browser would default to.

For example one of the most common web-safe font families was:


The browser would look for Arial on your computer, if it didn’t find Arial it would select Verdana, if it didn’t find Verdana it would select Georgia.

Technology has moved on to some extent and there are now more ways to ensure that the font chosen by the web designer is embedded — so what the designer wants is what the viewer sees, though there are sometimes issues about copyright and breach of licenses in doing this.

But you will notice, for example, on web email systems that you are usually limited to a very few fonts. for example only offers you:

  • Arial
  • Calibri
  • Comic Sans MS
  • Courier New
  • Franklin Gothic Medium
  • Garamond
  • Tahoma
  • Times New Roman
  • Verdana


Watch an animated summary

Typefaces and fonts animated gif