Why do email signatures break in Outlook?
Outlook for Windows displays HTML email through the Microsoft Word rendering engine, the same layout engine used for Word documents. Word ignores CSS float, flexbox, background images and web fonts, so a signature coded like a web page collapses. Signatures that hold together use nested HTML tables, inline CSS, fixed pixel widths and hosted images with absolute URLs.
Why does Outlook for Windows render email differently?
Since Outlook 2007, the Windows desktop app has laid out HTML mail with the Word engine. Word was built to compose printed pages, and it supports only a narrow subset of CSS. Anything that depends on modern browser layout is discarded before the message reaches the screen.
In practice these are ignored or unreliable: float and clear, flexbox and CSS grid, background-image on any element, and @font-face web fonts. A signature that depends on any of them will stack vertically, lose its alignment or fall back to Times New Roman.
What actually works in an Outlook signature?
Nested HTML tables do the layout work. Each block sits in its own table cell with an explicit pixel width, and spacing comes from cellpadding or dedicated spacer cells. Every style declaration goes inline on the element it affects, because Outlook strips much of what sits in a <style> block.
Fonts have to come from a web-safe stack. Arial, Georgia, Tahoma, Trebuchet MS and Verdana render on effectively every machine. A brand typeface can be named first in the stack for the clients that support it, with a web-safe fallback immediately after.
Why do the images disappear?
Outlook blocks external images by default until the recipient clicks the download prompt, so a logo delivered as an image shows a blank box or a red cross on first view. Images have to be hosted on a public HTTPS URL and referenced with an absolute path. Embedding a logo as a base64 data URI does not help, because Outlook for Windows does not render data URIs at all.
Set width and height as attributes on the <img> tag in pixels, and give every image meaningful alt text. The alt text is what the recipient reads for as long as images stay blocked, so a logo with alt text reading "image001.png" is a wasted first impression.
Why does the signature look enormous on some screens?
High DPI scaling. On a Windows machine running at 150% or 200% display scaling, Outlook scales images by the same factor, so a 200 pixel logo can render at 400 pixels and force the table apart. Setting width and height as attributes on the <img> tag keeps Outlook honest. Supplying the image at twice the intended display size and then declaring the smaller pixel dimensions keeps it sharp on high resolution screens.
What does dark mode do to a signature?
Outlook inverts light backgrounds and light text when the recipient has dark mode switched on, and the inversion is applied unevenly. A black logo on a white background can end up as a black logo on a dark grey panel, which makes it effectively invisible. A coloured logo usually survives inversion better than a monochrome one.
The practical defence is to avoid pure white and pure black in the signature palette and to supply a logo with a transparent background that reads on both light and dark. Test the result with dark mode enabled in Outlook for Windows, Outlook for Mac and the Outlook mobile apps before rolling anything out.
Do Outlook for Mac, the web app and mobile behave the same way?
No. Outlook for Mac and Outlook on the web use browser based rendering and handle CSS far better, which is why a signature can look perfect on a designer's Mac and fall apart on a colleague's Windows machine. The mobile apps use their own renderer again, and they will reflow a fixed width table on a narrow screen.
New Outlook for Windows moves to the same web based rendering as Outlook on the web, which loosens the Word engine constraints for users who have switched. Until an entire organisation has moved across, build for the Word engine, because a table based signature renders correctly in every client.
Why does pasting a signature from Word cause problems?
Pasting from Word carries MSO markup across with it: conditional comments, mso- style properties, VML for shapes and a large block of inherited paragraph and list styles. That markup survives into the signature file, and it is a common cause of extra line spacing, unexpected indents and fonts that revert when someone replies.
Build the signature as a clean HTML file and deploy it to the Outlook signature folder, or roll it out centrally with a signature management tool. At Ideaseed, the Outlook templates we build for enterprise clients are deployed as HTML so every user in the business renders the same signature.
Email signatures break in Outlook because the Windows desktop app lays out HTML with the Word engine, which supports only a fraction of standard CSS. Nested tables, inline styles, fixed pixel widths, hosted images with absolute URLs and a web-safe font stack will survive it. Everything else becomes a rendering problem that lands in a client's inbox.
If signatures render differently across your business, book a free template health check.
Need a branded template? We can turn it around overnight.
Australia's Microsoft Office template specialists with a South Africa team that delivers while you sleep.
RAVE REVIEWS
who we work with
.svg)
.svg)
.svg)
.svg)
