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 - The quick brown fox jumps over the lazy dog
  • Tahoma - The quick brown fox jumps over the lazy dog
  • Trebuchet MS - The quick brown fox jumps over the lazy dog
  • Verdana - The quick brown fox jumps over the lazy dog

Serif fonts:
  • Courier - The quick brown fox jumps over the lazy dog
  • Courier New - The quick brown fox jumps over the lazy dog
  • Georgia - The quick brown fox jumps over the lazy dog
  • Times - The quick brown fox jumps over the lazy dog
  • Times New Roman - The quick brown fox jumps over the lazy dog

Monospace fonts:
  • Courier - The quick brown fox jumps over the lazy dog
  • Courier New - The quick brown fox jumps over the lazy dog


These sans-serif fonts will work on most email clients, but you should include a fallback front from the previous sans-serif fonts list:

  • Century Gothic - The quick brown fox jumps over the lazy dog
  • Geneva - The quick brown fox jumps over the lazy dog
  • Lucida - The quick brown fox jumps over the lazy dog
  • Lucida Sans - The quick brown fox jumps over the lazy dog
  • Lucida Grande - The quick brown fox jumps over the lazy dog

These serif fonts will work on most email clients, but you should include a fallback front from the previous serif fonts list:
  • MS Serif - The quick brown fox jumps over the lazy dog
  • New York - The quick brown fox jumps over the lazy dog
  • Palatino - The quick brown fox jumps over the lazy dog
  • Palatino Linotype - The quick brown fox jumps over the lazy dog

These will work on most email clients, but you should include a fallback front from the previous monospace fonts list:
  • Lucida Console - The quick brown fox jumps over the lazy dog
  • Monaco - The quick brown fox jumps over the lazy dog


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!



You Might Also Like

0 comments

Subscribe