How to Make an HTML Email Signature That Renders Everywhere

Why email signatures need old-fashioned HTML

An email signature is a tiny web page that has to render inside dozens of email clients, each with its own quirks. The techniques that power modern websites — flexbox, grid, external stylesheets, JavaScript, web fonts — are unreliable or completely ignored in email. To build a signature that looks the same in Outlook, Gmail, and Apple Mail, you have to write the kind of HTML that was common fifteen years ago: tables for layout and CSS declared inline on every element.

That constraint sounds painful, but it is liberating once you accept it. A signature is small, so the limitations rarely bite. Follow a handful of rules and your signature will look intentional everywhere instead of collapsing into a wall of unstyled text.

Step 1: Lay it out with a table, not divs

Outlook on Windows renders email using Microsoft Word's engine, which has almost no support for modern CSS positioning. The only layout method every client agrees on is the HTML table. Wrap your signature in a single table, then use rows and cells to place your photo or logo beside your text.

• Set cellpadding, cellspacing, and border to 0 on the table so clients don't inject their own gaps.
• Use a fixed width in pixels (most signatures sit comfortably at 400–600px) rather than percentages.
• Control spacing with cell padding instead of margins, which Outlook frequently drops.

A minimal structure

One row, two cells: the left cell holds a logo or headshot, the right cell stacks your name, title, company, and contact links. That is genuinely all most signatures need. Nesting a second table inside the text cell gives you fine control over line spacing without relying on margins.

Step 2: Put every style inline

Gmail strips out <style> blocks entirely, so any CSS you write in the document head simply vanishes. The workaround is to attach styles directly to each element with the style attribute. Set the font family, size, color, and line height on every text element, even when it feels repetitive. If you skip it, the client falls back to its own defaults and your careful typography evaporates.

Declare a full font stack so there is always a fallback: for example, a web-safe family like Arial or Helvetica followed by sans-serif. Avoid custom web fonts — they will not load in Outlook and often not in the desktop clients either.

Step 3: Host your images, don't paste them

Images make a signature feel finished, but how you include them matters enormously.

• Host images on a public URL and reference them with a normal <img src>. This keeps the email lightweight and lets you update the image later.
• Always set explicit width and height attributes so the layout doesn't jump before images load, and so Outlook doesn't rescale them badly.
• Write meaningful alt text for every image. Many recipients block images by default, and alt text keeps your signature legible when they do.

Avoid pasting images as base64 data or dragging them in from your desktop. Embedded images bloat every message, and some clients quarantine or strip them.

Step 4: Make links obvious and safe

Use full https:// URLs for your website and social profiles, and full mailto: and tel: links for your email and phone. Style links explicitly — clients love to underline them and turn them a default blue that clashes with your brand. Set the color inline on the anchor tag itself.

Step 5: Test before you trust it

The single most important habit is testing in real clients. Send the signature to yourself and open it in Outlook on Windows, Gmail in a browser, and Apple Mail at minimum. Check on a phone too — most email is now read on mobile, and a 600px signature can force awkward horizontal scrolling on a narrow screen.

If it looks right in Outlook, it will almost certainly look right everywhere else. Outlook is the strictest renderer, so treat it as your reference client.

When to hand-code and when to generate

Hand-coding teaches you exactly how the pieces fit, and it is worth doing once. For day-to-day use, though, maintaining table markup by hand is tedious and error-prone. A generator like Sigmint outputs clean, table-based, inline-styled HTML that is already tuned for the major clients, so you can pick a template, drop in your details, and paste the result straight into your mail app. Whether you write it yourself or generate it, the rules above are what separate a signature that renders everywhere from one that falls apart in the first inbox it lands in.