Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Beyond the Envelope™@Paul_Airy
// Web Fonts in email: How? What? Where?
Web Fonts
Beyond the Envelope™@Paul_Airy
Paul Airy.
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™
HTML Email Research, Design and Development Laboratory
Beyond the Envelope™@Paul_Airy
// How to implement Web Fonts.
// What the font formats and licensing options are.
// Where...
Beyond the Envelope™@Paul_Airy
www= :(
Beyond the Envelope™@Paul_Airy
@= :(
Beyond the Envelope™@Paul_Airy
But…
Beyond the Envelope™@Paul_Airy
// Apple iPhone.
// Outlook.
// Apple iPad.
Top 5 Email Clients*
// Gmail.
// Apple Mail.
*...
Beyond the Envelope™@Paul_Airy
46%
Beyond the Envelope™@Paul_Airy
:)
Beyond the Envelope™@Paul_Airy
Why?
Beyond the Envelope™@Paul_Airy
UX.
Beyond the Envelope™@Paul_Airy
How?
// Web Fonts in email: How? What? Where?
Beyond the Envelope™@Paul_Airy
// 1. Import your font in the <head>.

// 2. Declare your font in the font stack.
How to im...
Beyond the Envelope™@Paul_Airy
How to implement Web Fonts: Self-Hosted
@font-face {

font-family: ‘Playball';

src: url(‘h...
Beyond the Envelope™@Paul_Airy
How to implement Web Fonts: Hosted
<link href='http://
fonts.googleapis.com/css?
family=Pla...
Beyond the Envelope™@Paul_Airy
How to implement Web Fonts: Hosted
@import url(http://
fonts.googleapis.com/css?
family=Pla...
Beyond the Envelope™@Paul_Airy
In the font stack
font-family: 'Playball', cursive,
georgia, times, serif;
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
What?
// Web Fonts in email: How? What? Where?
Beyond the Envelope™@Paul_Airy
Formats.
Beyond the Envelope™@Paul_Airy
// TrueType (TT).
// OpenType (TrueType and PostScript Flavours).
// Web Open Font Format (...
Beyond the Envelope™@Paul_Airy
// Developed by Apple and Microsoft.
// Initially had a poor reputation for low quality.
//...
Beyond the Envelope™@Paul_Airy
// Comes in two flavours (TrueType and PostScript).
// Additional characters within set (e.g...
Beyond the Envelope™@Paul_Airy
// Not ‘technically’ a font format.
// Think of it as a .zip file for fonts.
// May well bec...
Beyond the Envelope™@Paul_Airy
Suppliers.
Beyond the Envelope™@Paul_Airy
Web Font Suppliers
Beyond the Envelope™@Paul_Airy
Licensing.
Beyond the Envelope™@Paul_Airy
// CSS rules delivered via API.
// Free or commercially accessible.
// No standard pricing ...
Beyond the Envelope™@Paul_Airy
// Control.
// Management Required. Server. Formats.
// Can be more expensive.
Self-Hosted ...
Beyond the Envelope™@Paul_Airy
Where?
// Web Fonts in email: How? What? Where?
Beyond the Envelope™@Paul_Airy
// Avoid ‘brand sensitive’ areas.
// Anywhere else.
// Allow for text reflowing within table...
Beyond the Envelope™@Paul_Airy
// How to implement Web Fonts.
// What Font Formats and licensing to choose from.
// Where ...
Beyond the Envelope™@Paul_Airy
Thank you.
// Web Fonts in email: How? What? Where?
Upcoming SlideShare
Loading in …5
×

Web Fonts in Email: How? What? Where?

588 views

Published on

Web Fonts. As Email Designers and Developers we want to include them in our emails. But how do we go about it? What font formats and licensing options should we choose? And where are the best places in our emails to use them?

  • Be the first to comment

Web Fonts in Email: How? What? Where?

  1. 1. Beyond the Envelope™@Paul_Airy // Web Fonts in email: How? What? Where? Web Fonts
  2. 2. Beyond the Envelope™@Paul_Airy Paul Airy.
  3. 3. Beyond the Envelope™@Paul_Airy Beyond the Envelope™ HTML Email Research, Design and Development Laboratory
  4. 4. Beyond the Envelope™@Paul_Airy // How to implement Web Fonts. // What the font formats and licensing options are. // Where to place Web Fonts in your emails. How? What? Where?
  5. 5. Beyond the Envelope™@Paul_Airy www= :(
  6. 6. Beyond the Envelope™@Paul_Airy @= :(
  7. 7. Beyond the Envelope™@Paul_Airy But…
  8. 8. Beyond the Envelope™@Paul_Airy // Apple iPhone. // Outlook. // Apple iPad. Top 5 Email Clients* // Gmail. // Apple Mail. *Calculated from 395 million opens tracked by Litmus Email Analytics in April 2014
  9. 9. Beyond the Envelope™@Paul_Airy 46%
  10. 10. Beyond the Envelope™@Paul_Airy :)
  11. 11. Beyond the Envelope™@Paul_Airy Why?
  12. 12. Beyond the Envelope™@Paul_Airy UX.
  13. 13. Beyond the Envelope™@Paul_Airy How? // Web Fonts in email: How? What? Where?
  14. 14. Beyond the Envelope™@Paul_Airy // 1. Import your font in the <head>. // 2. Declare your font in the font stack. How to implement Web Fonts
  15. 15. Beyond the Envelope™@Paul_Airy How to implement Web Fonts: Self-Hosted @font-face {
 font-family: ‘Playball';
 src: url(‘http:// www.beyondtheenvelope.co.uk/ webfonts/playball-regular.woff') format(‘woff’); }
  16. 16. Beyond the Envelope™@Paul_Airy How to implement Web Fonts: Hosted <link href='http:// fonts.googleapis.com/css? family=Playball' rel='stylesheet' type='text/css'>
  17. 17. Beyond the Envelope™@Paul_Airy How to implement Web Fonts: Hosted @import url(http:// fonts.googleapis.com/css? family=Playball);
  18. 18. Beyond the Envelope™@Paul_Airy In the font stack font-family: 'Playball', cursive, georgia, times, serif;
  19. 19. Beyond the Envelope™@Paul_Airy
  20. 20. Beyond the Envelope™@Paul_Airy What? // Web Fonts in email: How? What? Where?
  21. 21. Beyond the Envelope™@Paul_Airy Formats.
  22. 22. Beyond the Envelope™@Paul_Airy // TrueType (TT). // OpenType (TrueType and PostScript Flavours). // Web Open Font Format (WOFF). Font Formats // Embedded OpenType (EOT). // PostScript (PS).
  23. 23. Beyond the Envelope™@Paul_Airy // Developed by Apple and Microsoft. // Initially had a poor reputation for low quality. // Can now be relied on for quality. TrueType (TT)
  24. 24. Beyond the Envelope™@Paul_Airy // Comes in two flavours (TrueType and PostScript). // Additional characters within set (e.g. ligatures). OpenType (OT) // Valid Web Font format.
  25. 25. Beyond the Envelope™@Paul_Airy // Not ‘technically’ a font format. // Think of it as a .zip file for fonts. // May well become the standard in the future. Web Open Font Format (WOFF)
  26. 26. Beyond the Envelope™@Paul_Airy Suppliers.
  27. 27. Beyond the Envelope™@Paul_Airy Web Font Suppliers
  28. 28. Beyond the Envelope™@Paul_Airy Licensing.
  29. 29. Beyond the Envelope™@Paul_Airy // CSS rules delivered via API. // Free or commercially accessible. // No standard pricing model for email. Hosted Licensing: Pro’s and Cons
  30. 30. Beyond the Envelope™@Paul_Airy // Control. // Management Required. Server. Formats. // Can be more expensive. Self-Hosted Licensing: Pro’s and Cons
  31. 31. Beyond the Envelope™@Paul_Airy Where? // Web Fonts in email: How? What? Where?
  32. 32. Beyond the Envelope™@Paul_Airy // Avoid ‘brand sensitive’ areas. // Anywhere else. // Allow for text reflowing within table cells. Where? // Avoid body copy within static table cells.
  33. 33. Beyond the Envelope™@Paul_Airy // How to implement Web Fonts. // What Font Formats and licensing to choose from. // Where to place Web Fonts. How? What? Where?
  34. 34. Beyond the Envelope™@Paul_Airy Thank you. // Web Fonts in email: How? What? Where?

×