Typography and Email design

I  have had many people ask me about setting certain beautifully artistic fonts in email designs and my reply has often been you have a limited pool of fonts that can be used with emails, so today I thought I would provide a list of fonts that would be safe to use with in email design so people can get a better under standing of the limitations.

As for using web fonts and CSS to be honest email design is stuck very far behind in the world of web design, emails are designed using  tables and little or no CSS, so if your like me and have been coding sites for a long time and remember the era of when sites were purely built using tables and CSS was just a random jumble of letters  you will be scratching  your head at images that don’t fit in place properly and lots of other fun things. there is a reason for this only  a few email clients support css with in emails.

This list of fonts has been taken from mailchimp as thats  the main platform I design and send email campaigns through its a list that I tend to stick to for projects out side of mailchimp as well.

Cross-platform Fonts

Unfortunately, you can’t just go and use an excellent font like Gotham for your copy. Like anything else with HTML email, there are some limitations. Here, you’re pretty much stuck with the basic, cross-platform fonts:

Sans Serif Web Safe Fonts

These are your best bets for sans serif fonts. If you include these in your font stacks, most people will see the page correctly.

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

These choices will give you good coverage, but you should include a more common one as a backup in your font stack.

  • Century Gothic
  • Geneva
  • Lucida
  • Lucida Sans
  • Lucida Grande

Serif Web Safe Fonts

These are your best bets for serif fonts.

  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman

These choices will give you good coverage, but you should include a more common one as a backup in your font stack.

  • MS Serif
  • New York
  • Palatino
  • Palatino Linotype

Monospace Fonts

There are not as many monospace fonts with wide, cross-platform support. These are your best bets.

  • Courier
  • Courier New

These fonts have some coverage.

  • Lucida Console
  • Monaco

It’s best to stick with a small list of fonts known to work across all platforms, and your ideal, bullet-proof font stacks should look something like this.

  • sans-serif: Helvetica, Arial, Verdana, Trebuchet MS
  • serif: Georgia, Times New Roman, Courier

Here’s a list of all widely-supported cross-platform fonts: Helvetica, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Charcoal, Lucida Console, Lucida Sans Unicode, Lucida Grande, Palatino Linotype, Book Antiqua, Palatino, Tahoma, Geneva, Times, Times New Roman, Trebuchet MS, Verdana, Monaco.

Experimenting with Web Fonts

While web fonts may be common in traditional website design, in the world of HTML email, they’re experimental at best. If you want to work on the ragged edge of email technology, however, you do have a few options. A (really) small number of email clients support the @import* CSS at-rule, which allows the use of web fonts provided through services like Google Web Fonts or Fontdeck.

  • Outlook2000 (crazy, we know)
  • iOS Mail
  • Apple Mail
  • Android (default client, not Gmail)
  • Thunderbird

Note: @font-face and <link> really only work on Apple desktop and mobile clients.

, ,

No comments yet.

Leave a Reply