Using rem and em units in email
There are a number of different units that can be used to set sizes in CSS these can be grouped into absolute and relative.
Absolute units don’t ever change and are good for consistency but lack flexibility. These include
in(inches) and more.
Relative units are more flexible as they are based of something else. These include
lh(current line height) and more but the ones we’re interested in for accessibility are
What are EM units and REM units
em units are equal to the current font size, the name comes from the width of an uppercase M. So if you have a
font-size:16px set then
1em would be equal to
16px. If you were then to change that to
font-size: 20px for a heading,
1em would be equal to
rem units are similar to
em however these values are relative to the
:root font size rather than the current font size so the value doesn’t change.. The name comes from Root EM.
Why you should be using EM and REM units
This root font size can be changed by the user, this is done in the email clients, browser or operating system preferences. So if someone finds small text hard to read they can make it larger in the user settings and it will apply across the whole email.
This only works if we respect their settings and base our
font-size on the
rem set by the user.
What is the default value of 1rem
In the majority of web browsers the default value is
16px as this is a good readable font size for most people.
However, the default size in clients tends to vary a bit more. Looking at popular email clients it ranges between 12px and 17px
Default font size for email clients
|Email Client||Default font size|
|Outlook webmail and PWA||15px|
|Gmail webmail & Android||13px|
|GMX and web.de||12px|
It’s worth noting that some of these defaults do change with the user settings already.
Resetting the font-size
rem units don’t yet have full support in email clients so for now I’m recommending using
em units inside the email. But also setting a default font-size on the parent wrapping element to improve consistency and accessibility.
Ideally we want to return the font size to
1rem however some email clients don’t support
rem and in some the default
rem value can be very small (12px in Applemail) so we will set a minimum and some fallbacks.
I’m going to look at these values in reverse order as that’s what the priority order is;
Where it’s supported this will reset the font size to user preference
1rem with a minimum size of
16px to adjust for small default root sizes.
The wording is confusing as we’re using
max to set a minimum
font-size but the idea is it’s picking the larger of the values set here.
N.B This will prevent the user from being able to set a smaller preferred font size. So it’s not an ideal solution, you may want to leave this part off.
If the email client doesn’t support
max but does support
rem we can use that as a fallback so we still have the user preference, but this time with no minimum value.
If the email client doesn’t support
rem, then we finally set
16px as our fallback. Most browsers default to
1rem being equal to
16px so this should look consistent for most users.
Converting your code to use
Mostly the standard size for
16px so using that as a base will keep your sizing looking the same for most users. So to calculate em from px, divide your
px value by 16 and that will give you your
So if your font is
20px divided by 16 gives you
If you font is
18px divided by 16 give you
If your font is
10px it’s too small. Don’t use 10px fonts.
Ideally your minimum font size would be
1em but at a push I’ll sometimes go down to
.8em if you asks really nicely and I don’t have time to talk you round.
What styles should use
So far we’ve been talking about
font-size but you can use
em anywhere you can use
px. The most important ones to consider are things that affect spacing around the text.
line-height is probably the most important as that should be relative to the
font-size for that you can use
% works exactly the same) or unitless values are similar except they also inherit as relative, where
% inherit as fixed value..
padding around text should also be set as
em as that can affect the readability. Elsewhere it’s not so important.
width on text using
em can help accessibility too. For example
<p style="max-width:30em"> would stop small fonts creating very long paragraphs, which are harder to read.
em in media queries. If your breakpoints are defined by how the content breaks, then consider how
font-size may affect that. Although if you are targeting devices then
px would work better.
There’s certainly a good argument for moving everything to
em if a user has selected a larger font then they may well want larger images, and larger layout too and it makes the design more consistent. However there may be a reason they have chosen to change the font rather than adjusting the screen resolution or using a zoom tool.
As I mentioned the value of
1em can change through the email. This can be seen as both a pro and a con of using
In this example if the user root font is set to 16px then the paragraph has a margin of
16px 0 but the heading is
32px 0 even though it’s the same code. It’s likely you’d want more spacing around a heading but it can take a while to adjust to it.
Another good example if we have an email with a highlighted section where we want to increase the font-size. We can use the same module we have for other sections but just wrap it with
font-size:1.5em and it will increase all the sizes of that section with just a tiny bit of code. The same could be done on a footer where we might want a small font, we can just use
font-size: 0.8em and it will reduce the sizes of that section.
em units don’t work inside attributes, the unit is effectively removed from the code and rendered as if no unit were used, which in defaults to
width="10em" with render as
10em. But this is a minor issue as we can set styles in the
style attribute which does support
VML has the same issue as attributes, even if you set a size in a
style attribute it will still render as
style="width:10em" with render as