Email signature best practices: how to build one that looks right in Gmail and Outlook

An email signature is the one piece of branding that goes into every message you send, and it is also one of the hardest to get right, because email clients ignore most of modern web design. A signature that looks perfect in your editor can arrive with broken images, giant fonts or stray borders. The fixes are mostly simple once you know what email software can and cannot do. If you just want a result, the Email Signature Generator produces email-safe HTML you can edit and paste. The rest of this guide explains the rules behind it.

What to include

Shorter signatures get read. Aim for four to six lines of text, plus at most one image:

• Name and role. Full name, job title and company on one or two lines.
• One or two ways to reach you. A direct phone number and the website. Adding every channel makes none of them stand out.
• One call to action, if any. "Book a call" or "See our work" linking to a single page is more useful than a row of buttons.
• A small logo or a headshot. Use one or the other unless your brand style requires both.
• Social icons only for the channels you actually use for work. Three at most.

Setting up a signature for a new venture and still choosing a business name? StartupNameLab has free name generators to try first.

Leave out inspirational quotes, long disclaimers where they are not legally required, animated GIFs and anything that makes every reply in a long thread grow by half a screen.

Layout rules that survive every email client

Email clients, especially Outlook for Windows, which renders messages with Word's engine, do not support most modern CSS. The approach that works everywhere is the same one used for marketing emails ten years ago:

1. Use tables for structure. Flexbox, grid and floats are unreliable. A simple table with two columns, image left and text right, behaves in every client.
2. Inline your CSS. Put styles directly on each element with the style attribute. Many clients remove or ignore style blocks in the head.
3. Keep the total width at 600 pixels or less. A narrower signature fits inside reading panes and mobile screens without sideways scrolling.
4. Use web-safe fonts with fallbacks, for example Arial, Helvetica, sans-serif. Custom web fonts will not load in most clients, and the fallback is what people will see.
5. Set sizes in pixels, not rem or percentages. Body text of 13 to 14 pixels and the name at 15 to 16 is comfortable. This is one of the few places where pixel units are the right choice. Our PX to REM converter is for websites, not email.
6. Spell out colors as hex values. Avoid named colors, CSS variables and modern functions such as oklch().

Logos and photos

Images are where most signatures fail. The key facts:

• Host images on a web address. Pictures pasted directly into a signature box are often embedded as attachments, stripped out, or refused, depending on the client. A public https:// link to a file on your own site is the dependable option.
• Never use base64 data URIs. Many clients block them, and they bloat every message.
• Size for high-density screens. If the logo should appear 160 pixels wide, export it at 320 and set width="160" in the HTML so it stays sharp on phones.
• Use PNG or JPEG. SVG and AVIF are not reliably supported in email. The Image Compressor can export a small JPEG or PNG, and the guide to compressing images explains why you should keep these files small.
• Set width and height attributes and an alt text. If images are blocked, the alt text and the reserved space keep the layout readable.
• Crop headshots square and keep them small, around 80 to 100 pixels displayed.

Dark mode and mobile

More than a few of your recipients will read in a dark theme, and clients handle it in different ways: some leave the email alone, some lighten dark text, and some invert colors automatically. To stay readable under all of them, avoid pure black text on a transparent logo that disappears on a dark background. A logo with a thin white outline, or one placed on a solid light tile, survives better than a dark logo on transparency. Use mid-tone text colors (a dark gray rather than black) for body copy, and test in at least one dark client.

On mobile, make phone numbers and links large enough to tap, around 44 pixels of tappable height, and keep the signature narrow so it does not force a horizontal scroll. A single column layout on narrow screens is easier to read than two columns, so keep your two-column version compact.

Installing it

The menus change from version to version, so look for the Signatures setting if these names differ on your account.

• Gmail: Settings, See all settings, General, Signature. Create a signature, paste the formatted result from the generator and save. Choose whether it is added to new emails and replies.
• Outlook (new and web): Settings, Accounts, Signatures. Paste into the editor, set defaults for new messages and replies, then save.
• Outlook (classic desktop): File, Options, Mail, Signatures. Paste the formatted version.
• Apple Mail: Settings, Signatures. Add a signature, paste it, and turn off "Always match my default message font" if the fonts change.

Copy the rendered signature from the preview rather than the HTML source, unless a client specifically asks for raw HTML. If a client lets you paste HTML, paste the full table.

Testing before you roll it out

1. Send a test to yourself in Gmail, Outlook and Apple Mail if you can, and open each on desktop and phone.
2. Turn off image loading in one client and confirm that the layout and alt text are still readable.
3. Check every link goes to the right page and click through on mobile.
4. Reply to the test message to confirm that the signature stays tidy in a thread.
5. If you add tracking parameters to links, keep them short and accurate. Each additional parameter makes the link harder to read in plain-text mode.

If your messages from a custom domain are landing in spam, the signature is rarely the cause. Check SPF, DKIM and DMARC with the SPF / DMARC Checker and read our explainer on the three records.

Legal lines and accessibility

Some businesses are legally required to include details such as a company registration number, a registered office or professional regulator information in emails. Requirements vary by country and industry, so check the rules that apply to you rather than copying another company's footer. Keep any required text in a smaller, lighter gray at the bottom and separate from the contact block. For accessibility, make sure the text has enough contrast against the background (our WCAG Contrast Checker will tell you), never convey information only through an image, and write meaningful alt text for the logo, such as the company name.

Frequently asked questions