Browse by...
Home Resources Blog

The presentation of text in not just readable, but delightful ways has been fundamental to email since the very beginning. So why does it often feel like an afterthought?

Much of the recent discussion around typography in email has centered on web fonts and fallbacks. This is no surprise – given the email community’s long-standing advocacy of better CSS support in email clients, it’s almost natural that we’d fixate on our inability to display fonts consistently from one recipient’s inbox to the next. However, if you were to discuss typography with someone outside of our email (if not web) realm, I’d suspect that whether you can use Avenir in an email newsletter wouldn’t be what keeps he or she up at night.

Tough ChitAdii Pienaar’s “Tough Chit” maintains visual interest by paying close attention to typography.

I don’t say this to downplay the importance of delivering on-brand email newsletters, however after attending a talk by Andy Clarke at SydCSS, I came to respect that the challenge in making copy visually-appealing on digital devices was at it’s core, one of getting environments like the browser and the inbox to obey fundamental rules. And if web wonks like Andy Clarke are still fighting to make modern browsers obey rules, there is likely little hope for reforming Outlook and Gmail. What a lamentable place we exist in!

Marginal blessings

The good news is that CSS support across email clients for the properties we require to create harmonious text are, for the most part, rock-solid. With some caveats, support for margin (as applied to <p> tags), text-indent (for leading), line-height and the properties required for typographical emphasis are generally consistent, meaning that our true challenge, as email designers, is in applying them properly.

Reducing email typography to simply (albeit carefully) pairing font sizes with line heights is again, only looking at a slice of the whole lemon pie. While we can control these variables, the larger problem is designing for complacent environments. Both Microsoft Word and our own browsers have made us oblivious to the typographic sins around us, which include not aligning our bulleted lists properly. In fact, you’ll see this flaw repeatedly within this very blog.

In short, bulleted lists are meant to have the text therein aligned to the left-hand edge like so:

A properly-aligned bulleted listImage courtesy Stuff & Nonsense

However, more commonly, bulleted lists are presented as:

  • Branding
  • Visual design
  • Responsive design

“Indenting” text in this manner ruins the reading flow – yes our mistake! – and makes type folks less willing to befriend you at parties. But as you’ll soon see, implementing bulleted lists in email is not as simple as it may seem.

Outlook not so bright

It would seem that the most basic way to achieve left-aligned bulleted lists would be to apply a negative margin to <li> elements, like so:

li { margin-left: -20px; } 

You would think that this would be reliable enough, but sadly, it is only supported in AOL Mail, Apple/iOS Mail and in the Android native mail client. In most cases, the bullets align with the left-edge (ie. margin has no effect). In Gmail, bulleted lists are indented by ~20px, almost in spite – this can be remedied by using &bull; instead. However, the most visible and enduring issue with bulleted lists can be found in Outlook 2000+, where bullets are truncated, regardless of the margin you apply.

The “fix” for this strangeness in Outlook is to use conditional comments, however any bullets with a negative margin will be truncated, because, Outlook.

We tell you this, as while it’s possible to adjust line-height, justification and more to taste, doing things like displaying properly-aligned lists and consistent baseline shifting remain well out of reach to most email designers. It’s no wonder that many people find themselves tempted to use images in place of copy, if only to save themselves the heartache of having well-crafted typography turn to mush in the inbox.

Despite it all, good-looking email type is not a lost cause, even when email clients like Outlook have minimal respect for typographic principles. You can still achieve gorgeous results in most modern email clients by being mindful of the CSS properties and HTML elements that you can use. Particular attention has been paid to email typography in our email template builder; Stig’s earlier post on progressive enhancement is only one example of creative ways to add interest to what could have been otherwise fairly standard typographic forms. Also, our Email Design Gallery is filled with great examples of senders doing extraordinary things with the tools they have on hand.

In all, we may not have the full suite of of typographic tricks at our disposal. Lists may not align as they should, while other elements, like line-height, often require a little work to get right. However, it’s still possible to strive for beautiful-looking newsletters, by both mastering the rules of email typography and of course, experimenting along the way.

For a deeper dive, I highly recommend 1910’s article on “A Typographic Approach to Email” and Litmus’ “Typography Tips for Email Designers“.

What’s your type?

Finally, I’d like to highlight some of the amazing work done by not just Stig, but the rest of the email community to create gorgeous typographic experiences in the inbox. Is there an email newsletter that puts type and copy first and foremost? Let us know about it in the comments below.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free