Email signature generator › Why it looks different

One signature, two renderings: what actually differs

A signature is not rendered once. It is rendered by whatever program each recipient uses, and those programs disagree profoundly about what HTML means. This page is about that disagreement.

Three engines, not one

Most of what people call "email clients" fall into three groups by rendering engine, and the group decides the behaviour far more than the brand name:

• Browser engines. Thunderbird uses Gecko, Apple Mail and Outlook for Mac use WebKit, and every webmail runs inside the browser you opened it in. These render modern CSS competently.
• The Word engine. Outlook for Windows, the classic desktop version, renders incoming HTML with the layout engine from Microsoft Word. It predates most of modern CSS and ignores it.
• Sanitising webmail. Gmail and Yahoo run in a browser but first rewrite your HTML — stripping <style> blocks, removing classes, and in Gmail's case clipping long messages entirely.

What the Word engine ignores

This is the list that matters, because it is the shortest path to a signature that works everywhere: no flexbox, no grid, no float, no position, no background images on most elements, no max-width, no negative margins, and unreliable padding on anything that is not a table cell.

What it does honour: tables, width and height attributes in pixels, cellpadding and cellspacing, inline style on table cells for colour, font and text alignment, and images with explicit dimensions.

Why building for the worst engine is not a compromise

A table-based signature with inline styles renders identically in Gecko, WebKit and the browser engines. It does not look worse there — the layout is simple enough that there is nothing for a better engine to improve. So the "lowest common denominator" costs you nothing visually and buys you every client.

The temptation is the other direction: you build in a browser, it looks excellent, and you never see the Outlook version because you do not use Outlook. Your recipients do, and they will not write to tell you it is broken.

The two differences that surprise people most

Gmail clips. If a message exceeds roughly 102 KB, Gmail shows "[Message clipped]" and hides the rest behind a link — and a heavy signature on a long thread is a common way to hit that. This is a size problem, not a markup problem.

Dark mode inverts. Several clients apply their own colour inversion to messages. A signature with a dark logo on a transparent background can end up as a dark logo on a dark background. That is not a rendering bug you can fix with better HTML; it needs a logo that works on both.

A minimal signature that survives every engine

The shortest structure that renders identically in all three groups is a single table with two columns: the logo on the left with a fixed pixel width, the text block on the right. Every cell carries its own inline style. There is no wrapper div, no class, and no stylesheet.

That structure looks the same in Gecko, in WebKit, in a browser, and in the Word engine, because there is nothing in it that the Word engine has to interpret. Everything more ambitious than this trades reliability for appearance, and the trade is rarely worth it for something that appears at the bottom of an email.

Testing without collecting five email clients

Send the signature to three addresses: a Gmail address, an Outlook.com address, and one on your own domain read in a desktop client. Those three cover the sanitising webmail case, the Microsoft case, and the desktop case. Open each on a phone as well as a computer, because the mobile apps of both Gmail and Outlook render differently from their web versions.

Six views, one afternoon, once. After that the only thing that needs retesting is a change to the signature itself.

What you cannot fix, and should stop trying to

Some differences are the recipient's settings, not your markup: images blocked, dark mode inverting colours, a client that renders everything in the reader's preferred font. Building ever more defensive HTML does not address any of them, because they are decisions made after your message arrives.

The response to all three is the same and it is about content rather than code: put nothing important only in an image, choose colours that survive inversion, and do not rely on a specific typeface to carry meaning. A signature built that way degrades gracefully instead of breaking.

Frequently asked questions