Why HTML email signatures break — and the four rules that fix them
By EmailArt team
Email rendering hasn't moved on the way the rest of the web has. Outlook on Windows still uses the Microsoft Word engine; Gmail strips most modern CSS; iPhones helpfully linkify your phone number whether you asked or not. If you want a signature that looks the same everywhere, you live by four rules.
1. Tables, not flexbox
For layout, use HTML tables with explicit widths in pixels. Flex, grid, and percentage widths collapse unpredictably in Outlook and some Android clients. It feels archaic — it is archaic — but the payoff is pixel parity across the clients that matter.
2. Inline every style
External stylesheets and <style> blocks get stripped by Gmail and several webmail providers. Put every colour, font and spacing rule inline on the element itself. Yes, it's verbose. No, there isn't a workaround that actually works.
3. Web-safe fonts, with a clean fallback stack
Custom fonts won't load in most clients. Pick a web-safe primary (Inter, Helvetica Neue, Arial) and let the brand voice come through in colour, weight and hierarchy instead.
4. Host images on a CDN with a stable URL
Inline base64 images blow past Gmail's size cap and get clipped. Host the logo on a CDN, serve it at 2× the display size for retina screens, and never change the URL — people forward signatures, and a 404 logo is worse than no logo.
The shortcut
EmailArt's templates encode all four rules so you never have to think about them. Pick a template, upload your logo, ship it. If you'd rather hand-roll HTML, those four rules are the floor.