Fonts Fonts Fonts

Russell and Travis were working on a client’s monthly email newsletter, and asked me if I had a referrence sheet for web-safe fonts. First, a brief rundown of why that came up at all. If you already know of the joys of Gmail vs Outlook 2k8 (or is it 7?), feel free to skip to the next paragraph. Otherwise, allow me to set the stage. See, a few years ago, a designer could design any sort of fancy fancy email newsletter, and the developer had all kinds of options in building that newsletter out, and having it remain the same when it arrived in subscribers’ mailboxes. Then Gmail came out, and decided that actual background images were no good. On that note, I found XavierFrenette.com to have a good reference of what was lost. But not all was lost, as I found you could still build the newsletter using <table>s instead of div’s, allowing you to set up the table to have a background image of its own. Sweet. But then Microsoft decided that their versions of Outlook were insecure in how they were handling html emails, since they were based off the not-so-flawless IE6 system. As a result, the latest version of Outlook renders HTML based on some archaic (old school) MS Word renderer. So background images are pretty much out, among other things. Joe Hardy gives a great overview of all those other things that we knew and loved, and have since ceased to be.

So what does that leave us with? If we want any sort of fancy design, we cut it up into normal images. And when email programs don’t display images right away, you want as much actual solid “web-safe” HTML text, so the reader still has an idea of what is going on, without seeing the email. Which brings us to Fonts. Here’s a quick list of what I got, based off the all-knowing Wikipedia, and a nice chart from AmpSoft.net:

GEORGIA georgia
TIMES NEW ROMAN times new roman
SERIF serif

VERDANA verdana
TAHOMA tahoma
TREBUCHET MS trebuchet ms
COMIC SANS MS comic sans ms
IMPACT impact
ARIAL arial
HELVETICA helvetica
SANS-SERIF sans-serif

COURIER NEW courier new
MONOSPACE monospace

yay!