Style line height for HTML emails in Outlook Web App

Question

I have been working on a HTML email and have tried everything to get the line-height to display properly in Microsoft Outlook Web App. I've tried !important on my inline styles, using .ExternalClass * {line-height: 100%} in the document head, wrapping text in a span with an inline line-height style, having line-height on the parent td and also a span.

If anyone can help it be much appreciated!

Below is an example of an area of my current text in a td.

<td pardot-region="articleContent1a" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: sans-serif; font-size: 14px; line-height: 25px; text-align: left; color: #7f7f7f;" valign="top">
  Yesterday, Krissy posted about six things you should consider when performing a high-level user experience (UX) audit of a website. While UX is a crucial component of measuring a website’s success, it’s only part of the equation.</td>

I've also tried adding to the td mso-line-height-rule: exactly.

Answer 1

I know it's a past issue, but I don't see an accepted answer. Do you have a jsfiddle link to see your code?

You did say you set the embedded CSS override to 100%; try setting it to 112%:

.ExternalClass * { line-height:112%; }

Outlook Webmail won't have the exact line-heights you want, but it does override the one that Webmail adds in.

Other possibilities:

• Line heights should be specified in the table cell <td> and not any inline tags (like <span>).

• The order you use mso-line-height-rule:exactly is important - the line height should be declared immediately after mso-line-height-rule:

  <td style="font-size:1em;mso-line-height-rule:exactly;line-height:1.3em;">

• Last option, put each line of text in its own table row/table cell, and control line-height by using padding in each row via the table cell.

Good luck.