{"id":15622,"date":"2014-12-17T14:55:00","date_gmt":"2014-12-17T14:55:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15622"},"modified":"2025-12-18T16:06:50","modified_gmt":"2025-12-18T21:06:50","slug":"typography-tips-for-email-designers","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers","title":{"rendered":"4 Typography Tips for Email Designers"},"content":{"rendered":"

If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger, and unsubscribes at their worst. As recent studies<\/a> show, upwards of 43% of subscribers have images disabled. While styled ALT text<\/a> can mitigate some issues, the only bulletproof method of getting your message across to subscribers is to use real text in the HTML of your campaigns.<\/p>\n

\n

The Ultimate Guide to Web Fonts in Email<\/strong><\/p>\n

Since the writing of this post, we’ve taken a deeper dive into typography. Historically, choosing the right font for your email has never been too hard, considering the limited number of web safe fonts<\/a> to choose from. But recently, things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have been using for years\u2014implementing web fonts in their emails. Here’s your ultimate guide to web fonts in emai<\/span>l<\/a>.<\/p>\n

Read more here \u2192<\/a><\/p>\n<\/div>\n

If you\u2019ve relied on image-based emails for too long (hey, they used to be the de facto solution for most companies), then you may not know of the latest advances in typography for email. No longer are we tied to using Arial and Times New Roman, and web fonts are just scratching the surface of what\u2019s possible. In this post, we\u2019ll take a look at the basics of email typography and pick up some handy tips from designer Paul Airy<\/a> on pushing text to the limits in our designs.<\/p>\n

Typography Basics<\/h2>\n

A lot of email design is about ensuring that email apps and rendering engines don\u2019t do weird things to our campaigns. When it comes to text, most issues can be resolved by including some boilerplate styles on every bit of copy. In our own emails, we subscribe to the <td> or GTFO<\/strong> methodology, so nearly all of our styles are applied at the table cell level.<\/p>\n

<td>Some copy goes here.<\/td><\/code><\/pre>\n
On that table cell, we recommend including the following CSS styles, adjusted to your preferences: color, font-family, font-size, font-weight, and line-height.<\/p>\n
<td style=\u201dcolor: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;\u201d>Some copy goes here.<\/td><\/code><\/pre>\n
When declared, these styles will keep your text rendering well in even the most hostile email apps. And, if we keep each piece of content in its own table cell, we can easily style those components however we want without having to worry about inheritance issues. When we want to target a specific chunk of text within a larger block, we can wrap that text in a span and use inline styles:<\/p>\n
<td style=\u201dcolor: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;\u201d>Some copy goes here. <span style=\u201dfont-weight: bold; font-style: italic;\u201d>Calling attention to content<\/span> using font styles is a great way to get your message across.<\/td><\/code><\/pre>\n
While we\u2019re using Arial in the examples above (I know, I know\u2026 ), you can go beyond these basic fonts\u2013at least in some clients. Let\u2019s see how.<\/p>\n
Using Web Fonts<\/h2>\n
Back in August, we held our second annual Email Design Conference<\/a>. One of our favorite talks was \u2018HTML Typography in Email\u2019 from designer Paul Airy. Throughout the talk, Paul went deep into some more advanced aspects of typography and their support in email.<\/p>\n
Put simply, web fonts allow us to use fonts that are not installed on a user\u2019s machine by including them in our CSS. While web font solutions have been around for years and are very popular on the web, their acceptance in email design tools<\/a> is a recent development.<\/p>\n
There are a few different methods for including web fonts, but Paul recommends linking out to an external stylesheet to pull in fonts from a web fonts provider like Google Web Fonts.<\/p>\n
<head>\n \u00a0\u00a0\u00a0<link rel=\"noopener\" target=\"_blank\" href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans' rel='stylesheet' type='text\/css'>\n <\/head><\/code><\/pre>\n
Then, in our inline styles, we can add the font to our font-family declaration:<\/p>\n
<td style=\u201dcolor: #444444; font-family: \u2018Open Sans\u2019, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;\u201d>Some copy goes here.<\/td><\/code><\/pre>\n
Now, for email clients that support web fonts, our text will be displayed using our prefered typeface. And, for all other email clients, the text will fall back to our alternative fonts, in this case Helvetica, Arial, or a generic sans serif.<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n
Web Font Support in Email Clients using <link><\/p>\n<\/td>\n<\/tr>\n
\n
Apple Mail 6<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Lotus Notes 8<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Outlook 2000<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Outlook 2011 on Mac<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Thunderbird<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
iPad<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
iPhone<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Android 2.3<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Android 4.2<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Unfortunately, Outlook won\u2019t fall back to our alternative fonts (no surprise there!). Instead, it will ignore our font stack and display text using Times New Roman. Fortunately, we can account for this behavior by using a CSS class to target the text and then use conditional comments to feed Outlook an alternate font stack that it will actually use.<\/p>\n
\n<!--[if mso]>\n<style type=\u201dtext\/css\u201d>\n.body-text {\nfont-family: Arial, sans-serif;\n}\n<\/style>\n<![endif]-->\n\n<td class=\u201dbody-text\u201d style=\u201dcolor: #444444; font-family: \u2018Open Sans\u2019, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;\u201d>Some copy goes here.<\/td>\n<\/code><\/pre>\n
Now, instead of Times New Roman, our campaign will default to Arial or another installed sans serif, keeping our design intact, if a little generic.<\/p>\n
\n\n\n\n
\"Typography<\/td>\n\n
Preview your email in popular clients and devices<\/h2>\n
See how email clients display your fonts and fix issues before you send with Litmus Email Previews.<\/p>\n
Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Multiple Columns Without Table Cells<\/h2>\n
One of my favorite parts of Paul\u2019s talk was when he decried the options for having multiple columns in which text can flow in an email. Since all of our emails are table-based, which naturally have columns, the typical solution is to just use adjacent table cells for multiple columns. But, what if we want to have our text flow between two columns within one table cell instead of hard-coding the content into separate cells?<\/p>\n
The solution is to use a newer CSS property called column-count. Be warned: we\u2019re in Wild West territory here\u2013column-count has very limited support across email clients (or on the web, for that matter). However, it\u2019s an elegant solution that falls back gracefully in email clients that lack support.<\/p>\n
Using column-count, we can specify the number of columns we want our text split into and have the rendering engine figure out the gory details for us. Including it on our table cell is easy:<\/p>\n
<td style=\u201d-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;\u201d>Some copy goes here.<\/td><\/code><\/pre>\n
Now, no matter how much content we dump in there, it will flow naturally between the two columns. And, when unsupported, column-count falls back to a single-column layout. Like we mentioned before, support isn\u2019t the best.<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n
Multiple Column Support in Email Clients using column-count<\/p>\n<\/td>\n<\/tr>\n
\n
Apple Mail 6<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Outlook 2011 on Mac<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
AOL Mail (Explorer)<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
AOL Mail (Chrome)<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
iPad<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
iPhone<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Android 2.3<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n
\n
Android 4.2<\/p>\n<\/td>\n
\"check-green\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
This is one instance where applying your styles to a paragraph tag actually works to your advantage. In Paul\u2019s testing, he found that by using column-count on a paragraph, both AOL Mail and Outlook.com in Firefox worked, on top of the previously mentioned email clients.<\/p>\n
Paul actually puts this technique to use in his own email newsletter, Type E<\/a>.<\/p>\n
Scratching the Surface<\/h2>\n
These are just a few examples of how you can enhance the type in your campaigns. Paul goes over a few other goodies during his talk including line breaks in ALT text, using drop caps, and some amazing tips for choosing solid fallback fonts. We\u2019re sure that you can think of even more creative techniques for making your text look amazing.<\/p>\n
TEST TYPOGRAPHY IN YOUR CAMPAIGNS<\/h2>\n
Inspired to take your type game to the next level? Just be sure to test your campaigns before sending them out.<\/p>\n
Book a demo \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
If we\u2019ve learned anything as email designers over the past …<\/p>\n","protected":false},"author":3,"featured_media":15623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[53],"class_list":["post-15622","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","blog_category-tips-resources"],"yoast_head":"\n4 Typography Tips for Email Designers - Litmus<\/title>\n<meta name=\"description\" content=\"If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Typography Tips for Email Designers\" \/>\n<meta property=\"og:description\" content=\"If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-17T14:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T21:06:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"4 Typography Tips for Email Designers - Litmus","description":"If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers","og_locale":"en_US","og_type":"article","og_title":"4 Typography Tips for Email Designers","og_description":"If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger,","og_url":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2014-12-17T14:55:00+00:00","article_modified_time":"2025-12-18T21:06:50+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers"},"author":{"name":"","@id":""},"headline":"4 Typography Tips for Email Designers","datePublished":"2014-12-17T14:55:00+00:00","dateModified":"2025-12-18T21:06:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers"},"wordCount":1157,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers","url":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers","name":"4 Typography Tips for Email Designers - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg","datePublished":"2014-12-17T14:55:00+00:00","dateModified":"2025-12-18T21:06:50+00:00","description":"If we\u2019ve learned anything as email designers over the past few years, it\u2019s that image-based emails are unreliable at best and lead to frustration, anger,","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image@2x.jpg","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/typography-tips-for-email-designers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"4 Typography Tips for Email Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=15622"}],"version-history":[{"count":6,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15622\/revisions"}],"predecessor-version":[{"id":121710,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15622\/revisions\/121710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/15623"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15622"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15622"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}