Creative Typography in Email

7,575
-1

Published on

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.

Published in: Design, Technology, Business
1 Comment
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,575
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1
Comments
1
Likes
15
Embeds 0
No embeds

No notes for slide
  • CTA: https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/pricing?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/blog/typography-tips-for-email-designers?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/pricing?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/blog/update-banning-blue-links-on-ios-devices?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • CTA: https://litmus.com/pricing?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • https://litmus.com/pricing?utm_campaign=guestwebinar_typography&utm_source=slideshare&utm_medium=social
  • Creative Typography in Email

    1. 1. Typography. // Creative typography in email Beyond the Envelope™@Paul_Airy
    2. 2. I Type. Beyond the Envelope™@Paul_Airy
    3. 3. Why HTML? Beyond the Envelope™@Paul_Airy
    4. 4. // First 100 emails received in November Think recipient. 20 Only 20% html type within body 100 emails Beyond the Envelope™@Paul_Airy
    5. 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. 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. 7. Where do we start? Beyond the Envelope™@Paul_Airy
    8. 8. Layout. Type. Color. Beyond the Envelope™@Paul_Airy
    9. 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. 10. Layout. Beyond the Envelope™@Paul_Airy
    11. 11. // The <table> is our friend Layout. Beyond the Envelope™@Paul_Airy
    12. 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. 13. Layout. // Create a wireframe from your sketch // Construct using <table>, <tr> and <td> Beyond the Envelope™@Paul_Airy
    14. 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. 15. Type & Typography. Beyond the Envelope™@Paul_Airy
    16. 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. 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. 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. 19. Web Fonts – Pros. // ‘Theming’ your email becomes a reality // Adds personality Beyond the Envelope™@Paul_Airy
    20. 20. Web Fonts – Cons. // Not really good for brands // Support is sporadic // ‘Management’ of fallbacks is time consuming Beyond the Envelope™@Paul_Airy
    21. 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. 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. 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. 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. 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. 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. 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. 28. Special Characters. * * // 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. 29. Special Characters. * ’ £ $ – ½ // Asterisk * * // Apostrophies ’ ’ // Currency £ £ $ $ // En Dash – – // One Half Fraction ½ ½ Beyond the Envelope™@Paul_Airy
    30. 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. 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. 32. Color. Beyond the Envelope™@Paul_Airy
    33. 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. 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. 35. Links & Buttons. Beyond the Envelope™@Paul_Airy
    36. 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. 37. Text Links. // Style within <a> tag // Font-Family and Font-Size // Font-Weight // Text-Decoration // Color Beyond the Envelope™@Paul_Airy
    38. 38. ► 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. 39. Beyond the Envelope™@Paul_Airy Dive a bit deeper. Become an expert on bulletproof buttons. LEARN MORE
    40. 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. 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. 42. Images. Beyond the Envelope™@Paul_Airy
    43. 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. 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. 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. 46. Beyond the Envelope™@Paul_Airy Test your emails to ensure your typography functions across inboxes. GET TESTING

    ×