Design Tip of the Week: CSS Line-Height Property: Does it Work in Email?

Line-height is a text transformation property that designers often use when laying out a design. Line-height can be used to provide extra space between lines or to reduce the standard space between lines. In print, this technique is called "leading."

Line-height samples.

However, when it comes time to code this design in HTML, how is this CSS property supported for email rendering? The short answer: fairly widely. However, there are several caveats. Below are the results from testing line-height firsthand in Outlook 2007, IE 7 and 8, Chrome, Firefox, and Safari and via a Litmus test in Outlook 2000/XP/2003, Lotus Notes, Apple Mail, and Thunderbird.

Possible values for the CSS property "line-height":

<length> - absolute, in px (style="line-height: 10px;").
<number> - relative, multiplier on font size (with or without em) (style="line-height: 1.25;")
<percentage> - relative, percent of font size (style="line-height: 75%;")

Notes:

<number> and <percentage> are easier to use, but less consistent (change relative to font size).
<number> of less than 1 and <percentage> of less than 100% do not display well at all (overlap and disappear) in Outlook 2007.
Fractional pixels are not rendered and if used round "down" (1.0px = 1px, 1.1px = 1px, 1.5px = 1px, 1.9px = 1px, 2.0px = 2px, etc.).

Results for line-height in block-level tags (<p>, <td>, etc.):

Lotus Notes 6.5 and 7 ignore all line-heights whatsoever.
Outlook 2007 ignores line-heights less than approximately the same size as the font (in other words, a paragraph with font size of 14px won't display line-heights of less than 17px [16px is the same as no line-height specified, and all that are lower than 16px are just ignored]; font size of 10px doesn't display line-heights of less than 10px; etc.).
Outlook 2000, 2002/XP, 2003, Lotus Notes 8, IE 7 and 8, Chrome, Firefox, Safari, Apple Mail 4, and Thunderbird 2.0 all render accurately.

Results for line-height in line-level tags (<span>, etc.):

Hotmail in FF ignores line-height properties.
Outlook 2007 ignores all line-height properties.

So, what should you do with this information? Assuming that Hotmail and Outlook 2007 rendering is important for your particular audience, my suggestions would be:

Do not use line-height property in any line-level tags; apply only to block-level tags.
Use <length> (px) values rather than <number> or <percentage>.
Be aware that use of px values less than that of the font size in px will not render in Outlook 2007, so use sparingly and carefully.
Test, TEST, TEST!

In summary, my advice with the line-height css property is to use it only to expand line heights, rather than compress line heights. As long as pixel values are used, you should find success with this method the vast majority of the time. And finally, always test!

Michael Thom
ExactTarget Campaign Solutions Team

Comments for Design Tip of the Week: CSS Line-Height Property: Does it Work in Email?

Content Hub Search

Authors

Categories

Recent Posts