• Save
Creative Typography in Email
Upcoming SlideShare
Loading in...5
×
 

Creative Typography in Email

on

  • 4,654 views

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 ...

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.

Statistics

Views

Total Views
4,654
Views on SlideShare
1,824
Embed Views
2,830

Actions

Likes
12
Downloads
0
Comments
1

21 Embeds 2,830

https://litmus.com 2346
http://www.scoop.it 237
http://cloud.feedly.com 60
http://litmus.com 57
http://kenz.pw 25
http://ejangi.com 23
http://newsblur.com 19
http://www.feedspot.com 15
https://hootsuite.scoop.it 11
http://feedly.com 11
https://digg.com 4
http://digg.com 4
https://inoreader.com 4
https://feedly.com 3
https://translate.googleusercontent.com 3
http://www.newsblur.com 2
https://www.inoreader.com 2
http://feedproxy.google.com 1
http://www.linkedin.com 1
https://yoleoreader.com 1
https://cloud.feedly.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creative Typography in Email Creative Typography in Email Presentation Transcript

  • // Creative typography in email Typography. @Paul_Airy Beyond the Envelope™
  • I ♡ Type. @Paul_Airy Beyond the Envelope™
  • P nd Cambridge, MA Leeds, UK @Paul_Airy Beyond the Envelope™
  • @Paul_Airy Beyond the Envelope™
  • Control. @Paul_Airy Beyond the Envelope™
  • Pixel Precision. @Paul_Airy Beyond the Envelope™
  • Control. @Paul_Airy Beyond the Envelope™
  • Pixel Precision. @Paul_Airy Beyond the Envelope™
  • Management. @Paul_Airy Beyond the Envelope™
  • Why HTML? @Paul_Airy Beyond the Envelope™
  • 1 Think Recipient @Paul_Airy Beyond the Envelope™
  • Think recipient. // First 100 emails received in November 100 emails 20 @Paul_Airy Only 20% html type within body Beyond the Envelope™
  • Think recipient. In their shoes. @Paul_Airy Beyond the Envelope™
  • Think recipient. What would you expect as a recipient? // Something to read (it’s the least you can expect!) HTML text is clear and crisp, even when enlarged. @Paul_Airy Beyond the Envelope™
  • Think recipient. What would you expect as a recipient? // A way to interact (clear and obvious) Text Links, Bullet-Proof Buttons. @Paul_Airy Beyond the Envelope™
  • Think recipient. What would you expect as a recipient? // A smooth experience HTML text loads quickly and uses less data. @Paul_Airy Beyond the Envelope™
  • Think recipient. What would you expect as a recipient? // No hurdles No clicking to view the email content. @Paul_Airy Beyond the Envelope™
  • 2 Essential Ingredients @Paul_Airy Beyond the Envelope™
  • The essential ingredients. What can HTML deliver? // Pre-header (particularly useful on iOS) // Navigation (marketing emails) // Title / Heading // Subheadings @Paul_Airy Beyond the Envelope™
  • The essential ingredients. What can HTML deliver? // Bodycopy // Text Links // Call to action @Paul_Airy Beyond the Envelope™
  • So. @Paul_Airy Beyond the Envelope™
  • Where do we start? @Paul_Airy Beyond the Envelope™
  • 3 Layout. Type. Colour. @Paul_Airy Beyond the Envelope™
  • Layout. Type. Colour. Consider. // Layout (managing space within a grid) // Type (obviously) // Colour (not just the hex stuff!) @Paul_Airy Beyond the Envelope™
  • Layout (Grid) @Paul_Airy Beyond the Envelope™
  • Layout. // The <table> is our friend @Paul_Airy C Beyond the Envelope™
  • 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? @Paul_Airy Beyond the Envelope™
  • Layout. // Create a wireframe from your sketch // Construct using <table>, <tr> and <td> @Paul_Airy Beyond the Envelope™
  • Type & Typography. @Paul_Airy Beyond the Envelope™
  • Type & Typography. // Standard & Web Fonts // Heading (or Display Font) Styling // Bodycopy Styling // Typographic Colour // Special Characters, Symbols & Ligatures @Paul_Airy Beyond the Envelope™
  • Standard Fonts. style="font-family: helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: #333333;" // Standard fonts are safe (obviously) // Limited choice // Force you to use images to brand emails // Consider styled alt tags where this is necessary @Paul_Airy Beyond the Envelope™
  • Web Fonts. // Let’s look a little closer… @Paul_Airy Beyond the Envelope™
  • 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 @Paul_Airy Beyond the Envelope™
  • Web Fonts – Pros. // ‘Theming’ your email becomes a reality // Adds personality @Paul_Airy Beyond the Envelope™
  • Web Fonts – Cons. // Not really good for brands // Support is sporadic // ‘Management’ of fallbacks is time consuming @Paul_Airy Beyond the Envelope™
  • Web Fonts. style="font-family: ‘GillSansMTStandard-Light’, helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: #333333;" // 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! @Paul_Airy Beyond the Envelope™
  • Web Fonts. Fallback. x Typography. Istok Web Arial // Choosing a good fallback is all important // Be guided by the x-height of the typeface // Consider the typeface characteristics // Test, test, test! @Paul_Airy Beyond the Envelope™
  • The X-Height. Hex Cap Height X-Height Baseline // X-height varies from typeface to typeface // The length of the word is affected by the x-height @Paul_Airy Beyond the Envelope™
  • Heading (Display) Styling. style="font-family: ‘GillSansMTStandard-Light’, helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; 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! @Paul_Airy Beyond the Envelope™
  • Warning: Line-Height! ! @Paul_Airy Beyond the Envelope™
  • Bodycopy Styling. style="font-family: helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: #333333;" // 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 @Paul_Airy Beyond the Envelope™
  • Bodycopy Styling. style="font-family: helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 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 @Paul_Airy Beyond the Envelope™
  • Special Characters. &#42; * // Special characters are best coded using entities // Support of entity names is reasonable // Support of entity codes is more reliable @Paul_Airy Beyond the Envelope™
  • Special Characters. * ’ £ $ –½ // Asterisk &#42; * // Apostrophies &#8217; ’ // Currency &#163; £ &#36; $ // En Dash &#8211; – // One Half Fraction &#189; @Paul_Airy ½ Beyond the Envelope™
  • Ligatures. fl fi ff // Ligatures are available as entities // Only available in Arial // Particularly useful on Fl, Fi and FF @Paul_Airy Beyond the Envelope™
  • Colour @Paul_Airy Beyond the Envelope™
  • Typographic Colour. #000000; // Typographic colour 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 @Paul_Airy Beyond the Envelope™
  • 4 Links & Buttons @Paul_Airy Beyond the Envelope™
  • Links & Buttons. // Developing text links using inline CSS styling // ‘Bullet-Proof’ buttons // Restyling ‘blue links’ in iOS // Disappearing font syndrome @Paul_Airy Beyond the Envelope™
  • Text Links. // Style within <a> tag // Font-Family and Font-Size // Font-Weight // Text-Decoration // Color @Paul_Airy Beyond the Envelope™
  • Bullet-Proof Buttons. &#9658; // 44px high table cell // Centre text within table cell // Add padding around the text to enlarge clickable area @Paul_Airy Beyond the Envelope™
  • Restyling Blue Links. .iOSLinks a {color: #333333 !important; text-decoration: underline;} <span class="iOSLinks">07962 177 477</span> // Dates // Addresses // Telephone Numbers // Number Strings (e.g. order references) @Paul_Airy Beyond the Envelope™
  • 5 Finally… @Paul_Airy Beyond the Envelope™
  • Finally (Time is Money) // Images sell // Image based emails take less time to build // Develop code snippets for re-use // Create matching comp files in Photoshop @Paul_Airy Beyond the Envelope™
  • 6 One more thing… @Paul_Airy Beyond the Envelope™
  • 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 @Paul_Airy Beyond the Envelope™
  • Thank you. @Paul_Airy Beyond the Envelope™
  • Q&As @Paul_Airy @Paul_Airy Beyond the Envelope™