SignatureFox
Why Does My Email Signature Look Different in Outlook?
Your email signature looks different in Outlook because Outlook uses the Microsoft Word rendering engine to display HTML email, not a standards-compliant browser engine. The Word renderer does not support many modern CSS properties — including flexbox, CSS grid, border-radius, CSS variables, and several padding/margin behaviors — that work correctly in Gmail, Apple Mail, and other modern email clients. As a result, layouts that look polished in Gmail can appear broken, misaligned, or incorrectly sized in Outlook. The fix is to build email signatures using only table-based HTML with fully inline styles, which is the layout method the Word rendering engine reliably handles. Any signature built with modern CSS will break in Outlook.
What Specifically Breaks in Outlook and Why
Outlook's rendering quirks are well-documented and predictable once you understand the root cause: Outlook 2007 through 2019 (and partially Outlook 2021) use Microsoft Word's HTML renderer, not a browser-based engine like WebKit or Blink. Word was designed to render documents, not web standards, and its HTML support is frozen at an early version of the CSS specification.
Specific properties that break in Outlook's Word renderer:
**CSS padding and margin on images**: Outlook ignores margin and padding applied to img tags in certain contexts. If your signature uses CSS margins to space your logo from your name, that spacing may collapse to zero. The fix is to wrap images in table cells and use cellpadding or empty spacer cells for control.
**Border-radius on images and containers**: Circular headshots created with border-radius: 50% will render as squares in Outlook. Outlook simply ignores border-radius. To achieve rounded elements, you need to use VML (Vector Markup Language), which is Outlook-specific markup that creates shapes. Most signature generators that support rounded images include VML conditionals for Outlook.
**Background colors on cells**: Outlook 2007 and 2010 have issues with background-color applied via CSS on td elements. Some values work; others do not. Using the bgcolor HTML attribute directly on td elements — an approach that is deprecated in browser web development but required for Outlook — is more reliable.
**Line-height behavior**: Outlook's Word renderer adds extra line-height that makes text blocks taller than expected. Text that appears at the correct line spacing in Gmail will have extra whitespace above and below in Outlook. Controlling this requires using mso-line-height-rule: exactly in CSS, which is an Outlook-specific vendor property.
**Width handling**: Outlook's renderer ignores max-width on table elements and sometimes treats width values inconsistently. Fixed pixel widths (width='600') using HTML attributes are more reliable than CSS width properties.
Outlook 2016, 2019, and some versions of Outlook on Microsoft 365 have improved slightly, but they still use the same underlying Word engine and exhibit most of the same quirks. Outlook for Mac uses a different renderer (WebKit) and behaves much more like Safari — fonts, padding, and border-radius render as expected. This explains why a signature looks correct when a Mac user previews it in Outlook for Mac but breaks when a Windows Outlook user receives it.
How to Build an Outlook-Compatible Email Signature
The only reliable approach for cross-client signatures, including Outlook, is table-based HTML with all styles inline. This means:
Use <table>, <tr>, and <td> for all layout — not div, section, or other HTML5 elements. Divs with display: flex or display: grid are completely unsupported in Outlook's Word renderer. Every layout decision must be expressed through table structure.
Apply all CSS inline on individual elements: style='font-family: Arial; font-size: 13px; color: #222222'. External stylesheets are stripped. Internal <style> tags in the <head> are partially supported in Outlook but unreliable. Inline styles on every element are the only guaranteed approach.
Use HTML attributes for width and height, not CSS properties: <table width='600'> not <table style='width: 600px'>. For images, specify both width and height attributes: <img src='...' width='80' height='80'>. Without explicit dimensions, Outlook resizes images unpredictably.
For rounded headshots, include Outlook-specific VML markup wrapped in conditional comments: <!--[if mso]> ... <![endif]-->. These conditionals are ignored by all other email clients and only processed by Outlook.
SignatureFox handles all of this automatically. The HTML generator produces table-based layouts with fully inline styles, explicit dimensions on all images, and Outlook-specific VML where needed. You should not have to hand-code email signatures to work in Outlook — that is what a signature generator is for.
Frequently Asked Questions
Free Preview
Build Your Signature
Live preview instantly · Pay $9.99 only when you download · No account needed
Open GeneratorGet a signature that renders correctly in Outlook and every other client — SignatureFox builds cross-client HTML by default.
One-time $9.99. No subscription. Delivered to your inbox instantly.
Create My Signature — $9.99🔒 Secure checkout via Stripe · Instant delivery