If you've ever designed an email signature that looked perfect in your browser but fell apart in Outlook, you're not alone. Email clients are notoriously inconsistent, and the gap between Gmail and Outlook is wider than most people expect.
Gmail is relatively forgiving. It strips some CSS but generally respects inline styles, tables, and standard fonts. Outlook, on the other hand, uses Microsoft Word's rendering engine for HTML emails — yes, really — which means many modern CSS properties simply don't work.
Here are the practical rules that make a signature survive both.
First, use tables for layout. Not CSS flexbox, not CSS grid — actual HTML tables with cellpadding and cellspacing. This feels old-fashioned, but it's the single most reliable way to control structure across email clients.
Second, inline styles only. External stylesheets and style tags get stripped by most email clients. Every style — font size, color, padding, border — needs to be right on the element itself.
Third, stick to web-safe fonts. Arial, Helvetica, and Georgia render consistently everywhere. Custom fonts via @font-face or Google Fonts will fall back to a default in Outlook and sometimes in Gmail, which can shift your layout unexpectedly.
Fourth, avoid background images and CSS gradients. Outlook doesn't support them. If you need a colored background, use a solid background-color on a table cell — that works reliably.
Fifth, keep images small and hosted somewhere stable. If your profile photo or logo is hosted on a URL that goes down, your signature breaks in every sent email. Use a reliable hosting solution and resize images to the exact dimensions you need.
Sixth, test before you ship. Send a test email to yourself and open it in Gmail, Outlook, and Apple Mail. What you see in a browser preview is not what your recipient will see.
Signora handles all of this automatically. Every template uses table-based layouts, inline styles, web-safe fonts, and conservative markup. You focus on the content — the export handles the compatibility.