Responsive Typography

Appendix B. Responsive Typography and Web Fonts in Email

I have to admit that with all of the other difficulties we face designing and developing HTML emails, it may seem a bit daft to throw web fonts into the mix. But I’ve heard recently from some newsletter publishers that over 80% of their recipients can view web fonts in their email clients, so I decided it made sense to at least bring it up.

There are two main issues why web fonts don’t work in email (besides the obvious: that email clients can’t even spell web standards): many email clients, especially the web-based ones, strip out JavaScript and limit other external resources; and many web font services tie the use of their fonts to a URL, and there is no URL that corresponds to your inbox! That means that in many cases the web fonts would never be served, even if the HTML, CSS, and JavaScript survived intact.

You can use Google Web Fonts, as they don’t have that kind of restriction, or you can try using self-hosted fonts. That may be more likely to work.

The following article from Campaign Monitor has some very good pointers and data, though it will always be evolving. The one from MailChimp at this time is not quite as comprehensive, but you can be sure that both vendors will be keeping tabs on the state of support and writing about it often.

Beyond web fonts, there are still many things you can do to make your emails responsive. While it’s outside the purview of this book to dive too deeply into that code, if you are responsible ...