How to create a professional email signature — The Email Signature as a Rendering Problem

Assumed knowledge: you can paste HTML into a signature field. Everything else here is about what mail clients do to that HTML afterwards.

The weight matters more than people expect, because a signature is appended to every message you send for as long as you use it. It is the one asset in your business that ships thousands of times.

Mail clients are not browsers. Some render with an office word-processing engine, and flexbox, grid, external stylesheets and most modern CSS either degrade oddly or are ignored outright. Nested tables with inline styles are what actually works everywhere.

Keep the total width under about six hundred pixels so a preview pane does not force horizontal scrolling, avoid background images, and give every colour an explicit value rather than relying on an inherited default that dark mode will invert.

Send it to Outlook, to Gmail and to a phone, then look at all three: images blocked, dark mode on, narrow column. Those three conditions account for nearly every signature that looks broken in the wild, and all three take two minutes to check.

Then build a second, shorter version — name and phone, two lines — and set it as the reply signature. Most clients support a separate one and almost nobody configures it, which is why long threads end up carrying the same block of logos five times over.