Exercise » Tracing (Compare Fonts)

One way to learn about the structure of a font is to slow down and pay attention to the details. In this first exercise, you’ll do this by tracing letters from fonts.

In Anatomy & Legibility, I talked about Times New Roman, Georgia, Arial, and Verdana. All four are web safe fonts.

Web Safe Fonts

By default, fonts used in a web page are pulled from the reader’s font library on their computer.

fonts are pulled from a computer's font library

Unlike images and videos, fonts are (by default) pulled from a computer’s font library.

Web safe fonts are fonts we consider “safe” to use. We know most people will have the font on their device. In order to make sure your web pages won’t revert to a default font (often set to Times New Roman), it’s crucial you use web safe fonts.

There aren’t many web safe fonts to work with:

  • Georgia
  • Verdana
  • Times New Roman
  • Arial
  • Trebuchet MS
  • Impact
  • Courier
  • Comic Sans MS

A good typographer can work with the same web safe fonts over and over, making them sing every time. Building a font library beyond web safe fonts is not strictly necessary.

You’ll use web safe fonts in the first few lessons.

Web Fonts

Web fonts are fonts that have been saved in a format for the web. They can be accessed from a server via the @font-face declaration (which you’ll learn how to use later). There are hundreds of web fonts available. Not all of them are appropriate for text.

The Assignment

  1. Download the PDF of fonts provided. Each hand-picked, high-quality font includes the letters a, b, e, f, o, p set at 200pt size. Tracing these letters gives you the opportunity to notice the bowl, x-height, terminal, aperture, serif (if any), and letterspacing.
  2. For each of the 6 pages, choose one of the fonts — either the top or bottom — to trace.
  3. Trace the 6 chosen fonts using a sharpened pencil. If you don’t have tracing paper, put a clean sheet of plain paper over the font to be traced and use a window as a drawing surface. The light from outside will help you see the letters you’re tracing.
  4. Compare the fonts by putting each tracing over the other font on the page (if necessary, use a window in order to see the tracing and the font behind it). If you want to go further, you can compare tracings to fonts on other pages.
  5. Write about what you see. What are the differences between the fonts’ bowls, x-heights, terminals, apertures, serifs (if any), and letterspacing? Write about any other differences you see, as well as any consistencies. A great way to build your analytical skills is to write down your observations. Writing forces you to slow down, notice details, and practice your vocabulary. Build your vocabulary for describing fonts and defending font choices.

Application to Web Typography

It might seem odd that I’ve asked you to trace letters for the first exercise. But all the fonts provided in this exercise (except the two print fonts) are appropriate for text on the web. When looking for a new font, try tracing the abefop at 200pt size and comparing the letters to the ones provided. Look at the new font’s bowl, aperture, letterspacing, and so on. This will help you pick a font with:

  • A generous x-height
  • Open apertures
  • Prominent ascenders and descenders
  • Slightly loose letter spacing
  • Discernible terminals