Email Typography Best Practices

Wednesday, March 23, 2016


Email typography is perhaps one of the most important design elements in email marketing. It displays before images and it makes reading a much more enjoyable experience. However, email typography has been treated as an afterthought because of a myriad of constraints across email clients. As a way to get around this email designers frequently opt for placing text in images, unfortunately this is not best practice as sometimes images are not rendered without the user accepting the display of images in email.


Web Safe Fonts - current standard fonts that will render correctly across all clients:
Sans-serif fonts:
  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana
These will work on most email clients, but you should include a fallback front from the previous sans-serif fonts list:
  • Century Gothic
  • Geneva
  • Lucida
  • Lucida Sans
  • Lucida Grande
Serif fonts:
  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman
These will work on most email clients, but you should include a fallback front from the previous serif fonts list:
  • MS Serif
  • New York
  • Palatino
  • Palatino Linotype
Monospace fonts:
  • Courier
  • Courier New
These will work on most email clients, but you should include a fallback front from the previous monospace fonts list:
  • Lucida Console
  • Monaco

Importing fonts using @font-face or link tags
Using @font-face can be tempting as it would import any web font using a URL, but unfortunately this only works on a few email clients, mostly mobile:
  • Apple Mail 6
  • Lotus Notes 8
  • Outlook 2000*
  • Outlook 2011 on Mac*
  • Thunderbird
  • iPad
  • iPhone
  • Android 2.3
  • Android 4.2

*Outlook will ignore the font stack and display text using Times New Roman. To get around this you must use a CSS class to target the text and then use conditional comments to feed Outlook an alternate font stack that it will actually use. Example:

Image capture from Litmus

The reason why more desktop email clients do not support @font-face is because fonts cannot be embedded in-line and most desktop email clients will strip away link and @import tags.

If you are interested in learning what are the font combinations that leading email campaigns use, checkout this super awesome google sheet made by Anna at StyleCampaign.


Conclusion


Use only web safe fonts, or a combination of images with very descriptive alt=”” (in case image doesn’t render) and imported fonts with web safe fallback fonts.  

If you know of a tip or a different way to go about solving this problem, please share in the comments.

Happy Coding!



Share This Story

Tags:

You Might Also Like

0 comments

Subscribe