Line Height Not Working in Outlook — Why It Breaks and How to Fix
- Outlook renders HTML email with Microsoft Word's rendering engine — not a real browser
- Word ignores unitless and em line-height values, forces pixel calculations
- Fix: use mso-line-height-rule: exactly with explicit pixel line-height
Table of Contents
HTML email looks fine in Gmail, Apple Mail, and every webmail client. Then you test in Outlook and paragraphs are cramped, line-height is ignored, and your beautifully designed campaign looks like a text dump from 1998. The cause: Outlook uses Microsoft Word as its HTML rendering engine, and Word treats CSS differently from any real browser. Here is why line-height breaks and the exact fix.
Why Outlook breaks line-height specifically
Outlook (desktop versions on Windows) renders HTML emails using Word's HTML engine. Word has its own rules for line-height that mostly ignore modern CSS:
- Unitless values (
line-height: 1.5) are often ignored - em values (
line-height: 1.5em) sometimes work, sometimes not - Percentage values (
line-height: 150%) work inconsistently - Pixel values with
line-height: 24pxwork but need Word-specific overrides to take effect reliably
New Outlook for Windows (rolling out 2024-2025) uses the WebView2 rendering engine, which is Chromium-based and handles line-height like modern browsers. But classic Outlook on Windows still dominates enterprise installs and keeps the Word rendering issue alive.
The fix — mso-line-height-rule
The fix uses an MSO (Microsoft Office) conditional CSS property that Word actually respects:
p, td {
mso-line-height-rule: exactly;
line-height: 24px; /* or whatever pixel value you want */
}
mso-line-height-rule: exactly tells Word to use the exact pixel value you specified instead of auto-calculating based on font size. Combined with an explicit pixel line-height, this forces the spacing you want.
Full email-safe line-height template
<!--[if mso]>
<style>
p, td, div, span, a {
mso-line-height-rule: exactly;
line-height: 24px;
}
h1 { mso-line-height-rule: exactly; line-height: 36px; }
h2 { mso-line-height-rule: exactly; line-height: 32px; }
</style>
<![endif]-->
Wrap the MSO-specific CSS in a conditional comment so real browsers ignore it. The [if mso] is detected only by Word's HTML engine.
For real browsers (Gmail, Apple Mail, etc.), set your standard line-height in the main <style> block:
p {
line-height: 1.5; /* real browsers */
}
Testing your fix in Outlook
- Install classic Outlook on Windows (or use Litmus/Email on Acid).
- Send the email to yourself.
- Check line spacing in Outlook. If still broken, line-height value is likely wrong — Outlook needs explicit pixel, not unitless or em.
- If paragraphs are tight, increase the pixel value. 24px for 16px font, 28px for 18px font, etc.
Email testing tools: Litmus ($99/mo), Email on Acid ($79/mo), or the free Mailtrap sandbox for basic checks.
WCAG compliance for email — does 1.4.12 apply?
Technically yes — WCAG applies to all web content including HTML email. In practice, email compliance is enforced loosely because clients render so inconsistently.
Target: 1.5x minimum line-height using pixel values in Outlook conditional CSS. Set line-height: 24px for 16px body, which equals 1.5x. This meets the WCAG threshold when Outlook actually renders it.
For letter-spacing and word-spacing, Outlook ignores both unconditionally. No conditional CSS unlocks them. Email has reduced compliance coverage vs. web, and it is an industry-acknowledged limitation.
Test Line-Height Values Before Sending
Paste your email CSS. Verify pixel line-height values hit the 1.5x threshold.
Open Free Spacing CheckerFrequently Asked Questions
Does New Outlook still have the line-height issue?
No. New Outlook for Windows uses WebView2 (Chromium) and handles modern CSS including line-height. Classic Outlook on Windows still has the Word rendering issue.
What about Outlook on Mac?
Outlook for Mac uses WebKit (Safari's engine) and handles line-height correctly. The Word rendering issue is Windows-only.
Does this affect Outlook on the web (OWA)?
No. Outlook on the web is a real browser application and renders CSS normally. Line-height works as expected there.
Can I just use
for paragraph spacing in email?
You can, but it's fragile — spacing varies by client and hurts accessibility (screen readers read double breaks as noise). Use proper paragraph spacing with MSO overrides for consistent results.
