HTML Email Signatures: getting your font style and colors to look the way you want

Kate Cooper
5 min readNov 1, 2020
My HTML email signature in Apple iOS Mail inbox

It’s important for your brand that you have a consistent signature across all email clients and devices — it looks professional and helps to solidify your brand. One way of ensuring this is to use an image file, styled exactly how you want, but then you can’t make the most of linking your telephone number, email and website URL (and any social media links you want) and often it doesn’t appear in the inbox of folks who have high security settings. So an HTML email is a great solution.

I tinkered with my own HTML email signature to get my font style and colors appearing correctly and focused on the following email clients: OSX Mail, iOS Mail, Gmail, Spark and Outlook.

After an odyssey of testing, I have 3 code files that can be installed on OSX Mail, iOS Mail (which also works in Gmail), and Outlook — maintaining the look I wanted… mostly… I’m looking at you Outlook and Windows 10 Mail!

Apple OSX prefers its code wrapped in a <body> tag, iOS only needs a <table>, and Outlook likes the full monty with everything wrapped in an <html> tag, hence the 3 versions. I also tested them successfully in OSX Big Sur (Beta) so hopefully they will work with the final release.

Versions tested:

Apple OSX Catalina 10.15.7 Mail v13.4
Apple OSX Big Sur 11.0 (Beta) Mail v14.0
Apple iOS 14.1 Mail
Apple iOS Spark
Gmail
Outlook v2009 | Windows 10

The first challenge was getting the fonts to appear correctly. I use an Adobe font for my brand so I needed to have a stylesheet link to Adobe Typekit in the source code, and this only worked on OSX Mail. So I needed to find alternative fonts for the iOS source code using Apple system fonts, Microsoft system fonts for Outlook, and Google fonts for Gmail, to keep those guys happy. I then updated the font-family to include each of these fonts in each code file.

Here are the links for the system fonts and Google fonts:

Apple System Fonts: https://developer.apple.com/fonts/system-fonts/#preinstalled
Microsoft System Fonts: https://docs.microsoft.com/en-us/typography/font-list/
Google Fonts: https://fonts.google.com

The next step was ensuring my colors were not changed — I did this with a combination of styles, inline styles and mso conditional comments.

The biggest challenge was to keep the hyperlinks from being underlined. I managed to get this to work on my OSX code and iOS code but Outlook (and also Windows 10 Mail) spoils the fun and insists on underlining all hyperlinks — on the plus, they kept my colours.

Here are some screengrabs of how my email signature appears in the inbox on all clients (Sent from OSX mail using html_signature_osx.html):

Apple OSX Mail inbox
Apple iOS Mail inbox
Gmail inbox on Chrome
Outlook inbox on Windows 10 (it’s a bit fuzzy as I don’t have a retina PC)

Here’s the code for each version with instructions on how to install on each email client:

Apple OSX Mail

Matt Coneybeare’s excellent article ‘How to Make an HTML Signature in Apple Mail for macOS Catalina 10.15’ got me started with the code and also explains clearly how to install the signature.

Apple iOS Mail on iPhone/iPad

Installation:

  • Open the code file in a browser > select all > copy
  • On your iPhone/iPad go to settings > Mail > Signatures > paste into the box (if the styles don’t look correct, shake to undo — you should get a pop up to remove the styling)

N.B. This is much easier to do if you have ‘Hand Off’ activated as you can copy and paste from your computer

Outlook (on Windows)

Installation:

  • In Outlook, go to signatures
  • Create new signature and save
  • File Explorer > C:Drive\Users\USRNAME\AppData\Roaming\Microsoft\Signatures
  • Open the signature file you created using a text or code editor
  • Paste in the raw code below, not from a browser

N.B. This might also work with Outlook on OSX but I couldn’t test it.

In Conclusion

It was a time-consuming but also a very satisfying project and kept me busy through the dark days of lockdown. It also gave me a reason to post my first story on Medium 😁.

I started with Matt Coneybeare’s code (‘How to Make an HTML Signature in Apple Mail for macOS Catalina 10.15’) with the Apple OSX code and adapted it from there for the iOS and Outlook versions. I looked under the hood of the signature files in Outlook and even with one word of text there is an enormous amount of code wrapped around it. So added Outlook’s classes to the <p> and <span> tags to override some of its baked in styles. I also discovered that Gmail prefers <span> to <p> otherwise Outlook creates large margins. The weirdest discovery (which was quite by chance) is that if you paste into a Gmail signature box using Chrome, all hyperlinks get underlined but Firefox is more polite and doesn’t back-seat drive.

Apologies to the Android users, I will be testing this soon and I am not giving up on Outlook’s underline issue and will continue to update the source files on GitHub: https://github.com/katecooperuk/HTML-Email-Signatures

Here are some useful links I discovered on the way:

http://minifycode.com (I minified my code before installing on Apple OSX)

https://www.campaignmonitor.com/css/

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)?redirectedfrom=MSDN

Thank you for reading and I hope the code is helpful, but do get in touch if you need any help with your own HTML email signature 😊.

--

--

Kate Cooper

I'm a website and graphic designer based in London. I love learning new skills to help me with my work and when I'm not working I love to travel.