Should email be 99.9% typography, too?

If email designers hold a single thing in common, it's a collective trepidation towards testing. This task can seem near-impossible when responsive techniques are thrown into the mix, given the variety in email-ready phones and tablets in use today. However, while multi-column layouts can break and images fail to load, there's one design element that never fails get the message across - type.

Now, we're not talking about devolving into sending plain-text email here - although as far as consistency goes, nothing can beat it. What we have in mind is a greater emphasis on creating reliable, responsive experiences by taking a type-first approach to email design.

This thinking can be attributed to a similar trend that's happening on the web, where designers are foregoing fancy layouts for simpler, more device-independent designs. As James Young observes in his post, "The responsive web will be 99.9% typography":

"Looking at a string of recent releases from individuals, startups and agency clients it feels like there’s an emerging aesthetic that is very stripped back, focused on typography and blocks of simple content that can be easily moved..."- "The responsive web will be 99.9% typography", WelcomeBrand.co.uk

This aesthetic shift isn't being driven by some fluffy love of minimalism, it's being driven by both necessity and results. Necessity, because complicated and media-rich designs mean more testing for designers to do. Results, because successful responsive designs, both email and web, result in happier readers and greater engagement.

A type-first, hacks-last approach to email

While many HTML email methodologies have been long abandoned by the web (table-based layouts, anyone?), responsive design has resulted in the two disciplines sharing much in common as of late. Again, from James:

"We’re reaching the point already where there are more hacks... than there have ever been in order to make a site work on even a small range of devices. 12 months down the line, us, the designers of these sites will be maintaining an increasingly flaky set of templates and nested media queries to deal with screen sizes, retina displays and whatever appears on the device market next year.- "The responsive web will be 99.9% typography", WelcomeBrand.co.uk

More hacks... Flaky templates... Sound familiar? That's because email designers like us have had to put up with a lot of nonsense from email clients for a very long time now, as the hacks that fill our blog and forums will attest. As a result of this nonsense, we've had to design defensively for the sake of both current and new email clients - minimizing the use of CSS, while maximizing font-sizes and the use of 'bulletproof' HTML attributes. Now, instead of setting us free with reliable CSS support, mobile devices have forced us to ratchet this defensiveness up a notch, to cater for a myriad of display dimensions, too.

This email newsletter by Justin Veiga shows this text-first trend in action - it remains readable and beautiful in every client, at any zoom level.

Will the result of this defensiveness be a run towards big-type, only-type emails? For one, these require less hacks and less maintenance from designers, not to mention, less testing. Heck, emails like Justin Veiga's (above) don't even require media queries to look big on small screens. And you can forget about the injustices of image blocking altogether when images are secondary to the message in the text.

Then, for email recipients, there's the benefit of a clearer message, greater consistency between email clients and shorter load times. As they say, less is more.

Should email, like the web, become 99.9% typography? We'd love to hear your opinion, so please chime in with your text-only comments below.

Posted by Ros Hodgekiss

11 Comments

  • Jeremy Smith
    14th February

    If email clients had good font-face support, I think I’d tend to agree. Justin’s design is really nice, but if we’re all back to using Georgia and Arial and solid background colors, it’s hard to get much variety and, more importantly, brand differentiation out of such a limited toolset.

  • Justin
    14th February

    No wonder my ears were burning… Hi, I’m the Justin that designed that. A few things:

    - I vote YES. The same way ‘mobile first’ has taken off in web design, I’ve been approaching my templates with a “text/mobile first” attitude. Even the multi-column ones. For the most part we’re dealing with people in a rush, and making emails readable is priority #1 in my eyes (tied only with having good content, though that’s often out of our hands).

    - To Jeremy’s point, sure, it’s a shame that web font support isn’t better, but considering it works on iOS/Apple and we have fallbacks it’s not *that* bad. Hell, iOS accounts for over 50% of some of my clients’ subscribers. And background image support is way higher (though I didn’t think it was necessary for that lunch flyer at the time).

    - The thing I love about email design (other than the <tabIe> time warp back to 1999 that it gives me) is that we have such an opportunity to design things that help a brand image stick… Things that get seen regularly and engaged with. I’m preaching to the choir here, but every time I get a one-big-image email from a brand I can’t help but think “C’mon! You had a chance and you just lost me!” Devices are getting bigger and smaller at the same time and emails have to break out of the pixel grid prison for the same reason web design does.

  • Ran
    14th February

    This shoud first be directed towards customer/clients. I’ve had clients that wanted designs that would work great if applied to print or to webpages, but not for eDMs. And it’s quite hard to make them understand the differences among designing for web, emails and print.

    I agree with Jeremy Smith, that if we revert to such minimalistic approach, it would be very hard for a design to stand out. I also think that monthly email newsletters would suffer more because these are the ones that are already text-intensive and would benefit from a design which is not 99.9% typography.

  • Matt
    15th February

    Agree that explain the challenges of designing in email - especially compared to what’s possible on the web - is hard.

    But its our job as designers to understand and remain focused on client goals/values and choose the right mix of tactics. Sometimes looking awesome 65% of the time might be what they want.

    Going back to the post—In a recent project, we’ve update an old, nearly pure text newsletter template used on several of our sites—using many of the best practices above. Single column, web-safe type, a little media query action for the smartphones…

    What is challenging us is that we are seeing very different open and click performance from site to site, even through the variation in the template from site to site is pretty much color and logo—and of course the content.

  • Jeremy Smith
    15th February

    “The thing I love about email design (other than the <tabIe> time warp back to 1999 that it gives me) is that we have such an opportunity to design things that help a brand image stick… Things that get seen regularly and engaged with.”

    Agreed. Email is amazing for this reason. However, I think it’s really difficult to delight simply with text. I turn on images by default in Gmail for senders I know will delight me visually. Even though I hate being “sold to,” I do enjoy getting an occasional nugget of visual goodness in my inbox. That’s power to the brands that can do that.

    For everyone else, it’s images off.

  • Jen McGahan
    15th February

    Before I jump in, let me say I’m NOT a designer…I just appreciate good design. I also happen to write and “do email” for small biz folks using mainstream email services. We’re at the mercy of drag and drop design creation and mostly pre-made templates. While watching trends and best practices of larger marketing departments in the email arena, I tend to stick with one column, one pic in line with the column and compelling copy (which is where I come in). Regarding design within email services, I’ve found basic is best. Where I try to get clicks and opens is through consistently well-written copy. This text trend - if it becomes one - would fit nicely into my theory.

  • Rachel Lord
    23rd February

    I agree that Justin’s email design is a rather nice little piece which would brighten anyone’s inbox BUT client needs has to come first in any design, be it email, web or print.

    If the client is selling dresses, then telling us girlies (and men if you like) what the dresses look like is not going to be nearly as effective as seeing the dress on a wafer thin model, we buy with our eyes and we want to be entertained. Don’t get me wrong, sending out a single large one image email is not the way to go here, I’m talking quality client aware content, a good mix to be informative, inspiring and appropriate to the reader for them to take the required action.

    We also have to consider the ‘template’ side of client emails, we are dealing with clients that are not necessarily design aware and will not have the artistic flare to know what looks great, we can restrain the templates to a certain degree but client ‘tweak’ when set free and before you know it everything it BIG BOLD and RED (not like yours Justin, yours is lovely).

    Keep things individual to that client and the needs of that client. If its a single column layout then great but if it need to sing and dance then pop your tap shoes on and make it happen.

  • Stephen
    26th February

    Enjoyed this article and the comments. I think it’s tricky to design for both the lowest common denominator as well as the highest. This is where the value of a good copywriter is realized.

  • Erik Woods
    6th March

    I would like to talk about the code in this email you posted. For reference: http://gallery.campaignmonitor.com/ViewEmail/r/E641DC05B343BCB7/

    I have a few questions - for the developer or for anyone reading this.

    Have you found that using “*” on <td> as a width value is consistent? In your document, it is not technically valid markup since you’re using the XHTML strict doctype - and I think that’s alright, but some email clients force that same doctype, and I think you may find that “*” doesn’t work in all situations. For reference, this is found on the <td> containing the address, at the bottom of the email.

    Did you realize that on this same <td>, that your bgcolor is missing the pound sign? Hexidecimal colors should have pound signs.

    Also did you realize that in this same section, the white section is extending by 1px because the corner images you’re using contain 1px of red color in it? It’s a minor detail but it does extend.

    What is the point of using align=“absbottom” on your <img> tags? It’s a deprecated value for that attribute.

    Why aren’t you using self-closing meta tags if you’re using the XHTML doctype? It’s technically invalid, as well.

    Not that I care TOO much about validation in HTML emails, but… I also don’t see the point of using align=“absbottom” on <img>.

    Finally…. why are you using this in so many places?
    margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;

    You shouldn’t need to do that…

    Don’t misconstrue this as a discounting of the great work and effort. I wish that I could code/design emails like this for our clients. Unfortunately I cannot - not for lack of skill or knowledge but for lack of flexibility and rebranding and other things.

  • Erik Woods
    6th March

    I should have known that it would strip my <td> and <img> tags.
    /sigh

    Campaign Monitor - I wish that you would improve your commenting system so that 1) we could do this and 2) so that we could subscribe to responses and so that 3) we could edit our own posts when we make errors like I just did. :/

  • Ros Hodgekiss
    6th March

    Hey Erik, thank you for pointing this out - not being able to post code is definitely a shortcoming of our commenting system and we’ll certainly look into how we can improve this. Previously, I’ve recommended posting code in our forums, as it’s much more robust and gets regularly checked. But I agree, we could do much better.

    I’ll call upon the designer to see if he has any comments here - however for the purposes of staying on-topic, we’ll be moving this conversation to the original gallery entry page, where it’s sure to benefit everyone.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account