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.
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 don’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
- 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.
- Choose at least four fonts to trace: two serif fonts and two sans serif fonts.
- Trace the fonts using a pencil. If you don’t have tracing paper, put a clean sheet of printer 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.
- Compare the tracings of the fonts by putting two tracings over each other (if necessary, use a window in order to see both tracings).
- 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 traced in this exercise 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