HTML Email Signature Best Practices: 12 Rules That Actually Render

Email clients are the last place on the internet where it's still 2003. Outlook renders HTML with Microsoft Word's engine. Gmail strips <style> blocks. Dark mode inverts your colors. A signature that looks perfect in your browser can arrive as a broken pile of images and mis-aligned text — unless it follows the rules.

The 12 rules

Every signature SigSync generates follows these; if you're hand-coding, so should yours:

• Use tables for layout — never flexbox, grid or floats
• Inline every style — no <style> blocks, no classes
• Stick to email-safe fonts: Arial, Georgia, Verdana, Tahoma, Times, Trebuchet, Courier
• Set explicit width and height on every image
• Host images on HTTPS, or embed small marks — never link to localhost or intranet paths
• Keep total width under ~600px so mobile clients don't shrink it
• Use font-size 12–14px for body, 16–18px for the name
• Avoid background images — Outlook ignores them
• Use border-radius sparingly; Outlook desktop ignores it (design so squares still look fine)
• Add alt text to the logo and photo
• Keep the disclaimer under 2 lines at 10px — legal stays happy, replies stay readable
• Test in Gmail, Outlook desktop, Outlook web and Apple Mail before rollout

Or skip the hand-coding entirely

SigSync's builder generates table-based, inline-styled signatures across ten professionally designed templates — with your fonts, accent color, photo and logo — that pass all twelve rules automatically. Design once, copy into any client or deploy organization-wide.