Design Matters
 

Most of us are familiar with fonts, as far as using Arial for headings and Times New Roman for body copy. But there is so much more to fonts than that. In this section, I’ll try and explain all the different options related to fonts, from classifications (yuck! I know), to how best to use them on screen, and in print.

Font families

Before you can delve into the details of when it’s good to use a certain font, it’s a good idea to go over some basics. Most fonts are classified into certain font families, based on the shape and size and specific features of the letters. The naming conventions for some of these families don’t make much sense, without having some historical background, which I will include below.

Old Style or Serif

Originally developed almost 600(!) years ago (and still in development to this day), old style fonts are also called serif fonts, because of the horizontal marks or serifs that are present at the corners and tips of the letters. Examples include Times New Roman, Book Antiqua, Palatino and Garamond.

This is a serif or old style font
Figure 1: Old style or serif font (font is Garamond)

Old style fonts have a traditional, warm friendly feel to them. Great for lots of text. Also great for headlines, if you want to evoke a traditional feeling (example, BitDepth.net.)

Modern

Modern fonts were originally developed in the middle of the Industrial Revolution (around the mid 18th century). These fonts Examples include Poster Bodoni. The only problem is that at a distance, these fonts can be hard to read.

This is a modern font
Figure 2: Modern font (font is Bodoni)

Modern fonts have a very business-like and professional appearance (example, the Peoplesoft logo)

Slab-serif

Sort of a cross between sans-serif(see below) and serif fonts, they are very similar to serif fonts, except that the serifs are thick slabs. Examples include Litho Antique.

This is a slab serif font
Figure 3: Slab serif font (font is Litho Antique)

Slab serifs present a feeling of strength and foundation. Because of their design, slab serifs are wonderfully legible even in poor printing conditions. Great for headlines too.

Note that Courier New, a font used extensively in text editors, is in fact a slab serif font. Try it for yourself. Type some text in Courier or Courier New in your favorite word processor, then enlarge the font to say 30pt. Courier is called a monospaced or fixed-width font, because each letter in the font takes exactly the same amount of space. This also makes it harder to read, especially in print, as the uneven spacing between the letters causes our eyes to stumble on the letters.

On the other hand, proportional fonts, like modern and old style fonts adjust the letter size and spacing depending on the size and width of each letter. Hence the letter i, which is narrower than say, the letter w, takes a lot less space.

Sans-serif

No serifs. The best example of a sans-serif font is Arial (Helvetica on the Mac). Also Verdana and Futura. Very legible fonts, useful in headings and posters, because they are easily visible from a distance. Not a very good idea for lots of printed text, because the lack of serifs make them less readable than serif fonts. Paradoxically, the opposite is true on screen, where sans-serif fonts tend to be easier to read, since the letter-forms are simpler and easier to represent on a pixelated display (especially on older LCD panels).

This is a serif or old style font
figure 4: Sans serif font (font is Futura Light)

Sans serifs are often used to present a contemporary feel (but you already knew that). They also make great headlines, especially when paired with a serif font, such as Times New Roman, for the body copy (once again, you’ve probably been doing just that for years).

Note: A bit of information about the font called Futura. The name sounds futuristic, but Futura was actually developed way back in 1929. Yup, it’s that old. If you’re looking for a nice futuristic looking font, try Zurich Black Extended, Microgramma, Eurostile Extended, or even Verdana bold. Or download one from one of the many free font websites out there.

In addition to these basic types, a lot of fonts have different weights: normal, condensed or narrow, and expanded or black. For instance the Arial family of fonts have three thickness: Arial, the regular font useful for most uses; Arial Narrow, a condensed version of Arial, great when you need to squeeze extra text into a limited amount of space (for instance a 1 page resume); and Arial Black, a thick font, great for headlines.


figure 5: The Arial family of fonts

Although you can seemingly create the same effect, by stretching or distorting the font, I strongly recommend against doing so (except in a few cases). The reason is that most fonts are meticulously designed to look their best the way they are. Stretching or elongating a font, distorts the type and reduces their legibility. On the other hand, sometimes it’s nice to really really distort a font, to get a certain point across.


figure 6: Deliberately distorting a font to create an effect (Arial Narrow being squeezed by layers of LithoAntique).

^ back to top | next page: A few rules on using fonts »