HTML email signature best practices

Updated 2026-08-05

Email clients are roughly fifteen years behind browsers, and Outlook for Windows is the furthest behind of all because it renders HTML with Microsoft Word rather than a browser engine. A signature that looks perfect in a browser preview can collapse entirely in the place it actually matters. These are the rules that hold up.

Lay out with tables, not flexbox or grid

Word's rendering engine has no support for flexbox, grid, float in any reliable form, or position. Nested tables with fixed pixel widths are the only layout primitive that renders consistently across Outlook, Gmail, Apple Mail, and the mobile clients.

This feels archaic and it is, but it is the difference between a signature that holds its shape and one that becomes a vertical stack of misaligned text.

Put every style inline

Gmail strips <style> blocks entirely. Outlook on the web rewrites class names. Any styling that lives in a stylesheet or a <style> element will be discarded somewhere in the chain, so every rule has to sit in a style attribute on the element it applies to.

Set a font-family on each text element rather than relying on inheritance, because some clients reset fonts at the container boundary.

Keep images hosted, sized, and optional

Reference images by absolute public URL, never by a local file path — a path on your disk is unreachable for everyone else and produces the classic broken-image square. Set explicit width and height attributes so the layout does not reflow while images load, and so blocked images still occupy the right space.

Assume images will be blocked by default, because in many corporate clients they are. Write meaningful alt text and never put essential information such as a phone number inside an image, where it is invisible to blocked-image users, screen readers, and text search.

Constrain the width and test on mobile

Keep the total signature width at or under 600 pixels. Wider signatures force horizontal scrolling on phones, where more than half of email is now read. Media queries are unreliable in this context, so design something that works at a fixed narrow width rather than something responsive.

Restrain the content

A signature carries name, title, company, one or two contact methods, and optionally a logo and a small set of social icons. Every additional line reduces the chance any of it is read, and long legal disclaimers push the actual content out of the preview pane.

Use real text for contact details rather than images. It is selectable, searchable, screen-reader accessible, and it survives image blocking.