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.

House Industries using scale and typography to excellent effect

House Industries do have a head start when it comes to designing their email marketing because they sell beautiful products. As creators of amazing typefaces and now lovely iPhone apps, their content basically sells itself.

They do, however, make awesome use of scale in their HTML emails which works really well across desktop and mobile without the need to code a separate responsive version. There are a few points in this email where that falls down (sadly), because the CTA becomes tiny and the body copy (what little of it there is) is part of the images and gets scaled down a lot too. If these two aspects were attended to, it would be a great example.

(I would also suggest, at the risk of being branded a fun-sponge, that their cheeky unsubscribe copy is in fact too cheeky.)

Check out my Litmus Scoped version of the email here.

House Industries' email

 

How to fix superscript characters in HTML email

Image: TutorGig Encyclopedia
Image: TutorGig Encyclopedia

Anyone who codes HTML email will know that including any superscripted symbols is an absolute nightmare. Thanks to the Email Dude, I finally established a way to style superscript symbols so that they don’t disrupt line height and so that they look pretty consistent across all email clients.

I found this superscript fix to be the greatest one that works for all email clients.

Adjust the font-size and vertical-align as appropriate for your font size.