Home Resources Blog

I had this question put to me the other week and realized that I really had no idea how using em for font sizes fared across the popular email clients. The ‘Little Miss Best Practice’ inside me thought – “Well! We should be using em – it’s scalable!”. But then again, after years of coding emails, I felt there must have been a reason why I had been encouraged to use inflexible px since Day 1.

The sad fact is, coding for HTML email is not the same as coding for the web. We’re forced to cram a lot into a 600px fixed-width layout, we use tables and when font sizes scale up or down, layouts break.

em vs px in the popular email clients

Test table

So, I created a simple test with a 1em/16px baseline (the default in Firefox, IE, Opera and Safari desktop browsers). In these browsers, the em/px equivalents (see table) should appear to be the same size.

However, that consistency goes out the window as soon as you pop this table into an HTML email. The skinny: Different email clients use different baselines, which makes pixel-perfect work near-impossible when using em.

For example, lets start with the webmail set: stylesheets within Gmail, Hotmail and MobileMe make a point of scaling down em sizes from the 16px baseline, regardless of how true our test is in the same browser. However, if this inconsistency isn’t obvious enough, there’s always the desktop and mobile clients to affirm that there isn’t something quite right about using em in email.

First up, the good news for em – Lotus Notes and Outlook use the 1em/16px baseline. However, WebKit email clients (Apple Mail, iPad, iPhone) do like their webmail counterparts and scale down from this browser default – this is because their baselines are 1em = 12px (Apple Mail) and 13px (iOS).

All the while, font sizes defined using px display consistently across all popular email clients, as long as font-substitution hasn’t been used. 16px in Gmail = 16px in Outlook = 16px on the iPad. You get the point. Unless you’re using a fluid layout for your HTML email (which we don’t recommend), you’re better off using fixed font sizes.

But hey there, how about readability?

iPhone test

I thought you’d ask as much. The answer is that as there’s no minimum legible size in most email clients, it’s up to us as designers to select a font and minimum size that not only works in our layouts, but is readable under most conditions. My recommendation is to use a minimum font size not less than 12px, keeping in mind that serif fonts often lose their readability at this small end of the scale. When designing for mobile devices, one-column layouts of 480px in width or less benefit from improved usability, or alternately you can use @media queries (as we do with our newsletter).

The iPhone and iPad however, take a different approach to maintaining readability by setting a minimum default font size of 13px (the 1em equivalent on these devices). This means that any font sizes smaller than this will be scaled up. This can cause all sorts of breakage in fixed email layouts and can be overridden, however do this with caution.

Overall, the issues raised above go to show how important it is to link to the web version of your campaign. If all hell breaks loose in the email client, at least email recipients can fall back on some degree of consistency in the browser.

So, after much hullabaloo it looks like my mentor was correct – using px is the way to go when coding for HTML email. This may be offensive to the standardistas amongst us, but then again, we’re still using table layouts, eh?

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

See why 250,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free