• by August 30, 2011

Web-safe fonts have always been major components of the email designer's tool kit. With the proliferation of disabled images, using Web-safe fonts ensures subscribers can understand the message without the help of graphics. Here's a reminder of which fonts are Web safe:

WEB-SAFE FONTS:
Sans Serif
Arial
Verdana
Tahoma
Trebuchet
Lucida

Serif
Times New Roman
Georgia

While these fonts solve one major email challenge, they also come with specific limitations because email clients only render very basic HTML. The designer and developer have no control over the tracking or kerning (space between letters) in body copy, and some fonts, like Georgia, can expand as much as 10-15 pixels per line when viewed on a PC monitor.

The bright side of the Web-safe font story is that there are still opportunities to use typography fundamentals to give emails a polished look and feel. Type should be used as indicator for where you'd like the subscriber to look and in what order. Here are a few typographic fundamentals to help develop a clear hierarchy:

TYPOGRAPHY BASICS

Contrast: Black text on a white background is the easiest to read. As the tones in your text color and background color become more similar, the type becomes more and more subdued. This example from Nike clearly illustrates how color can quickly make the headline primary and the subhead come across as secondary.

Capitalization: GILT uses capitalization to create hierarchy. They've also reversed out the Arial on the section headers. This white-on-gray treatment plus capitalization helps the subscriber find the beginning of each section, making the layout easy to scan.

Size: This seems like a no-brainer, but it's important to remember that there needs to be enough contrast in size for one set of text to be more prominent than the other. In West Elm's free shipping email this week, type size also creates a rhythm in the copy. The medium-sized type gives additional information, while the largest size draws attention to the promotion. Much smaller copy is used to convey exclusions, almost as though they are side notes.

Space: Negative space also helps identify a clear group. Jetsetter does this really well. In this example they list out several links to destinations. They allow plenty of space between each line and around the block of links, making it easy to read.

ADDITIONAL TIPS:

• Don't be afraid to combine graphic text and HTML the way REI does in this cycling email. Using this tactic helps email communications visually align with print pieces and Web pieces.

• When using graphic text only, take advantage of all the flexibility! This example from Lands' End includes animation and texture inside the letters.

• Format the ALT text to help subscribers understand which graphics they are missing when their images are disabled.

• Groups like Living Social are styling their fonts with common fonts like Arial Rounded, so they can maintain their brand style. If you're attempting something like this, be sure to also list Arial as your default font, so the subscriber doesn't end up seeing something wacky.

This kind of design change is easy to test, as long as the only variable in the design is HTML text or graphic text. We've seen different results for various clients; some do well with entirely graphic emails. Others find the HTML text lifts conversion. Just remember that using Web-safe fonts doesn't mean you can't have stylish, well-performing emails.