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.
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
If you know of a tip or a different way to go about solving this problem, please share in the comments.
Happy Coding!
Sources:
Typography by MailChimp
Ultimate Email CSS Guide by Campaign Monitor
@Font-face by Campaign Monitor
Typography by MailChimp
Ultimate Email CSS Guide by Campaign Monitor
@Font-face by Campaign Monitor
0 comments