Why Your Email Breaks on Outlook (and How to Fix It)
An email that displays flawlessly in Gmail can be severely distorted when viewed in Outlook. We explain the reasons behind this and outline the necessary actions to take.
Outlook breaks emails because Outlook 2016/2019 (and 365 for Windows, until 2024) uses Microsoft Word as its rendering engine instead of a browser. Word does not support modern CSS, no flexbox, no background-images via CSS, and no webfonts. The solution: table-based layouts, inline CSS, mso-conditionals for Outlook-specific fallbacks, and bulletproof buttons. Since 2024, Outlook 365 for Windows does use a modern engine — but your largest business target audience is often still on Outlook 2016/2019.
Why Outlook is different from every other email client
Gmail, Apple Mail, iOS Mail, Outlook.com, and Yahoo Mail all use a browser engine (WebKit, Chrome, or similar) to render emails. Outlook desktop for Windows, however, uses Microsoft Word’s rendering engine — the same one found in Office Word. Word is designed for documents, not for modern HTML/CSS.
Result: ~30% of CSS properties don’t work or work differently. Background-images, flexbox, gradients, animations, webfonts, custom-spacing via margin — all limited or completely broken. For business mailing lists in the Netherlands, 20-40% are still on Outlook desktop, so you absolutely must take this into account.
The 5 most common Outlook problems
- 1. Broken layout due to margin/padding. Outlook often ignores margin on block elements. Solution: use table cells with cellpadding/cellspacing, or explicit table rows for spacing.
- 2. Buttons as blue striped links. Outlook ignores background-color on links without mso-fallback. Solution: bulletproof buttons with VML for Outlook + regular HTML for the rest.
- 3. Webfonts fall back to Times New Roman. Outlook does not support Google Fonts. Solution: choose a good system-font fallback (Arial, Helvetica, Segoe UI) and accept that Outlook readers will get different typography.
- 4. Background-images disappear. CSS background-image does not work in Outlook. Solution: VML-fallback with
<v:rect>for hero banners. - 5. Buttons or CTAs shift 100px to the right. Classic Outlook bug. Solution: set
mso-table-lspace: 0pt; mso-table-rspace: 0pt;on your tables.
What you can fix today
Three concrete actions you can take this week on an existing HubSpot template:
- Test in Email on Acid or Litmus. Both tools provide screenshots in 80+ clients including Outlook 2016, 2019, and 365. ~$99/month for Litmus, $74/month for Email on Acid. Finding one bug saves you a no-show campaign.
- Replace all
<button>tags with bulletproof button code. An online generator (buttons.cm) creates the code in 1 minute. Paste that into your CTA modules. - Add an Outlook mso-reset. At the top of your
<head>:<!--[if mso]><style>table, td {mso-table-lspace: 0pt; mso-table-rspace: 0pt;}</style><![endif]-->. Solves a lot of layout shift in one line.
Common mistakes
- Only testing in Gmail or Apple Mail. Both work almost perfectly with modern CSS — giving a false sense of security.
- Ignoring Outlook because “no one uses it anymore”. Untrue for B2B in the Netherlands. Office 365 desktop is still dominant in business environments.
- Forcibly imposing webfonts. Don’t do it — accept that Outlook will display a fallback font. Forcing often breaks more than it solves.
- Using background-images without VML-fallback. Your hero with “message-on-photo” will simply become white text on a white background in Outlook.
Frequently asked questions
Does Outlook 365 for Mac work the same as Windows?
No. Outlook for Mac uses WebKit-based rendering, similar to Apple Mail. Modern CSS largely works. The rendering problem primarily affects Outlook desktop for Windows (2016/2019) and Outlook 365 for Windows until July 2024.
Since when has Outlook 365 on Windows improved?
Since 2024, Microsoft has been rolling out a Chromium-based rendering engine for the new Outlook 365 for Windows. However, many business organizations still run Outlook 2019 or 2016 (perpetual licenses), where Word remains the engine.
How do I know which Outlook version my readers use?
Litmus and Email on Acid have analytics that show the client distribution of your send. Expect somewhere between 20-40% Outlook for B2B-Netherlands, depending on your target audience.
Can HubSpot automatically generate bulletproof buttons?
HubSpot’s drag-and-drop button module does this 80% well, but in my experience, complex variants (icon next to text, custom borders) fail in Outlook. For robust results: build your button as a custom HUBL module with VML-fallback included.
What if I use dark mode on Outlook?
Outlook has supported dark mode since 2020, but the implementation varies by version. Test explicitly — Outlook sometimes applies color inversion to your entire email, sometimes only to white backgrounds.
Is it worth building Outlook-specific versions?
Almost never. A well-built template that works “good enough” on all clients is always better than maintaining two versions. Aim for a single template with mso-fallbacks where necessary.
Ready to get started?
Read about our approach to having a HubSpot email template built, or request a quote. You’ll hear back within one working day, with a fixed price or a few focused questions.
