Outlook 2007 and CSS line-height property

When using the CSS line-height property in Outlook 2007, Outlook won't take a line height of 16px or below. The spacing of the lines look the same. If we use a larger line height, they are rendered in Outlook 2007. Of course this affects the way the email is rendered in other browsers and affects our designs as well.

Has anyone else had problems with this issue?

Thanks in advance for any insight into this problem.

travisbell travisbell, 9 years ago

Hey there,

Yup you are not wrong about this. I just did a quick test myself and didn't start noticing any line height differences until the 16-18px mark. See screen:


Looks like it's just yet another thing that simply isn't supported *properly* in Outlook 07.

I am actually going to be compiling a blog post about all of the quirks we've noticed in different clients. Keep an eye out for it.

Travis Bell
transformer, 7 years ago

Hmmm, this explains a lot, like my client saying "there is too much space between the lines of text"!

Yet, The Email Standards Project and Campaign Monitor claim Outlook 2007 passes the Acid Test and fully supports line-height, see links below:

I notice the Acid Test on the ESP site tested a minimum font setting at 12px/1.5em which I believe is above the established 16px line-height threshold. I'd like to see a smaller line-height used in the Acid Test.

I can't believe more people haven't struggled with this? Has anyone found a solution?

machadodesign machadodesign, 7 years ago

Has anyone figured out how to get line-height in Outlook that is consistent with other email clients? On 11px text, Outlook has a line-height that is close to 1.5 times wider than all other clients. If I try to adjust the line-height property everything else is too tight. God I hate Microsoft!!!

dplmartin, 7 years ago

Since most of my B2B email is read using Outlook, I tend to specify line height in points. So either 12pt or 14pt but I believe that this equates to 16 pixels and 18 pixels anyway. I find that a 12px Trebuchet doesn't want line spacing any less than 16 pixels, otherwise it would be too cramped.

More of a problem for me is Outlook 2007's interpretation of the "line-height:xxpt;" style command. I've noticed that Outlook's interpretation is to say that the line height is "at least" the amount you specify. That means if Outlook decides that the line height should be higher, it will increase it. Not great, when you're relying on text in a cell to only use a set amount of space.

The solution that I've found is to include the following as part of your style comments before the line height.

It's a microsoft style comment and so should be ignored by other email clients but will ensure that Outlook renders the line height that you wanted.

Mathew Mathew, 7 years ago

That's a good tip, thanks for posting it!

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
bopjo1 bopjo1, 6 years ago

Use this technique with caution! After using it for the past month we've run into a problem - mso-line-height-rule:exactly; can cause images to appear only partially downloaded in Outlook.

I usually place my CSS in <td> tags. For example, I'll write:

<td style="font-weight: bold; mso-line-height-rule:exactly; line-height:17px;">Content</td>

I don't know for sure, but I believe placing mso-line-height-rule:exactly; in a <td> tag for a table cell that has an image in it may cause misalignment of the image and make it appear partially downloaded.

It may be that mso-line-height-rule:exactly; is only suitable for use in <p> tags that contain only text.

See why 200,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