4 Outlook Email HTML Font Styling Tips and 1 Hack

Saturday, June 24, 2017

There are too many limitations when it comes to email design and style - but using fonts is a great way to convey a feeling/mood or make a "bold statement"... yes, yes, pun was intended.

Outlook may be the trickiest of all email services and it has a nasty default behavior of falling back to Times New Roman ignoring whatever you have declared. Here are some tips on how to break Outlook's will and make it your bottom-b!tch.

1. Adding !important is, well, important

Born in the mid 90's !important was introduced to easily take precedence over "normal" declarations when making changes to stylesheets, or simply put... it adds more weight than a given attribute naturally has. In Web development this should be avoided if possible but email development doesn't give a &#%@ about rules governed by reason. Some email services have slapped default stylings for certain HTML elements, Outlook being one of them, so it is often necessary to "override" these with !important.

But beware - this is for use inside CSS blocks in head. Outlook, with a few exceptions, will often ignore inline declarations that end with !important AND will also ignore all declarations (even inside CSS blocks) that do not leave a space before !important.

2. Declared inline in the HTML

It is best practice across the board to declare some style attributes like color, font-family, font-size, font-weight, and line-height directly inline to the td itself. Unfortunately this is a hit and miss with Outlook so it cannot be the only tactic you use. Yet, it is an absolute MUST with several other email services including Gmail. Inline CSS will take precedence over default styles the email service may have ensuring proper rendering even with the most hostile email apps. Also, since you are not adding this to parent elements (e.g. table) you prevent inheritance issues.

3. Declared in CSS blocks / Style tags

Now this is where things start to get creative. Outlook does support webfonts, yay! First just import the webfont in head, embed it in a CSS block, and then simply place the embedded font inline at the end of your font-stack!

4. Adding span tags

Span utility is quite limited but still very handy. It cannot be used in any way for display or height/width, but instead it is great for font styling and content manipulation. You can target "span" only elements in a CSS block, which is useful given there are fewer elements in email development than web development. And did you know you can wrap your image links in span tags and style the ALT text!?

Hack it!

There is not one single solution that will solve all your Outlook typography headaches, however, the most reliable and fool-proof approach I have found is a combination of the above AND adding a MSO conditional after the body tag, assigning it to all HTML elements, and adding global styles there:

img credit: pure360.com

You Might Also Like