Mid-Week Email Design Inspiration: Typecast

I can’t actually afford to use Typecast, but I love their service and I adore their emails.

Their latest email is no exception; lovely design, beautiful web fonts and the content is excellent.

Screen Shot 2013-05-14 at 10.05
Desktop view (in Gmail/Chrome)

Mobile View

The webfonts look lovely on mobile

I really like the amount of whitespace that is used across the design. The vertical rhythm is spot-on.

Lovely use of whitespace and graphics
Lovely use of whitespace and graphics

Webfonts!

They have used a lovely webfont called Enzo Web Pro Bold.

Screen Shot 2013-05-14 at 10.48
Enzo Web Pro

They have used the @font-face method in its own <style> tag. All the other styles are within another style tag. This might have been an attempt at bug resolution with webfonts— as you probably know, this can be very tricky.

Unfortunately, this method does not work in Outlook and it displays as Times New Roman. I did a quick test to confirm (bearing in mind that perhaps their subscriber list is devoid of Outlook and also that I ran a test using the code in the Litmus Scope version which may not be perfectly accurate).

Screen Shot 2013-05-15 at 2.19.07 PM
The method above will cause the text to display as Times New Roman in Outlook 2007/2010/2013

I’m in the process of collating a huge batch of methods for incorporating webfonts because none of the methods for doing this seem absolutely bulletproof to me. I will share the results when I have them.

More on using webfonts in HTML email

Further to my previous post on using webfonts in HTML emailElliot over at Email Design Review has also recently posted about the process of using webfonts in HTML email.

The two most notable things that I learned from his post were:

  1. That Android will only display a range of fonts available on Android handsets (Droid Sans, Droid Serif, Open Sans), and
  2. That you can try wrapping your font import code in a media query to prevent Outlook from reverting all your type to Times New Roman.

He says:

…as usual, Outlook likes to get involved and throw a spanner in the works. If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman. After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

I am keen to give this a try and see if it is successful. It would be a good alternative to using the <font> tag for folks who aren’t able to do so (i.e. those using a template).

Lessons in using webfonts in HTML email

When creating an HTML email using a Google webfont, I found that it was rendering in Outlook 2007, 2010 and 2013 in Times New Roman. Even though I had a fallback of Arial.

Outlook was choking on the webfont (I tried both with and without quotes) and just disregarding the whole stack. To fix this, the <font> tag is your friend!

By adding the <font> tag with the face attribute, the issue was resolved. Note the double quotes to open the stack, and the single quotes around the name of the webfont you are using.

This fix is thanks to Jemiina’s post over at the Campaign Monitor forums. Also see Campaign Monitor’s guide to Using Webfonts in Email.

(Finally, thanks to Redferret for pointing out my mixed up use of tags and attributes!)