Setting up an HTML email signature in Outlook takes about two minutes once you have the right HTML — but "the right HTML" is the catch. Outlook's desktop app renders email through Microsoft Word, not a browser, which means modern CSS silently fails and your carefully designed signature collapses into plain text. This guide walks you through the exact steps for every version of Outlook, explains why breakage happens, and shows you what HTML actually survives the Word rendering engine.
Build a free Outlook-compatible HTML email signature →
Why Outlook Breaks HTML Signatures (The Word Rendering Engine)
Most email clients — Gmail, Apple Mail, Yahoo — render HTML the same way a web browser does. Outlook desktop does not. Starting with Outlook 2007, Microsoft replaced the browser-based HTML renderer with the Microsoft Word rendering engine. Every version of classic Outlook (2016, 2019, 2021, and the Microsoft 365 desktop app) still uses Word under the hood.
Word was built for print documents, not web layouts. When it encounters CSS that a browser handles without blinking, it either ignores it entirely or produces something unrecognisable:
- CSS Flexbox and Grid — not supported at all. Word has no concept of these layout models.
- External stylesheets — ignored. Any
<link rel="stylesheet">tag is stripped on paste or import. margin: autofor centering — partially supported in some versions but unreliable.- CSS
background-image— not rendered in most Outlook versions. border-radius— ignored, so rounded corners become hard squares.- Web fonts loaded via
@font-faceor Google Fonts — silently replaced with a system font.
The result is that an HTML email signature that looks polished in Gmail can render as an unstyled paragraph of text in Outlook 2019.
The only reliable approach is table-based HTML with fully inline styles — the same technique professional email developers have used since 2007. No external CSS, no modern layout models, every style attribute written directly on the element. It is verbose, but it works across every version of Outlook from 2007 to 2021 and Microsoft 365 desktop.
signcraft.email generates exactly this format. You fill in your details, pick a template, and receive table-based inline-styled HTML that you can paste directly into Outlook's signature editor without modification.
Classic Outlook Desktop: Step-by-Step (2016, 2019, 2021, Microsoft 365)
This method applies to every version of classic Outlook for Windows. The menu paths are identical across 2016, 2019, 2021, and the Microsoft 365 desktop client.
Step 1 — Open Signature settings
- Open Outlook.
- Click File in the top-left ribbon.
- Select Options from the left sidebar.
- In the Outlook Options window, click Mail.
- Click the Signatures... button. The Signatures and Stationery dialog opens.
Step 2 — Create a new signature
- In the Email Signature tab, click New.
- Type a name for the signature (e.g. "Work – HTML") and click OK.
- The name appears in the signature list on the left.
Step 3 — Paste your HTML
The signature editor shown in this dialog is a basic rich-text editor — it is not an HTML source editor. Pasting raw HTML code here will display the raw tags as text.
The correct method is:
- Open your HTML signature file (or copy the HTML code from signcraft.email) in a web browser.
- Select all and copy the rendered visual (Ctrl+A, then Ctrl+C) — you are copying the visual output, not the code.
- Return to Outlook's Signatures editor and paste (Ctrl+V) into the editor area.
Outlook will retain the formatting, table layout, and inline styles from the rendered HTML. Images linked to public URLs will load correctly. If you see raw HTML tags instead of a formatted signature, you have pasted the source code rather than the rendered output — go back to the browser step.
Step 4 — Assign the signature to an account
Below the editor you will see two dropdown menus: New messages and Replies/forwards. Use these to assign your signature to the correct email account (if you have more than one) and choose whether it appears on new messages, replies, or both.
Step 5 — Save
Click OK in the Signatures dialog, then OK again in Outlook Options. Compose a new email to verify the signature appears as expected.
New Outlook for Windows and Outlook Web App (OWA)
New Outlook for Windows (released 2023 and later) and Outlook Web App share the same rendering engine — a modern browser-based engine, not Word. This means some CSS limitations are relaxed, but for maximum compatibility across recipients' clients, table-based inline styles are still the recommended approach.
New Outlook for Windows
- Open New Outlook.
- Click the Settings gear icon in the top-right corner.
- In the Settings panel, navigate to Mail → Compose and reply.
- Scroll to the Email signature section.
- Click + New signature, give it a name, and paste your signature content into the editor.
- Use the Select default signatures dropdowns to assign it to new messages and/or replies.
- Click Save.
Outlook.com and Outlook Web App (OWA)
- Sign in to outlook.com or your organisation's OWA.
- Click the Settings gear icon (top-right).
- Click View all Outlook settings at the bottom of the panel (if shown).
- Navigate to Mail → Compose and reply.
- Paste your signature HTML into the signature editor under Email signature.
- Set the default signature for new messages and replies using the dropdowns provided.
- Click Save.
For a detailed walkthrough specific to the web version, see signcraft.email's Outlook setup guide.
Outlook Mobile: What You Can (and Cannot) Do
Outlook for iOS and Android supports a plain-text or very basic rich-text signature. There is no HTML source editor and no way to paste raw HTML code into the mobile signature settings.
What you can do:
- Set a simple text signature: name, title, company, phone number.
- Add basic formatting (bold, italic) using the built-in rich-text editor in newer versions.
What you cannot do:
- Paste an HTML signature with table-based layouts.
- Display a logo or profile photo in the signature on mobile.
- Match the visual output of your desktop signature.
The practical approach most professionals use is to accept a simplified mobile signature — just your name and title — and rely on the full HTML signature on desktop where it renders correctly. Attempting to force rich HTML into the mobile editor typically results in raw tag characters appearing in your outgoing emails.
What HTML Actually Works in Outlook
If you are hand-coding a signature or editing one, here is the definitive list of what Outlook's Word engine supports reliably:
Use these:
| Element / Property | Support |
|---|---|
<table>, <tr>, <td> |
Full support — the foundation of every Outlook-safe layout |
Inline style="" attributes |
Full support — the only way to apply styles reliably |
font-family (web-safe fonts) |
Supported; falls back if font unavailable |
font-size, color, font-weight |
Full support |
padding on <td> |
Supported (use cellpadding attribute as a fallback too) |
border |
Supported |
<img src="https://..."> |
Supported when image is hosted at a public URL |
<a href="..."> |
Full support |
width and height on <td> and <img> |
Supported — always set these to prevent layout shifts |
Avoid these:
| Element / Property | Issue |
|---|---|
display: flex / display: grid |
Not supported — layout collapses |
@font-face / Google Fonts |
Ignored — replaced with system font |
External <link rel="stylesheet"> |
Stripped on paste |
background-image in CSS |
Ignored in most versions |
border-radius |
Ignored — corners stay square |
max-width |
Unreliable in older versions |
| Base64-encoded images | Inflates email size; blocked by some clients |
Images deserve special attention. Always host your logo or profile photo at a stable, publicly accessible HTTPS URL. Base64-encoded images bloat the email file size, trigger spam filters, and are blocked by Outlook's default security settings. If you are using signcraft.email, the generator produces <img> tags pointing to hosted URLs automatically.
Common Problems and Fixes
Even with the right HTML, a few issues come up regularly. Here is how to resolve each one.
Images are not showing up
Cause: Outlook blocks external images by default until the user clicks "Download Pictures." This is a security setting, not a rendering bug.
Fix: There is no way to force automatic image display in another person's Outlook. What you can do:
- Keep images small and clearly labelled with
alttext so the recipient knows what they are looking at before downloading. - Use a widely recognised hosting domain (your own website, not an obscure CDN) to reduce the likelihood of being blocked.
- Ensure the image URL is
https://— plainhttp://is increasingly blocked.
For logo-specific troubleshooting, see why your logo is not working in Outlook.
Fonts are changing
Cause: You have specified a web font (e.g. Inter, Lato, Montserrat) that is not installed on the recipient's machine. Outlook substitutes a system font — usually Calibri or Times New Roman.
Fix: Use web-safe fonts for the core signature text: Arial, Helvetica, Georgia, Verdana, or Tahoma. Specify a fallback stack in your inline style: font-family: Arial, Helvetica, sans-serif;. If your brand requires a specific font, use it for your name only and accept that non-Windows users may see the fallback.
Extra whitespace appearing above or below the signature
Cause: Outlook adds paragraph spacing (<p> tags) or line breaks around pasted content. Word's rendering engine also adds spacing between certain block elements.
Fix: Wrap your entire signature in a single outer <table> with cellpadding="0" and cellspacing="0" and border="0". Use <td> cells for all spacing instead of <br> tags or <p> elements. Set margin: 0; padding: 0; inline on the <body> and outer container where possible.
Signature looks correct when composing but breaks when sent
Cause: Outlook may re-render the signature through Word when the email is actually sent, stripping styles it tolerated in preview.
Fix: This typically means your HTML includes unsupported elements. Run a test by sending to a Gmail account and inspecting the received HTML. Eliminate any CSS that is not inline, remove any unsupported properties from the table above, and re-test. The broken Outlook signature troubleshooting guide covers the most common causes in depth.
Signature not appearing on replies
Cause: You assigned the signature to New Messages only, or left the Replies/Forwards dropdown set to "none."
Fix: Go back to File → Options → Mail → Signatures and set your signature in the Replies/forwards dropdown as well.
FAQ
Can I paste raw HTML code directly into Outlook's signature editor?
No. Classic Outlook's signature editor does not have an HTML source mode. Pasting raw HTML code will insert the tags as plain text. The correct method is to open the HTML in a browser, select all, copy the rendered visual output, and paste that into the Outlook editor.
Does the new Outlook for Windows support modern CSS?
Better than classic Outlook, yes — it uses a browser-based rendering engine rather than Word. However, the emails you send will still be received in clients that may use older engines, so table-based inline HTML remains the safest approach for broad compatibility.
Why does my signature look different on the recipient's end?
Most often this comes down to font substitution (they do not have your font installed), image blocking (their Outlook blocks external images by default), or CSS properties that the recipient's email client does not support. Stick to web-safe fonts, hosted images, and table-based inline styles to minimise the gap between what you see and what they see.
Can I have different signatures for different email accounts in Outlook?
Yes. Classic Outlook lets you assign a different signature to each email account configured in the app. In the Signatures dialog, select each account from the dropdown and assign the appropriate signature to new messages and replies independently.
My logo appears as a broken image icon. What should I do?
The most common causes are: the image URL is not publicly accessible (it is behind a login or on a local drive), the URL uses http:// instead of https://, or Outlook's automatic image-blocking is active on the recipient's side. Check that the image URL loads correctly in an incognito browser window, switch to HTTPS, and review the full checklist at /en/guides/logo-not-working.
Is there a faster way to generate an Outlook-compatible HTML signature?
Yes. signcraft.email generates table-based, fully inline-styled HTML that is tested to render correctly in classic Outlook, new Outlook, Outlook Web App, Gmail, and Apple Mail. Fill in your details, choose a template, and copy the output directly into Outlook's signature settings — no manual HTML editing required.