Why your Outlook email signature looks broken, and how to fix it
An Outlook email signature looks broken because classic Outlook for Windows renders email with Microsoft Word, not a web browser. Word drops rounded corners, recolours links and resizes images. The fix is a signature written for Word's rules, which is what SIGNÉ's separate Outlook build is.
Updated
Which Outlook breaks signatures?
Only one of them. Classic Outlook for Windows, the desktop app that ships with Microsoft 365 and Office, uses Word's rendering engine to display email. A signature that looks perfect in a browser can fall apart there.
Outlook on the web and the new Outlook render email the way a browser does, so they behave like Gmail and Apple Mail. If your signature only breaks for some recipients, they are most likely on classic Outlook.
What goes wrong, and what fixes it
These are the five failures that account for most broken Outlook signatures.
| What you see | Why it happens | What SIGNÉ's Outlook build does |
|---|---|---|
| Links turn blue and underlined | Word applies its own Hyperlink style to link text and ignores the colour set on the link. | The Outlook build repeats your colour on the text inside every link, so Word has nothing to repaint. |
| Rounded corners become square | Word does not support rounded corners on buttons, photos or cards. | The Outlook build is laid out so the design still reads correctly with square corners. |
| Backgrounds and soft tints disappear | Word ignores CSS background images and semi-transparent colours. | Tints are converted to one flat, solid colour per table cell, which Word does render. |
| Photos and logos stretch or blow up | Mail apps, Word included, ignore the CSS that fits an image into a box and fall back to the file's real size. | Every image carries fixed width and height and is cropped in advance. |
| Layered elements collapse | Mail apps strip positioned elements (Gmail removes them entirely), so overlays fall apart. | Overlays are built from table cells instead of floating layers. |
One design, two builds
Most signature tools export one piece of HTML and hope it survives everywhere. SIGNÉ exports two from the same design: a web build for Gmail, Apple Mail, Outlook on the web and Spacemail, and an Outlook build for classic Outlook. Outlook-only changes live in the Outlook build, so a fix for Outlook never changes what Gmail receives.
This is the Outlook build of the Editorial Split template, shown in an Outlook reading pane.
Signed: services agreement
Jordan Rivas
To: Alex Morgan
Hi Alex,
Fernhollow Studio accepts the agreement terms, and the countersigned copy is attached. Kickoff is Monday 6 October at 10:00 CET.
Best regards,
How to add your signature in Outlook
You need the Outlook build, so choose Outlook before you copy.
- Design your signature in the SIGNÉ editor, then click Install.
- Choose Microsoft Outlook as the email client. This switches the export to the Outlook build.
- Click Copy Formatted Signature.
- In Outlook, go to Settings, then Mail, then Compose and reply.
- Under Email signature, click New signature and paste with Ctrl + V.
- Select it as your default signature for new messages and click Save.
Paste the formatted signature, not the HTML source. Outlook's signature box is a rich-text editor, so pasted source code would appear as visible text.