What’s your type?

A quick guide for choosing typefaces to use for web and print design

By Sarah Wells, Sandpoint High School

Typography is a crucial element to the design success of a print or online publication. While the notion of choosing two typefaces – one for headlines and one for body copy – is consistent across both medias, serif and sans serif typefaces vary in readability across digital and physical settings.

In general, digital monitor displays are approximately 100 dots-per-inch (dpi) in resolution, though some of Apple’s Retina Displays for iPhone top out around 350 dpi. (Comparatively, print media is generally 600 to 1000 dpi.) At lower resolutions, sans serif typefaces are better for body copy readability because of the simpler form of the letters. Keep in mind that the days of low-resolution screens are somewhat nearing their end, which means serif fonts may soon be just as easy to read in body copy. Still, as a rule-of-thumb, sans serif fonts are easier on the eyes for digital media.

The best font choices are ones where readers do not notice the font, but the message.”

— UrbanFonts

Naturally, with a sans serif as the body copy, serif typefaces in headlines are a go-to option for contrast on the web. Alternatively, contrasting bold and light weights of the same font family can work for a headline and body pairing as well.

Some classic pairs of serif/sans-serif are Georgia and Verdana, Helvetica and Garamond, and Franklin Gothic and Baskerville.

In print media, the higher dpi resolution favors serif fonts as the body copy. Serifs make individual letters more recognizable which corresponds to faster reading time. The same headline guideline applies for print: look for contrasting sans serif fonts to pair with the serif body copy.

When looking for fonts for either media, ensure that the license on the font either allows for “free commercial use” or that your publication has purchased the commercial use license. A great resource for open source-licensed (free for commercial and non-commercial use) fonts is Google Fonts and Google Fonts API for web browser support.

Whether reworking the typography in web or print publications, the designers at UrbanFonts summarized the task best: “the best font choices are ones where readers do not notice the font, but the message.”