The short answer
Email signatures break in Outlook because Outlook for Windows does not render HTML the way a browser does. It uses the Microsoft Word rendering engine, which ignores much of modern CSS, adds spacing you did not ask for, and handles images differently. A signature designed and tested in a browser will look different in Outlook, and the difference is not a bug you can fix by adjusting the design — it is a different renderer.
Key takeaways
- Outlook for Windows renders mail with the Word engine, not a browser engine. Design for it deliberately rather than discovering it afterwards.
- Use table-based layout, inline styles, PNG images and system fonts. Avoid flexbox, grid, background images, SVG and web fonts.
- A missing logo is almost always a hosting, blocking or sizing problem — not a design problem.
- Most “it broke” reports are one of eleven specific faults. The table below covers all of them.
Why Outlook renders email differently
Most email clients render HTML with a browser engine. Outlook for Windows does not. Since 2007 it has used the rendering engine from Microsoft Word, which was built to lay out documents rather than web pages. That single decision explains the majority of signature problems people report.
Practically, it means a set of things a web designer takes for granted are unavailable or unreliable:
| Technique | Outlook for Windows | Use instead |
|---|---|---|
| Flexbox and CSS grid | Not supported | Nested HTML tables |
| External and embedded stylesheets | Unreliable | Inline styles on every element |
| Web fonts | Not loaded; silently substituted | System font stack with a named fallback |
| SVG images | Not rendered | PNG at twice display size |
| CSS background images | Largely ignored | A real image element, or a solid colour |
| Rounded corners and shadows | Ignored | Design that does not depend on them |
| Margin on block elements | Inconsistent | Table cell padding |
| Percentage widths | Unpredictable | Fixed pixel widths |
| Letter spacing and precise line height | Unreliable | Defaults |
Build the signature as a table with inline styles, fixed pixel widths and PNG images, then test it in Outlook for Windows before anyone approves it. A signature signed off from a browser screenshot has been approved in a rendering nobody will actually see.
Eleven faults, and what actually causes each one
Almost every report of a broken signature is one of these. Find the symptom, and the cause is usually two columns to the right.
| Symptom | Usual cause | Fix |
|---|---|---|
| Logo shows as a red X or an empty box | Image blocked by default, hosted somewhere unreachable, or the link expired | Host the image on your own public domain over HTTPS, and always set alt text |
| Logo appears blurry | Image supplied at display size rather than twice it | Supply at 2× the display width and scale it down in the HTML |
| Logo appears huge in the recipient’s copy | Width set in CSS only; the Word engine reads the HTML width attribute | Set both the HTML width attribute and the inline style |
| Extra gaps between images or rows | Whitespace between table cells being rendered as space | Remove line breaks between tags; set display:block on images |
| Font is not the one you designed with | Web font not loaded, so the client substituted silently | Use a system font stack and design so the fallback still looks right |
| Layout collapses or scrolls sideways | Total width over about 600 pixels, or percentage widths | Fixed pixel widths, total under 600 |
| Logo disappears in dark mode | Transparent PNG drawn for a white background | A version with a light outline, or a two-tone logo that works on both |
| Signature is missing from replies | The client applies the reply signature, which is usually configured separately or left empty | Configure the reply variant too, or apply the signature on the server |
| Signature lands below the quoted thread | Client placement behaviour on replies | Accept a short reply variant, or apply server-side with placement control |
| Signature missing from Sent Items | Server-side application happens after the copy is saved | Expected behaviour with server-side stamping; explain it in the rollout note |
| Two signatures on one message | A client-side signature and a server rule both applying | Find and disable the legacy path — usually an old transport rule |
Why the logo is the most common failure
Images cause more signature complaints than everything else combined, for three separate reasons that get confused with each other.
1. The image is blocked, not missing
Many clients block remote images by default until the recipient chooses to display them. Nothing is broken; the recipient simply has not clicked. This is why alt text matters — it is what people see when the image does not load, and a signature whose company name only exists inside the logo becomes anonymous.
2. The image is hosted somewhere unreachable
Logos pasted from a local file get embedded as attachments, which produces the paperclip icon on every message and inflates message size. Logos linked from an internal server work perfectly in testing and fail for every external recipient. Host on a public HTTPS URL on your own domain, and do not use a link that can expire.
3. The image is the wrong size in the wrong place
Two different numbers are involved: the display width in the HTML and the actual pixel dimensions of the file. Supply the file at twice the display width so it stays sharp on high-resolution screens, and set the display width in both the HTML attribute and the inline style, because the Word engine reads the attribute.
Dark mode, and why your logo vanishes
Dark mode is now the default for a large share of readers, and it is where a signature that passed every other test quietly fails. Three specific problems:
- A transparent PNG logo drawn in dark ink disappears against a dark background. Supply a variant with a light outline, or a two-tone version that reads on both.
- Brand colours are shifted by some clients, which apply their own colour inversion. Check your accent colour rather than assuming it survives.
- Grey legal text can fall below readable contrast. This is the line with legal significance, so it is the worst one to lose.
The tempting fix — wrapping the whole signature in a white box — works, and looks exactly like a white box pasted into a dark email. Fix the assets instead.
The test matrix that catches everything
Before any signature is approved, send a real message to a real account and look at it in each of these. It takes twenty minutes and prevents the entire list above.
- Outlook for Windows, light mode and dark mode — the strictest renderer.
- Outlook for Mac.
- Outlook on the web.
- A real iPhone and a real Android phone, not a simulator.
- Gmail in a browser, and the Gmail app.
- One message with images blocked.
- One reply in an existing thread, not just a new message.
- One message forwarded twice, which is how most signatures are actually seen.
The fix that fixes all of them at once
Every problem above is technical, but the reason they keep recurring is not. They recur because each person maintains their own signature, so each person’s copy drifts, breaks and gets repaired individually — and the same fault is rediscovered by a different colleague every few weeks.
When the signature is defined once and applied centrally, the whole class of problem changes shape. It is tested once against the matrix above, corrected in one place, and every person gets the corrected version without doing anything. The faults do not disappear, but they stop being everybody’s problem and become one person’s, once.
Frequently asked questions
Why does my email signature look different in Outlook?
Because Outlook for Windows does not use a browser engine to render HTML email. Since 2007 it has used the Microsoft Word rendering engine, which was built for documents rather than web pages. It ignores flexbox, CSS grid, external stylesheets, SVG images and web fonts, handles margins inconsistently, and adds spacing you did not specify. A signature designed and approved from a browser screenshot will look different to the people who actually receive it.
Why is my logo not showing in my email signature?
Three common causes. The recipient's client is blocking remote images by default, in which case nothing is broken and your alt text is what they see. The image is hosted somewhere they cannot reach, such as an internal server or an expiring link. Or it was pasted from a local file and embedded as an attachment, which shows a paperclip on every message. Host logos on a public HTTPS URL on your own domain and always set alt text.
Why does my email signature logo look blurry?
Because the image file is the same size as its display size. Screens with high pixel density need roughly twice the pixels. Supply the logo at twice the intended display width — for example a 360-pixel-wide file displayed at 180 pixels — and set the display width in both the HTML width attribute and the inline style, because the Word engine used by Outlook reads the attribute.
Why does my email signature disappear on replies?
Most email clients treat the new-message signature and the reply signature as two separate settings, and the reply one is often left empty. This matters more than it sounds, because in most business correspondence the majority of messages are replies rather than first contacts. Either configure the reply variant as well, or apply the signature on the mail server, where replies and new messages are treated identically.
Why is my signature missing from Sent Items?
This is normal when the signature is applied server-side. The copy saved to your Sent Items folder is written before the message passes through the mail server that adds the signature, so your copy does not have it even though the recipient's does. It is worth explaining in any rollout announcement, because it generates a large share of the support tickets that follow one.
Why does my logo disappear in dark mode?
Because a transparent PNG drawn in dark ink for a white background has nothing to stand against on a dark one. Supply a logo variant with a light outline or a two-tone version that reads on both. Also check your accent colour, since some clients apply their own inversion, and check the grey legal text, which can fall below readable contrast — the worst line to lose, because it is the one with legal significance.
Why do two signatures appear on the same email?
Because two mechanisms are applying one each. Typically a signature configured in the client plus a rule on the mail server, or a new signature platform running alongside an old transport rule that nobody disabled. Find the legacy path and switch it off. It is the most common finding in any signature pilot and the easiest to miss, because it only appears on mail that leaves the organization.
How do I stop extra gaps appearing in my email signature?
Those gaps are usually whitespace between HTML tags being rendered as actual space by the Word engine, or default image spacing. Remove line breaks and spaces between table tags, set images to display as block elements, and use table cell padding rather than margins on block elements, since margins behave inconsistently in Outlook for Windows.
How should I test an email signature before rolling it out?
Send a real message to a real account and inspect it in Outlook for Windows in both light and dark mode, Outlook for Mac, Outlook on the web, a real iPhone, a real Android phone and Gmail. Then check one message with images blocked, one reply inside an existing thread, and one message that has been forwarded twice. Twenty minutes of this prevents almost every fault people report afterwards.