Email Typography Guide

Email Typography Guide

HTML emails are different than standard website design, because each email client renders the HTML in a slightly different way. In order to achieve consistent renderings across a variety of clients, here are some constraints with which to inform your typography decisions.

Email-safe Fonts 1

Sans Serif Fonts

Trebuchet MS

Serif Fonts

Courier/Courier New
Times New Roman

Text on Background Images

While it's best not to overlay text on background images in email, pattern backgrounds are usually ok, as long as a fallback color is provided. Ensure that the font-color has enough contrast for readability on both the patterned background and the fallback color.

Special Characters

On the web, special characters typically render correctly. In email, however, you need to keep a close eye on your tests. The & and — characters are pretty safe, but I have run into a lot of trouble with ' and even   on occasion. There are some versions of Outlook that don't render ' as a character, so instead you see the HTML entity written out all over your email. This tended to be a problem when an email was sent out for translation, and the apostrophes were all replaced with the entity '. Although it's tough to see the prime marks in place of real apostrophes as a designer, I'd still rather see a prime mark than an error like this: it's.

In my experience,   is not usually an issue, but you also need to keep in mind the system that you use to send out email. In a recent project, we realized that their system was not able to send the email after it encountered a   in the code or the content. When only half of the email was being received in tests, we saw it was cutting off right at the  , so we had to strip all instances of it out. Keep a careful eye out for your special characters and thoroughly test them in your emails on the devices you're targeting to ensure proper rendering.

Keep in Mind...

All of the general rules for typography (hierarchy, contrast, font-pairing, type-setting, etc.) still apply. Consider how your emails are delivering valuable, readable content to your subscribers, and how the type can enhance that experience. There are tons of possibilities for getting creative with typography, from styling alt text to using fluid layouts.

1"Typography," MailChimp. Accessed 8/25/18.