Outlook Compatible Email Signature: Why Yours Breaks and How to Build One That Doesn't

Your email signature looks great in Gmail. You've got the layout right, the logo is sharp, the colors are on-brand. Then you send it to a colleague who uses Outlook and they send you a screenshot. The logo is a red X. The layout has fallen apart. The font has changed. There's a gap the size of a parking space between your name and your job title.

This is not a random glitch. Outlook breaks email signatures for a specific, predictable reason — and once you understand it, you can either fix what you have or build a new signature in a way that works from the start. The reason is that Outlook on Windows uses Microsoft Word's HTML rendering engine instead of a real browser engine. Word was built to render documents, not web pages. It handles a limited subset of HTML and CSS, ignores a lot of what modern browsers support, and applies its own default styles on top of everything.

I've seen hundreds of signature builds go sideways specifically because of Outlook. The mistakes are always the same: using CSS properties Outlook doesn't support, using image formats Outlook doesn't handle, or building a layout with modern CSS instead of HTML tables. This guide covers all of it — what breaks, what to do instead, and how to verify that what you've built actually works before you roll it out.

If you want Outlook-safe HTML generated automatically without getting into the code, NeatStamp's editor builds table-based, inline-CSS signatures that are tested against Outlook's rendering engine. But this guide will help you understand what's actually happening — which is useful whether you're using a tool or building by hand.

The Word rendering engine: why Outlook is different from everything else

Outlook 2007 introduced the use of Microsoft Word's rendering engine to display HTML emails. Microsoft made this decision for consistency — Outlook was already using Word to compose emails, so using it to render them seemed to make sense. The unintended consequence was that Outlook suddenly stopped being able to render most modern web HTML.

Every other major email client — Gmail, Apple Mail, Yahoo Mail, Outlook on Mac, and even most webmail clients — uses a browser-based rendering engine. These engines support current HTML and CSS standards. Outlook on Windows (2007, 2010, 2013, 2016, 2019, 2021, and the 365 desktop app) still uses the Word engine. This is not a bug or an oversight — Microsoft has made an active choice to keep it this way for the Windows desktop app.

The practical consequence for email signatures: anything that relies on modern CSS will not display correctly in Outlook on Windows. That covers a surprising amount of common HTML practices. Here's a partial list of what Outlook's engine doesn't support:

• CSS flexbox and CSS grid (entire layout systems ignored)
• border-radius (all corners become sharp right angles)
• CSS background images on elements (use img tags instead)
• max-width and min-width (pixel widths only)
• SVG images
• CSS animations and transitions
• box-shadow
• CSS variables (custom properties)
• background-color on inline elements (a tags, span tags)
• Padding on inline elements

When Outlook encounters HTML or CSS it doesn't support, it doesn't throw an error — it just silently ignores it or renders something unexpected in its place. This is what makes debugging Outlook signatures so frustrating: you can't see the errors, you just see a broken layout.

Outlook versions behave differently from each other

Outlook 2016, 2019, 2021, and the Microsoft 365 desktop app for Windows all use variations of the Word rendering engine, but they're not identical. Outlook 2016 and 2019 are especially strict. The 365 desktop app is slightly more forgiving in some areas. Outlook for Mac uses the WebKit engine — so it renders HTML like a browser, and most modern CSS works fine there. Outlook on the web (OWA — Outlook.com and Office 365 web interface) also uses a browser engine, not Word.

The version your recipients are most likely using depends on their industry. Corporate environments on long IT refresh cycles often run Outlook 2016 or 2019 on Windows. Tech companies and startups tend to use either Outlook 365 or Gmail. If you communicate regularly with large enterprises, banking, legal, or government organizations, you can assume Outlook 2016 or 2019 is common. Design your signature to work there and it will work in every other version too.

How to build an Outlook-compatible email signature: step by step

The core principle is simple: build like it's 2005, not 2025. Use HTML tables for layout. Use inline CSS. Use only properties that Outlook's Word engine supports. Here's how to do that in practice.

Step 1: Use HTML tables — not divs, not flexbox, not grid

Every layout in your email signature should be built with HTML tables. If you want two columns — say, your logo on the left and your contact info on the right — that's a table with one row and two cells. If you want a vertical stack of text elements, that's a single-column table with rows. You cannot use CSS to position elements reliably in Outlook.

The basic structure for a two-column Outlook-safe signature layout:

Notice the use of cellpadding="0", cellspacing="0", and border="0"on the table. These are HTML attributes (not CSS) that control spacing. Outlook's engine respects these HTML attributes even when it ignores the equivalent CSS. Always include all three.

Step 2: Put CSS inline on every element

Outlook partially strips CSS from <style> blocks in the head or body of the email. CSS defined in a style block may or may not be applied — behavior varies by Outlook version. The only reliable approach is to put CSS directly on each element via the style attribute.

This means every paragraph, every table cell, every link, and every image needs its styling written inline. Yes, it's verbose. Yes, it's repetitive. It's also the only approach that works consistently. Set at minimum: font-family, font-size, color, margin, and padding on every text element. For links, set color and text-decoration inline — Outlook overrides link colors if you don't.

Step 3: Set explicit pixel widths on every column

Outlook's engine handles percentage widths inconsistently. A table column set to width="50%" may not divide the space the way you expect. Always set pixel widths: if your signature is 540px wide and you want two equal columns, set each column to 270px explicitly. Use both the HTML attribute (width="270") and the inline style (style="width:270px;") on each td.

Keep your total signature width between 480px and 600px. Wider signatures get cut off in Outlook's reading pane when it's not fully expanded. 540px is a safe standard width that leaves breathing room. See the email signature size guide for recommended dimensions for each element.

Step 4: Use absolute HTTPS URLs for all images

Image URLs in Outlook signatures must be absolute HTTPS URLs pointing to publicly accessible servers. No relative paths, no localhost, no intranet URLs, no base64-encoded images. Outlook fetches images at the time the email is displayed — if the URL isn't reachable from outside your network, recipients see a broken image.

Host your signature images on your own web server, a CDN, or a cloud storage service like AWS S3 or Google Cloud Storage configured for public access. Don't use Dropbox or Google Drive shareable links — they don't reliably serve raw image files and can redirect in ways that break Outlook. Use image URLs that end in the actual file extension (.png, .jpg) and return the image directly.

Base64 images are a particular problem. Some editors embed images as base64 strings directly in the HTML — this makes the HTML enormous and causes Outlook to treat images as email attachments rather than inline content. Recipients end up with image files in their attachment list, and the inline display breaks. Never use base64 in signatures intended for Outlook.

Step 5: Set explicit background colors with both bgcolor and style

For table cells that need a background color, use both the HTML attribute and the CSS inline style. The HTML bgcolor attribute is respected by Outlook's Word engine even when it ignores the CSS equivalent:

Step 6: Replace rounded elements with sharp alternatives or pre-rendered images

border-radius simply doesn't work in Outlook on Windows. Round profile photos stay square. Rounded button corners stay sharp. If rounded corners matter for your brand, the only reliable Outlook solution is to pre-render the rounded element as a PNG image. A circular profile photo, for example, should be a PNG file that's already cropped to a circle — not an img tag with CSS border-radius applied.

For most signature elements, sharp corners are perfectly fine and often look cleaner. Don't add complexity trying to simulate rounded corners in Outlook. Design with sharp corners from the start and your signature will look identical in Outlook and every other client.

Step 7: Test by actually sending to Outlook, not just previewing

Outlook's compose view is not an accurate preview. You must send a real email and open it in a real Outlook inbox. Set up a test Outlook.com account (it uses the web rendering engine, different from desktop Outlook) and also test in the actual desktop Outlook app. If you don't have Outlook installed, ask a colleague who does. NeatStamp's Outlook compatibility preview is a good first check, but a real-device test is always the final word.

Common Outlook signature problems and how to solve them

Problem: images show as attachments

The images in your signature are either embedded as base64 or Outlook is treating inline images as attachments due to how the message is composed. Solution: use external HTTPS URLs for all images, never base64. Also check that you're not using Outlook's "Insert Picture" function to add images — that embeds them. Instead, use HTML with an img src pointing to your hosted URL. See the guide on fixing email signature images not displaying for a full breakdown.

Problem: huge gap between signature elements

Outlook adds default paragraph spacing — a bottom margin equivalent — to all p tags. If you're using p tags inside your signature table cells without explicitly setting margin: 0, Outlook adds space below each paragraph. Fix: add style="margin:0 0 4px 0;"to every p tag. You can use a small bottom margin (4px or 6px) to add controlled spacing between lines instead of relying on default paragraph spacing.

Problem: fonts change to Times New Roman

Outlook falls back to Times New Roman when it can't apply the font you've specified. This happens when fonts are set in a CSS class rather than inline, or when you've specified a web font that Outlook can't load. Fix: set font-family inline on every text element, and always use web-safe fonts as the primary choice: Arial, Helvetica, Georgia, or Trebuchet MS. If you must use a brand font, put it first in the stack with Arial as an explicit fallback: font-family:'YourFont',Arial,sans-serif.

Problem: link colors are wrong in Outlook

Outlook applies its own blue color to hyperlinks unless you override it explicitly. The fix is to set color inline directly on the a tag: <a href="..." style="color:#2563eb;text-decoration:none;">. Also wrap the a tag in a span with the same color to catch some Outlook versions that apply the default link style to the span instead of the anchor. This looks redundant but is the reliable solution.

Problem: signature layout collapses on reply or forward

When Outlook forwards or replies to an email, it re-renders the message content and can strip some HTML. Tables with percentage-based widths are particularly vulnerable. Fix: use pixel widths on every table and td element. Also make sure you're not using nested tables beyond 3-4 levels deep — very deeply nested tables can collapse during forward/reply rendering. The Outlook email signature guide covers the full set of Outlook-specific HTML rules.

Pro tips for Outlook-compatible signatures

Tip 1: Use Outlook conditional comments for specific fixes

Outlook supports Microsoft-proprietary conditional comment syntax that lets you target specific Outlook versions with special HTML. This is useful for things like VML-based rounded buttons or Outlook-specific width overrides. The syntax: <!--[if mso]>...Outlook-only HTML...<![endif]-->. Most people don't need this for basic signatures, but it's the professional email developer's tool for handling edge cases.

Tip 2: Use mso-line-height-rule for consistent line heights

Outlook interprets line-height differently from browsers. To get consistent results, add mso-line-height-rule:exactly; to any element where you set a specific line-height. Without it, Outlook may apply its own line height calculation and override yours. For signature text set at font-size 14px with line-height 20px, the declaration would be:style="font-size:14px;line-height:20px;mso-line-height-rule:exactly;".

Tip 3: Test across the full Outlook version range before rolling out

If you're deploying signatures company-wide, test in Outlook 2016, 2019, and the 365 desktop app. The differences are subtle but real. Outlook 2016 is the strictest — if it looks right there, it will look right everywhere. See the team email signature management guide for how to standardize and distribute tested templates across an organization.

Tip 4: Don't use background images — use img tags

CSS background-image is not supported in Outlook. If you want a background image effect, you have two options: use VML (Outlook-specific vector markup) or redesign the element to use a real img tag instead. For most signature use cases — a logo, a banner, a profile photo — an img tag is the right approach anyway. Reserve background images for marketing emails where you have the budget to implement VML workarounds.

Outlook compatibility in specific situations

Microsoft 365 and Exchange environments

In corporate environments running Microsoft 365 or Exchange, email signatures are often deployed centrally via Exchange transport rules or third-party signature management tools. These server-side signatures are appended to emails after they leave the sender's client, which means they can't rely on client-side HTML capabilities at all — they must be Outlook-compatible at the HTML level. The team signature management guide covers deployment methods for large organizations.

Professional and business signatures in Outlook

For business email signatures deployed across a team, Outlook compatibility is non-negotiable — assume at least some of your clients use Outlook. The professional email signature guide has templates already tested for Outlook. Using a pre-tested template saves the hours of debugging that a DIY approach inevitably requires.

Outlook on Mac vs. Outlook on Windows

Outlook for Mac uses WebKit and supports modern CSS — it's not the problem child that Windows Outlook is. If you build a signature that works in Outlook for Windows, it will almost certainly look better in Outlook for Mac (because the Mac version supports more CSS). The reverse is not true: a Mac-first signature using border-radius and flexbox will break on Windows. Always design to the lowest common denominator — Windows Outlook.

Related guides