In this webinar, Beyond The Envelope's Paul Airy looks at the role of typography in email design and development. In particular, he'll focuses on the creative use of HTML text, so that you can make your emails look great without compromising on user experience. This webinar was presented on Thursday, November 14, 2013 by Paul Airy.

1. Typography.
// Creative typography in email
Beyond the Envelope™@Paul_Airy

2. I Type.
Beyond the Envelope™@Paul_Airy

3. Why HTML?
Beyond the Envelope™@Paul_Airy

4. // First 100 emails received in
November
Think recipient.
20 Only 20% html type within body
100 emails
Beyond the Envelope™@Paul_Airy

5. Think recipient.
What would you expect as a recipient?
Beyond the Envelope™@Paul_Airy
// Something to read
(it’s the least you can expect!)
HTML text is clear and crisp,
even when enlarged
// A way to interact
(clear and obvious)
Text Links, Bullet-Proof
Buttons.
// A smooth experience
HTML text loads quickly and
uses less data.
// No hurdles
No clicking to view the email
content.

6. The essential ingredients.
// Text Links
Beyond the Envelope™@Paul_Airy
What can HTML deliver?
// Pre-header (useful in iOS)
// Navigation (marketing emails)
// Title / Heading
// Subheadings
// Body copy
// Call to action

7. Where do we start?
Beyond the Envelope™@Paul_Airy

8. Layout. Type. Color.
Beyond the Envelope™@Paul_Airy

9. Layout. Type. Color.
Consider.
// Layout (managing space within a grid)
// Type (obviously)
// Color (not just the hex stuff!)
Beyond the Envelope™@Paul_Airy

10. Layout.
Beyond the Envelope™@Paul_Airy

11. // The <table> is our friend
Layout.
Beyond the Envelope™@Paul_Airy

12. Layout.
// Create thumbnails sketches
// Consider what each <table> will contain
// Consider what each <td> will contain
// One element per <td>
// One element per <table> in some cases
// Single or multi-column?
// Responsive?
Beyond the Envelope™@Paul_Airy

13. Layout.
// Create a wireframe from your sketch
// Construct using <table>, <tr> and
<td>
Beyond the Envelope™@Paul_Airy

14. Beyond the Envelope™@Paul_Airy
Create better experiences for
your subscribers.
GO RESPONSIVE
Nearly half of opens occur on
mobile devices. It’s time to get
responsive in your design.

15. Type & Typography.
Beyond the Envelope™@Paul_Airy

16. Type & Typography.
// Standard & Web Fonts
// Heading (or Display Font) Styling
// Bodycopy Styling
// Typographic Color
// Special Characters, Symbols & Ligatures
Beyond the Envelope™@Paul_Airy

17. style="font-family: helvetica, arial,
font-size: 13px; font-weight: normal;
sans-serif;
line-height:
18px; color: #333333;"
// Standard fonts are safe
// Limited choice
// Force you to use images to brand emails
// Consider styled alt tags where this is necessary
Standard Fonts.
Beyond the Envelope™@Paul_Airy

18. Web Fonts.
// Is email just playing catchup with the
web?
// Are web fonts good for email?
// Let’s look at the pro’s and con’s
Beyond the Envelope™@Paul_Airy

19. Web Fonts – Pros.
// ‘Theming’ your email becomes a reality
// Adds personality
Beyond the Envelope™@Paul_Airy

20. Web Fonts – Cons.
// Not really good for brands
// Support is sporadic
// ‘Management’ of fallbacks is time consuming
Beyond the Envelope™@Paul_Airy

21. Web Fonts.
// Use @font-face or @import to display ‘Google’ fonts
// Limited email client support
// Web fonts can work well with a good fallback
// Apple devices offer best support
// Test, test, test!
style="font-family: ‘GillSansMTStandard-Light’,
arial, sans-serif; font-size: 13px; font-weight:
helvetica,
normal;
line-height: 18px; color: #333333;"
Beyond the Envelope™@Paul_Airy

22. Web Fonts. Fallback.
// Choosing a good fallback is all important
// Be guided by the x-height of the typeface
// Consider the typeface characteristics
// Test, test, test!
x
Istok Web
Typography.
Arial
Beyond the Envelope™@Paul_Airy

23. The X-Height.
// X-height varies from typeface to typeface
// The length of the word is affected by the x-height
X-Height
Baseline
Cap Height
Beyond the Envelope™@Paul_Airy

24. Beyond the Envelope™@Paul_Airy
Various inboxes render your
fonts + fallback fonts differently.
PREVIEW NOW
Preview your emails before each
send to guarantee your font
styles looks great —everywhere,
every time.

25. Heading (Display) Styling.
style="font-family: ‘GillSansMTStandard-Light’, helvetica, arial,
font-size: 13px; font-weight: normal;sans-serif;
line-height: 18px; color: #333333;"
// Good opportunity to use web fonts
// If you do, ensure you have a fallback in the font-stack
// Keep headings relationally positioned to other text
// Use <table> to space as well as line-height
// Test, test, test!
Beyond the Envelope™@Paul_Airy

26. Bodycopy Styling.
// Use standard fonts
// Work up from 13px or 14px (iOS and user-friendly)
// Line-Height = Font-Size + 5px (and above)
// Allow enough <td> height for variations in rendering
style="font-family: helvetica, arial,
normal;
sans-serif;
line-height:font-size: 13px; font-weight:
18px; color: #333333;"
Beyond the Envelope™@Paul_Airy

27. Bodycopy Styling.
style="font-family: helvetica, arial,
normal;
sans-serif;
line-height:font-size: 13px; font-weight:
18px; color: #333333;"
// Be careful with <p> tags
// Style text with paragraphs using <span>
// Style the text within the <a> links too
// Check for typeface rendering within links
// Use <td> to space as well as line-height
Beyond the Envelope™@Paul_Airy

28. Special Characters.
&#42; *
// Special characters are best coded using entities
// Support of entity names is reasonable
// Support of entity codes is more reliable
Beyond the Envelope™@Paul_Airy

29. Special Characters.
* ’ £ $ – ½
// Asterisk &#42; *
// Apostrophies &#8217; ’
// Currency &#163; £ &#36; $
// En Dash &#8211; –
// One Half Fraction &#189; ½
Beyond the Envelope™@Paul_Airy

30. Ligatures.
flfiff
// Ligatures are available as entities
// Only available in Arial
// Particularly useful on Fl, Fi and FF
Beyond the Envelope™@Paul_Airy

31. Beyond the Envelope™@Paul_Airy
No longer are we tied to Times
New Roman and Arial.
CHECK IT OUT
Web fonts are just scratching the
surface of what is possible. Pick
up more handy typography tips
in our guide.

32. Color.
Beyond the Envelope™@Paul_Airy

33. Typographic Color.
#000000;
// Typographic color is NOT about red, blue, green etc.
// It describes the use of a variety of sizes and weights
// Makes for an interesting email, even in black
// Ensure contrast is strong against the background
Beyond the Envelope™@Paul_Airy

34. Beyond the Envelope™@Paul_Airy
8% of the male population is
color blind.
RUN A QUICK TEST
Contrast can increase
readability. Run your emails
through a color blind filter to
increase your accessibility.

35. Links & Buttons.
Beyond the Envelope™@Paul_Airy

36. Links & Buttons.
// Developing text links using inline CSS styling
// ‘Bullet-Proof’ buttons
// Restyling ‘blue links’ in iOS
// Disappearing font syndrome
Beyond the Envelope™@Paul_Airy

37. Text Links.
// Style within <a> tag
// Font-Family and Font-Size
// Font-Weight
// Text-Decoration
// Color
Beyond the Envelope™@Paul_Airy

38. &#9658;
Bullet-Proof Buttons.
// 44px high table cell
// Centre text within table cell
// Add padding around the text to enlarge clickable area
Beyond the Envelope™@Paul_Airy

39. Beyond the Envelope™@Paul_Airy
Dive a bit deeper. Become an
expert on bulletproof buttons.
LEARN MORE

40. Restyling Blue Links.
// Dates
// Addresses
// Telephone Numbers
// Number Strings (e.g. order references)
.iOSLinks a {color: #333333 !important; text-decoration: underline;}
<span class="iOSLinks">07962 177 477</span>
Beyond the Envelope™@Paul_Airy

41. Beyond the Envelope™@Paul_Airy
There are various strategies for
styling blue links.
SEE FOR YOURSELF
We did an in-depth analysis
on a few popular methods,
and found there is one
solution better than the rest.

42. Images.
Beyond the Envelope™@Paul_Airy

43. Images.
// Images sell
// Image based emails take less time to build
// Develop code snippets for re-use
// Create matching comp files in Photoshop
Beyond the Envelope™@Paul_Airy

44. Beyond the Envelope™@Paul_Airy
Various inboxes automatically
block images.
TEST YOUR IMAGES
Use ALT text to guarantee
your emails are functional in
every inbox.

45. Resources
// Web Fonts Elliot Ross
http://www.emaildesignreview.com/html-email-coding/
web-fonts-in-email-1482/
// Blue Links Lauren Smith
https://litmus.com/blog/update-banning-blue-links-on-ios-devices
// Styled Alt Tags Justine Jordan
https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email
// Ligatures
http://www.amp-what.com/unicode/search/latin%20ligature
Beyond the Envelope™@Paul_Airy

46. Beyond the Envelope™@Paul_Airy
Test your emails to ensure your
typography functions across
inboxes.
GET TESTING