Creative Typography in Email: Q&A with Paul Airy

[ 10 By

In November, we joined forces with Beyond the Envelope’s Paul Airy for a guest webinar on using creative typography in email. Paul took a look at the role of typography and user experience in email design and development. In particular, he focused on the creative use of HTML text, so that email designers can make emails that look great—even when images are disabled.

With over 1,000 registrants, it was hard for Paul to answer all of the questions that came in during the Q&A portion of the webinar. Fortunately, he extended his generosity to answer the questions we missed here on the blog.

Check out the recording and slides on our recap post.

Q&A WITH PAUL AIRY

Is it possible to use @font-face or @import with email? How is this different than using Web fonts on a website?

Yes, it is possible to use @font-face and @import with email, though I actually prefer using a linked stylesheet—one of the options for including Google Fonts.

The difference between using Web fonts on email and Web fonts on a website is that there is better browser support than email client support. Unsurprisingly, there are issues with Outlook to overcome, too. Other than that, the method of “calling” the font data is the same.

Do I need to use a third-party font hosting service, or can I use my own, self-hosted font?

You are not restricted to using a font hosting service and, in fact, some font suppliers would recommend that you self-host. However, it’s crucial that you license the font properly. To read more about licensing, check out this article.

Are there any best practices for using type with retina displays?

Retina displays render type beautifully and this is, undoubtedly, one of the great advantages of using HTML text in email. However, you will find that fonts appear lighter, so it is best to ensure that text sizes are large enough to be legible and dark or light enough to contrast well against the background.

Are there any brands using great typography in email out there? What about brands using Web fonts?

Brands using great typography in email are very few and far between and brands using Web fonts are virtually non-existent (please tweet at me or leave a comment if you see any!). Here are a selection of emails from brands that are either using great typography or using HTML type extensively within their campaigns.

Are most of the emails you see using live text from smaller companies, or bigger retailers? Why do you think that is?

Most of the emails I see using live text are from smaller companies or charities. While you occasionally may see big retailers using it in short bursts, they are typically very poor in their use of live text.

This is most likely due to the fact that big retailers send a large volume of emails—often using a variety of templates—and feature a large amount of imagery to sell their products. In order to achieve this, they have to work with very tight timescales and, since it lengthens the development time, HTML type is typically sacrificed.

Since smaller companies and charities send less emails, usually using a “standard” template, when photography is featured it is often restricted to a “hero” image at the start of the email and the rest is text. Charities have a particular interest in usability and conveying their message, so you’ll often find HTML type throughout their emails.

Can you convert existing fonts to Web fonts? How does licensing with Web fonts work for email?

Yes, there are a number of online tools available for converting fonts in formats such as .ps (PostScript) and .otf (OpenType) to Web fonts formats including .ttf (TrueType), .woff (Web Open Font Format), .eot (Embedded Open Type), and .svg (Scalable Vector Graphics). Check out this post for a useful summary of these.

Since email support for Web fonts is currently limited, there isn’t a specific licensing model available for Web fonts in email as of yet. Some font suppliers I have spoken to count an email open as a “page view,” and advise that your font licensing subscription should be dictated by the amount of opens you have a month on emails that feature the font in question. Others license Web fonts using a traditional site license, which typically allows a company to install a font on up to five computers in a single location.

Since issues have been known to occur when hosting from their own servers, some font suppliers offer self-hosting licenses and actually recommend these for email.

What’s your favorite Web font?

Gill Sans is my all time favorite font, so it would also have to be my favorite Web font too. It is quintessentially English, has an unparalleled beauty and elegance, and holds well on screen. You can check out this font here.

gill-sans

ADDITIONAL RESOURCES

  • Beddoes

    Great article! I I always find typography fascinating. Good shout on Gill Sans, it’s a great font, although its creator has a very, shall we say, colourful history!

  • Doug Steinberg

    Good article, but i didnt find the examples very inspirational. Didn’t see any examples of great hero typography other than embedded in the images…

    • http://www.litmus.com Justine, Litmus

      Hi Doug! Paul did say that “brands using great typography in email are very few and far between” and went on further to say that the examples he posted were brands that are using HTML text extensively. If you find any great examples of typography in email, please do pass them along!

      • Doug Steinberg

        Didn’t mean to sound harsh! There is definitely a scarcity of webfont use in email, but there’s plenty of good email typography that’s creatively used, even over images… Take Litmus emails for example ;)

        • Beyond the Envelope™

          Thank you for your comments, Doug! I’m always on the look out for more great examples of HTML typography on email (and Litmus is certainly one of those). I’d really appreciate you passing on any examples that you’ve seen on to me :)

  • matbathome

    Which email clients work well with web fonts? I design a lot of internal emails for various companies and many of them use Outlook 2007. Do you have a list of email clients that accept web fonts?

    • Jarrod

      CampaignMonitor has a CSS which includes @fontface. Just did some testing and it seems correct, although it doesn’t seem to work on iPads or iPhones… maybe I’m not doing it right. (http://www.campaignmonitor.com/css/)

      Bad news on the Outlook front, as always.

    • http://www.litmus.com Justine, Litmus

      Definitely check out the links from Campaign Monitor Email Design Review in the resources section at the bottom of the post!

  • http://twitter.com/andremora André Mora

    Nice to see a discussion about type. I work for Font Bureau and Webtype, and we obviously have a keen interest in using our fonts in emails. Webtype is already committed to a progressive approach to email — http://blog.webtype.com/?p=3948 — which includes a strong reliance on web fonts. Here are the first two editions of Webtype News:

    http://www.webtype.com/news/2013-11/
    http://www.webtype.com/news/2014-01/

    • Beyond the Envelope™

      Hi André. I think we should talk.