Why Your Email Signature Breaks (and How to Build One That Doesn't)

You design a nice email signature, paste it in, and it looks broken in Outlook. This happens constantly, and the reason is simple: email clients are not web browsers.

What email clients do to your HTML

• They strip <style> blocks and external stylesheets. Only inline style="..." attributes survive reliably.
• They ignore most modern CSS — flexbox, grid, and many properties are unsupported, especially in Outlook (which historically used Word to render HTML).
• They rewrite layout. Floats and positioning are unreliable; <table> is the layout tool that actually works.

The rules for a signature that survives

1. Inline every style. No classes, no <style> block.
2. Use a table for layout, not divs with flexbox.
3. Stick to web-safe fonts (Arial, Helvetica, Georgia) — custom fonts won't load.
4. Keep it simple. A colored left border, a couple of text lines, and links is plenty.
5. Use absolute URLs for any links and images.

A minimal, reliable pattern

<table cellpadding="0" cellspacing="0" style="font-family:Arial,sans-serif;">
  <tr><td style="border-left:3px solid #2563eb;padding-left:12px;">
    <div style="font-size:16px;font-weight:bold;">Jane Doe</div>
    <div style="font-size:13px;color:#6b7280;">Engineer · Acme</div>
    <div style="font-size:13px;"><a href="mailto:jane@acme.com" style="color:#2563eb;text-decoration:none;">jane@acme.com</a></div>
  </td></tr>
</table>

Skip the hand-coding

The Email Signature Generator builds exactly this kind of inline-styled, table-based signature from a short form, with a live preview and one-click copy — so it looks right whether it lands in Gmail, Outlook, or Apple Mail.