Why Your Email Signature Looks Broken in Outlook

Outlook for Windows uses Microsoft Word to render HTML — here is why that breaks modern email signatures, and exactly how to fix each symptom.

You designed a signature in a slick web tool, copied the HTML, pasted it into Outlook — and what you got back looks like a 2003 GeoCities page. Misaligned columns, missing images, mysterious gaps, the font reverting to Times New Roman. You are not imagining it, and the tool you used is probably not at fault. The problem is Outlook itself, and the fix is to understand what Outlook is actually doing under the hood.

Outlook for Windows renders email with Microsoft Word

This is the single most important fact about Outlook compatibility, and almost nobody mentions it on the marketing pages of signature generators. Outlook for Windows (every version from 2007 through 2021, plus the perpetual-licence Outlook in Microsoft 365) does not use a real web browser engine to render HTML email. It uses the same rendering engine Microsoft Word uses for documents.

That means flexbox, CSS Grid, background-image, modern web fonts, padding on inline elements, margin on table cells, position: absolute, and most CSS3 properties simply do not exist as far as Outlook is concerned. They are silently dropped. The browser-based signature editor you used renders your design beautifully in Chrome because Chrome supports those properties. Word does not, so Outlook does not.

This is why "it looks fine in the preview" is a meaningless statement for email signatures. The preview is almost certainly a browser. The real test is pasting into Outlook for Windows and looking at the result there.

The five symptoms you are probably seeing

Different CSS properties fail in different visible ways, and once you know the symptom you can usually diagnose the cause without reading any HTML.

The first is collapsed or stretched logos. If your logo is suddenly the size of a postage stamp or filling the entire email, the cause is almost always missing width and height attributes on the <img> tag. Outlook ignores CSS sizing and falls back to either the file's natural dimensions or, worse, zero. Always set width and height as HTML attributes, not just CSS.

The second is mysterious vertical gaps between rows. Outlook inserts roughly 19 pixels of extra space between consecutive table rows unless you explicitly set line-height: 0 and font-size: 0 on the empty cells. This is a Word quirk going back two decades.

The third is the wrong font. If your signature is in a system font like Arial or Helvetica but renders as Times New Roman or Cambria, the cause is a missing fallback. Outlook does not download web fonts. Specify a font-family that includes a web-safe fallback (Arial, Helvetica, sans-serif) and Outlook will use the first one it actually has installed.

The fourth is broken column layouts. If you used CSS flexbox or grid, those are gone — Outlook only understands nested tables for layout. Every two-column signature must literally be a <table> with two <td> cells.

The fifth is images that simply do not appear. This is usually a security feature: Outlook blocks external images by default until the recipient clicks "Download Pictures". There is no fix from the sender side beyond making sure the images are hosted on a stable HTTPS URL.

What "table-based HTML" actually means and why it matters

Every reputable email signature tool will tell you it exports "table-based HTML for maximum compatibility." Here is what that phrase actually translates to in practice.

Instead of using <div> and CSS to position elements, the signature uses nested <table>, <tr>, and <td> elements with inline styles to control layout. A two-column signature with a logo on the left and contact information on the right is literally a one-row, two-cell table. A signature with a banner under the contact info is a two-row table.

Inline styles mean every style attribute lives on the element itself, not in a separate <style> block or external stylesheet. Outlook, Gmail, and Apple Mail all strip out <style> tags or sandbox them in unpredictable ways. The only reliable way to make a colour or font apply is to write style="color: #1a1a1a; font-family: Arial, sans-serif" directly on the element that needs it.

This HTML looks like it was written in 2001 because it essentially was. The good news is that 2001 HTML is the only HTML that renders consistently across the eight or so email clients that actually matter, which is why SignatureCraft generates it.

The "new Outlook" complication

Microsoft is in the middle of a long, confusing transition from the classic Word-engine Outlook to a new Outlook for Windows that uses the same rendering engine as Outlook on the web (a real Chromium-based browser). The new Outlook is being rolled out gradually and most enterprise users will be on the classic version for years.

In practice this means a signature that looks broken in classic Outlook may look perfect in new Outlook, and vice versa. Until adoption stabilises, the safe play is to design for the classic Word engine — table-based HTML, inline styles, web-safe fonts — because anything that works there will also work in new Outlook, but not the other way around.

Fixing it without rewriting the HTML by hand

You do not need to learn 2001 HTML to ship a working signature. The steps below show how to fix the most common Outlook symptoms inside SignatureCraft's editor without touching any code.

If you are debugging an existing broken signature pasted in from elsewhere, the fastest path is usually to recreate it in SignatureCraft rather than try to repair the HTML. Modern editors output much cleaner markup than legacy generators, and the time spent rebuilding is almost always less than the time spent hunting through nested tables.

Step by step

Pick a known-good template — Start in the SignatureCraft editor with one of the templates marked "Outlook tested" — these are validated against the classic Word-engine renderer.
Keep images at fixed pixel widths — Use the Logo and Banner panels to set explicit pixel dimensions, not percentages. Outlook ignores percentage widths inside table cells.
Stick to web-safe fonts for body text — In the Styling tab, choose Arial, Helvetica, Georgia, or Times New Roman. Reserve the custom display fonts for your name only — it will fall back gracefully in Outlook.
Run the built-in Outlook validator — Click "Validate" in the Export panel. SignatureCraft flags any styling combination known to break in classic Outlook before you copy the HTML.
Paste into the signature dialog, not the message body — In Outlook, go to File → Options → Mail → Signatures. Paste into the signature editor, not into a new message. Pasting into a message body sometimes triggers an extra round of HTML cleanup.
Send a test email to yourself — Send the signature to your own address and open it in Outlook for Windows specifically. Mobile and webmail will render differently — Windows is the strict test.

Tips

If a column is misaligned by a few pixels, check that every <td> has explicit width attributes (not just CSS).
Render-blocking gaps between table rows almost always come from missing line-height: 0 on spacer cells.
Outlook 365 on macOS uses WebKit, not Word — so a signature that fails on Windows may look perfect on a colleague's Mac. Always test on Windows specifically.