Email CSS cheatsheet

It can be very complicated to work with email styles due to the lack of a standardized HTML subset, and a lot of proprietary interpretations of styles and standards. While in recent years the consolidation of clients and platforms made this a bit easier, as well as a lot of email platforms that provide editors, it can still be useful to know how it works at a lower level.

I’ve created a cheatsheet in 2010, and I’ve been trying to keep it up-to-date since. The last update was on 22 April 2025.

The basic rules are:

Have all the styles inline (there has been more support for internal style declarations, but we want to play safe).
Have a graceful text-only fallback: think always how the text will appear if stripped of all CSS styles added in.

CSS properties

Safe CSS properties

Full support by: Outlook 2003-2013, Windows Mail, Apple Mail, Entourage 2004-2008, Thunderbird 2, Yahoo! Mail, Yahoo Classic, GMail, MobileMe, iOS, Android.
Note: items market with * are exceptions: supported by almost all clients but not the ones named (boundary “safe”).

background-color
border
color
clear — *Outlook 2007-16, Windows 10 Mail, GMail Android IMAP
display — *Partial for some Outlook versions, Windows 10 Mail
float — *Outlook 2007-16, Windows 10 Mail
font
font-family
font-style
font-variant
font-size
font-weight
letter-spacing
line-height
margin — *Hotmail
padding
table-layout
text-align
text-decoration
text-indent
text-transform
width
word-spacing — *Outlook 2007/2013

Enhance-only CSS properties

Styles unsupported by many clients but that could allow a look enhancement when used on the enabled clients without modifying the layout.

background-image
border-radius, -webkit-border-radius, -moz-border-radius (add all of them)
opacity
text-shadow

How to make CSS email signatures in Apple Mail App

Each client might or might not allow you to add email signatures styled with HTML and CSS. On Apple Mail you can, but you need to follow a few steps.

Create your signature in a single HTML file without <body> and <head>, just the HTML of the signature.
In Apple Mail: Mail → Preferences → Signatures and create a new one clicking on “+” (docs)
Close Apple Mail.
Open the folder: ~/Library/Mail/V10/Signatures (it’s under your account, the V10 might change with different Apple Mail versions).
Open the .mailsignature file you just created in a code editor (it should be easy to find by checking which one was just updated, sort by date).
- The file has a header with some declarations like “Content-Transfer-Encoding” and “Mime-Version” separated by the rest by a blank line. Keep that part, blank line included.
- Under that some encoded HTML text. Replace that with the HTML you prepared.
Save the updated .mailsignature file.
In Finder, select the .mailsignature file and open the info panel (File → Get Info).
Check the “Locked” option. This is to ensure that Apple Mail won’t change the HTML you just set even by accident (while for example browsing the signatures in the Settings).
Open Apple Mail, select, and test the signature.

The road to a good signature

There’s a strong opinion that emails should be “text only”. I disagree, but still I think that when you add some styling to your emails you should think very well before doing it and also you should consider what happens when it’s going to be displayed as text-only. To check this you can just send an email to yourself in Apple Mail and then open it using View -> Message -> RAW Source.
Consider also that I’m not talking about newsletters: for those you should use a tool like MailChimp.

Designing a good email signature is even harder, because it shouldn’t be intrusive but it should still convey in some ways the personality of the author or the company.
While it seems obvious, the important part of the email is the body, not the signature. Yet, you often see email with signatures going from 2x to 10x the length of the email content (and no, the legal disclaimer isn’t enforceable, drop it!).

Also, different signatures needs to convey different contents:

A business signature requires name, surname, company name, a link to the company website, maybe the role and the phone number. A great idea would be a link to the author’s profile on the company website, where you could add all the details that you need to without creating huge signatures (and it’s also more flexible).
A personal signature probably doesn’t have any requirement, but it’s nice if it contains at least the name and maybe some kind of characterisation of the person.

Some tips:

Keep the font size on par with the body, or smaller. Think three times before increasing the font size: it could become ugly really fast.
Images shouldn’t be embedded, use CSS but remember that not every client will see them.
The ideal number of lines should be around 2, with a good balance for business signatures around 5. More than that should be always avoided.
The signature should be noticeable, so I can find it immediately when I need it, and I can ignore it when I’m just reading the text, but not too much, since it’s not the important part of the email.
You can use characters in the signature to improve it without adding images, but remember that non-ASCII ones could be visualised in strange ways, so check them before use.

Intense Minimalism