September 27, 2011 / Tutorials & Advice

Anyone who has ever had to put an email together will know that one of the big sticking points is type. How do you control the look and feel of your fonts and type when every email client renders things so differently? Well, having been coding emails for a good few years now, I’d like to offer up the safest, and most reliable (in my opinion) way to handle the styling of fonts in emails.

First of all, I should say that I’m writing this to help you avoid having to resort to images instead of text. The more you can use text, the better, since if someone has images turned off (most do by default) then they’ll still be able to read text, whereas an image won’t display. Some email clients will fail to even display alt text (I’m looking at you Apple Mail, AOL Desktop, Hotmail, Gmail and Windows Mobile 7).

Let’s look at the process involved, and the associated code along the way.

So a designer has passed me this design, which he put together to form part of an email communication.

So, let’s take a second and see what’s involved (there’s always more than you think). We have 2 bits of text here. The first being larger, bold and grey, the second being smaller, normal weight and red. Also worth noting is letter spacing and line height. Because my hypothetical designer doesn’t exist and I put this together for the purpose of this article (can’t you tell?) I happen to know a few more details. The top part is #666666 in colour, size 40px it’s Helvetica Neue, Bold in weight, has a 100% line-height and letter spacing applied. The bottom is #990000 in colour, size 20px, the same font, but a regular weight with slightly less letter spacing and a 100% line-height.

So we have our facts – all of which you can either determine yourself, or get from your designer. Now we go about creating the email.

First things first, you’ll have likely started on a HTML document for the email – so let’s skip all the setup and jump straight to adding the text – I intend to cover all aspects of email build at some point or another, so I’m keen to keep this specific.

Your HTML code will probably end up looking something like this to begin with:

Alex clearly knows what he's talking about.
But I sure as hell don't like his tone.

Because we’re dealing with email rendering technology from the 90s (expecially with clients like Microsoft Outlook) we should code with that in mind too. First things first, let’s do the basics with the tag. The “face” part is where we add our font stack. In this case Helvetica Neue. The “color” part is pretty obvious and we also add the “size” element here too.

The size element is an interesting one. We can’t just put in pixel values in here, that just won’t work. The size is defined in numbers from 1 to 7. 3 being the default. This means it’s safe to assume that “3” will give us around 16px font-size, since 16px is the default size for fonts in a browser. You can do some rough guessing and trial and error on your fonts from here, or I’ve put together a table below to help you.

font size value	equivalent pixel size
1	9px – 11px
2	12px – 14px
3	15px – 17px
4	18px – 21px
5	22px – 29px
6	30px – 36px
7	37px +

So with that in mind, let’s go for font sizes 7 and 4 respectively. I’ve also added a “strong” tag for the top part since it’s more reliable than doing this part with CSS.

You will notice I have also added a line-break, since I tend to avoid using “p” tags in emails if possible. I find them unreliable in terms of spacing and margin.

<font face="'Helvetica Neue',Arial,Helvetica,sans-serif" color="#666666" size="7"><strong>Alex clearly knows what he's talking about.</strong></font><br />
<font face="'Helvetica Neue',Arial,Helvetica,sans-serif" color="#990000" size="4">But I sure as hell don't like his tone.</font>

OK, so in my development browser of choice (Firefox) this is what we have thus far.

Not altogether all that bad, to be honest – and we’ve yet to use any CSS or anything that might get stripped out by a poor email client.

Let’s start with some progressive enhancement. You’re likely to be familiar with the term, but for anyone who’s not, we’re talking about enhancing the look and feel without losing functionality for anybody – so someone using the lowest common denominator client doesn’t lose out on anything that would be detrimental to getting the desired infromation, but those with a solid email client can reap the rewards of a nicer looking email.

To an extent we’re already practicing progressive enhancement with our font-stack, since anyone without Helvetica Neue will see Arial instead, and anyone without that will see regular Helvetica and so on.

Now here’s my secret – span tags within the font tags. It’s as simple as that. This way, the email will render with the CSS defined in the style part of the span tag, but if the client strips out CSS styling, then there will always be the font tag fallbacks that we have already set. Yes – not ideal, but it’s better than nothing, right?

<font face="'Helvetica Neue',Arial,Helvetica,sans-serif" color="#666666" size="7">
	<span style="font-family:'Helvetica Neue',Arial,Helvetica,sans-serif; font-size:40px; color:#666666; line-height:100%; letter-spacing:-1px;">
		<strong>Alex clearly knows what he's talking about.</strong>
	</span>
</font><br />
<font face="'Helvetica Neue',Arial,Helvetica,sans-serif" color="#990000" size="4">
	<span style="font-family:'Helvetica Neue',Arial,Helvetica,sans-serif; font-size:20px; color:#990000; line-height:90%; letter-spacing:-0.5px;">
		But I sure as hell don't like his tone.
	</span>
</font>

A couple of things to note:

Letter spacing doesn’t carry the same value everywhere it would seem. In Fireworks, my text had a letter spacing of “-30” however, because the CSS goes on pixel values, -1px was the closest I could get. The CSS does allow decimal places, so if -1px is too little, and -2px is too much, you can always try smaller iterations -1.5px etc. Thus far, this area has been trial and error for me.

Line-height and letter spacing is specificed in the CSS, but there’s no backup for this available to declare in the font tag, if someone doesn’t see CSS, they’ll miss out on this visual change.

I specificed the font family, colour and size again in the CSS – this is probably something you don’t necissarily have to do, but I find for the sake of a few more bytes, it’s worth being as explicit as possible wherever possible, since you’d be amazed how badly clients can render things sometimes.

I also increased the bottom line’s line-height to 115% to account for the slightly larger gap between it and the top part – this is just a tweak to get it as close to the visual design as possible.

So this is what we have now:

Much closer.

Now, I tend to check this on all the browsers I can, first of all – and once I’m happy with that, I’ll upload it to my campaign sending application of choice (Campaign Monitor is my favourite) and run a test to see how it looks on all the email clients I can.

Generally, there’s little more we can do to ensure the text looks fine. A good rule for working with emails is to avoid CSS wherever possible, and then wherever you do intend to use it – use it sparingly and with “good enough” backup solutions.

There may be room for specifying inline style in tags, or some other sneaky workarounds, but this is the method I have used up to this point, and it’s been reliable for me. You may have other ideas or suggestions, so please let me know with a comment if you do – I’d be glad to try some new things.

This post was originally written for the QueryClick blog.