Most email signature design problems are not creative problems. The layout looks perfect in Photoshop or Figma, then it lands in Outlook as a stack of broken red X boxes, or Gmail crops the logo, or the beautiful custom typeface silently turns into Times New Roman. The signature is the last thing a client sees in every single message you send, so it deserves the same technical rigor as a landing page.

This guide covers the exact numbers that work: pixel dimensions, safe font stacks, acceptable file weight, and the hosting choice that decides whether your images show up at all. Everything below is based on how real email clients render HTML in 2026, not on what a design tool preview shows you.

Why email signatures break in the first place

An email signature is HTML rendered by dozens of different engines. Outlook for Windows still uses the Microsoft Word rendering engine for HTML mail, Gmail rewrites and strips CSS, and Apple Mail behaves like a modern browser. That mismatch causes four recurring failures:

• Images do not load because they were embedded in a way the client blocks or discards.
• Fonts fall back because custom web fonts are not downloaded in Outlook or Gmail’s desktop web app.
• Layout collapses because the signature was built with modern CSS (flexbox, grid, divs with margins) instead of tables.
• Everything looks oversized because the design was made at retina scale without setting display dimensions.

Fix those four and roughly 95% of signature complaints disappear.

Ideal email signature dimensions (pixel by pixel)

The single most useful rule: design the whole signature to fit inside 600 pixels of width, and aim for 320 to 450 pixels for the best mobile result. Reading panes in Outlook are narrow, and more than half of business email is opened on a phone.

Height matters too. A signature taller than about 200 pixels starts pushing the message content off screen and looks like an advertisement.

Element	Recommended display size	Export size (2x for retina)	Notes
Full signature block	320 to 600 px wide, max 200 px tall	n/a (built in HTML)	Never export the whole signature as one image
Company logo (horizontal)	120 to 200 px wide, 40 to 70 px tall	240 to 400 px wide	Set width and height attributes in the HTML
Company logo (square or badge)	64 to 100 px square	128 to 200 px square	Keep clear space around the mark
Headshot / profile photo	70 to 100 px square	140 to 200 px square	Rounded corners via border-radius, not a transparent PNG mask
Social media icons	16 to 24 px square	32 to 48 px square	Max 4 icons, 6 to 8 px spacing between them
Banner / campaign strip	450 to 600 px wide, 60 to 90 px tall	900 to 1200 px wide	Optional, and never the only carrier of information
Divider line	1 to 2 px, full block width	n/a	Use a table cell with a background color, not an image

The retina rule that prevents giant logos

Export images at twice the display size so they stay sharp on high density screens, then force the smaller size in the markup. Both the HTML attribute and the inline style are needed, because Outlook ignores one and Gmail sometimes ignores the other:

<img src="https://cdn.example.com/[email protected]"
     width="180" height="60" alt="J-A-B"
     style="display:block;width:180px;height:60px;border:0;">

Missing display:block is the classic cause of mysterious white gaps under images in Outlook.

Web-safe fonts: what actually survives

Custom web fonts loaded with @font-face work in Apple Mail and a few others, but they are ignored by Outlook for Windows and by Gmail. If your brand typeface is a licensed web font, treat it as a bonus, never as the base. Build with a web-safe stack and accept the fallback.

Font stack	Style	Best for
Arial, Helvetica, sans-serif	Neutral sans	The safest default, renders everywhere
Helvetica, Arial, sans-serif	Slightly tighter sans	Design and creative brands
Verdana, Geneva, sans-serif	Wide, very legible sans	Small text sizes and older audiences
Tahoma, Verdana, sans-serif	Compact sans	Dense signatures with many lines
Georgia, Times, serif	Warm serif	Law, finance, consulting, publishing
Trebuchet MS, Tahoma, sans-serif	Friendly sans	Education, non profit, healthcare
Courier New, monospace	Monospace	Developer and tech teams only, used sparingly

Type sizes and spacing that read well

1. Name: 15 to 17 px, bold, brand color or near black.
2. Job title and company: 12 to 13 px, regular weight.
3. Contact details: 12 to 13 px. Never go below 11 px, and never below 12 px if your audience skews older.
4. Legal disclaimer: 9 to 10 px, gray, clearly separated.
5. Line height: 1.4 to 1.5 (so 18 px for 13 px text). Set it in pixels, because Outlook handles unitless values poorly.
6. Colors: keep body text at a contrast ratio of at least 4.5:1. Light gray on white is the most common accessibility failure in signature design.

One more rule that saves you from Outlook’s habit of adding phantom spacing: apply the font-family, font-size and line-height inline on every single <td>, not once on a wrapper. Inheritance is unreliable in Word based rendering.

Logo file weight and format

Signatures are attached to every message a person sends. A 400 KB logo multiplied by 20,000 emails per year per employee is a real cost in bandwidth, mailbox quota and spam scoring.

• Logo: under 20 KB, ideally under 10 KB.
• Headshot: under 30 KB.
• Each social icon: under 2 KB.
• Total signature images: under 50 KB, hard ceiling 100 KB.

Which format to use

Format	Support	Use it for
PNG-8 / PNG-24	Universal	Logos, icons, anything needing transparency
JPEG	Universal	Photos and headshots, quality 70 to 80
GIF	Universal (static frame in old Outlook)	Only if you truly need animation, first frame must stand alone
SVG	Blocked or stripped almost everywhere	Never use in email
WebP / AVIF	Inconsistent across clients	Avoid, or serve with a PNG fallback

Transparency warning: a white logo on a transparent background vanishes in light mode, and a dark logo on transparency vanishes in dark mode. Either sit the logo on a solid background color inside its table cell, or use a version that reads on both.

Hosted images beat embedded images. Here is why

This is the decision that determines whether your carefully sized logo shows up at all. There are three ways to get an image into a signature.

1. Base64 / inline data URI

The image is encoded directly into the HTML. It sounds elegant and it fails in practice: Outlook for Windows and Gmail both refuse to render data URI images. Recipients see nothing or a broken placeholder. Base64 also inflates the HTML size by about 33% and raises spam filter suspicion. Avoid it.

2. Embedded CID attachment

The image travels with the message and is referenced with cid:. It renders reliably in Outlook and shows even when remote images are blocked, but it comes with real drawbacks:

• The message carries a paperclip icon, so recipients think there is a document attached.
• Every reply in a long thread can re-attach the images, bloating the thread.
• Weight is added to every message, forever.
• You cannot update the logo after the fact.
• Webmail clients sometimes list the images as separate downloadable attachments.

3. Hosted image on your own server or CDN (recommended)

The image lives at a stable HTTPS URL and is pulled on open. This is the approach used by every serious signature management platform.

• Zero added weight per message, no fake paperclip icon.
• Central updates: rebrand, change a banner, or fix a typo by replacing one file. Every signature already sent and every new one updates instantly.
• Cached by the client after first load.
• Only real downside: images are hidden until the recipient allows remote content, which is exactly why alt text and a text based fallback matter.

Criterion	Hosted URL	CID attachment	Base64
Outlook Windows	Yes (after allowing images)	Yes	No
Gmail web and app	Yes	Yes, shown as attachment	No
Adds message weight	No	Yes	Yes, plus 33%
Updatable after sending	Yes	No	No
Paperclip confusion	No	Yes	No

Hosting checklist

1. Serve over HTTPS with a valid certificate. Mixed content gets blocked.
2. Use a permanent path such as /assets/signatures/logo-180.png and never rename it.
3. Set long cache headers, and version the filename when the artwork genuinely changes.
4. Do not host on Google Drive, Dropbox share links, WeTransfer or a social media CDN. Those URLs expire or redirect.
5. Always add meaningful alt text, for example alt=”J-A-B logo”, so blocked images still communicate.
6. Keep the essential information (name, title, phone, email) as real HTML text, never inside the image.

Markup rules for Outlook and Gmail

Modern CSS is where most signatures die. The safe build looks old fashioned and works everywhere.

• Use nested tables with role="presentation", cellpadding="0", cellspacing="0", border="0". No flexbox, no grid, no floats.
• Inline every style. Gmail strips <style> blocks in many contexts, and signature editors strip them almost always.
• Spacing via cell padding or empty spacer cells with fixed height. Margins are unreliable in Outlook.
• No background images and no CSS shadows or gradients. Outlook ignores or mangles them.
• Set explicit widths on tables and cells in pixels, not percentages, for a signature.
• Style links explicitly. Add color and text-decoration inline, otherwise clients recolor phone numbers and addresses into blue or purple auto links.
• Keep the HTML under 102 KB to avoid Gmail clipping the message and hiding your signature behind a “view entire message” link.
• Avoid custom rounded shapes made with border-radius on images if Outlook support matters: it renders them square.

Dark mode without surprises

Many clients invert colors automatically. Practical defenses:

• Use near black (#1a1a1a) instead of pure black, and off white instead of pure white.
• Give logos a small solid padding area in a color that works on both light and dark surfaces.
• Test with icons that have a light outline so they do not disappear on a dark background.

Mobile behaviour

More than half of your recipients read on a phone, and media queries usually get stripped from signatures. So design a layout that is already narrow:

1. Single column, or a two column layout no wider than 450 px.
2. Tap targets at least 44 px tall for phone numbers and social icons.
3. Make the phone number a real tel: link and the address a mailto: link.
4. Never rely on a 600 px banner being fully visible.

Common mistakes to avoid

• Exporting the whole signature as one image. Nothing is clickable, nothing is searchable, blocked images leave a blank rectangle, and spam filters dislike image only content.
• Too much information. Name, title, company, one phone number, website, and up to four social icons. Everything else is noise.
• Quotes, awards badges and “think before you print” lines stacked on top of a legal disclaimer. Pick one optional element, not four.
• Six different colors and three fonts. Two fonts maximum, two brand colors plus a neutral.
• Copy pasting from Word or Google Docs into the signature editor, which injects unusable markup and mso styles.
• Inconsistent signatures across a team. Ship a template and lock the variable fields.

Pre launch testing checklist

1. Send to Outlook for Windows desktop (the strictest renderer), Outlook web, and the new Outlook app.
2. Send to Gmail web, Gmail iOS and Gmail Android.
3. Send to Apple Mail on macOS and iOS.
4. Test with remote images blocked and confirm the signature still reads.
5. Test in dark mode.
6. Reply and forward three times, then check the signature has not stretched, duplicated, or lost its images.
7. Click every link, including the phone number, on a real phone.
8. Check the total added weight of a plain message with the signature attached.

A quick reference summary

• Width 320 to 600 px, height under 200 px.
• Logo 120 to 200 px wide, exported at 2x, under 20 KB.
• Social icons 16 to 24 px, four maximum.
• Web-safe font stack only, 12 to 13 px body, 15 to 17 px name, line-height in pixels.
• Total image weight under 50 KB, PNG for logos, JPEG for photos, never SVG.
• Host images on your own HTTPS domain, add alt text, keep key details as live text.
• Tables plus inline CSS, no flexbox, no background images, no data URIs.

Get those numbers right once, build the template as reusable HTML, and your email signature design will hold up across every client your recipients use, on every device, for years. If you would rather hand the whole thing over, our team at j-a-b.net builds and tests brand consistent signature templates for full organisations.

FAQ

How do I design a signature in email?

Start with the content hierarchy (name, title, company, one phone number, website), lay it out in a table based HTML block no wider than 600 px, apply a web-safe font stack with inline CSS, add a hosted logo of 120 to 200 px, then paste the finished HTML into your mail client’s signature editor. Test in Outlook and Gmail before rolling it out.

What is the best email signature size?

320 to 600 pixels wide and under 200 pixels tall, with total image weight under 50 KB. Narrower is safer because reading panes and phone screens are narrow.

What is a common mistake to avoid in an email signature?

Turning the signature into a single flat image. It breaks the moment images are blocked, removes all clickable links, hurts accessibility, and increases the chance of landing in spam. Keep text as text and use images only for the logo, headshot and icons.

Should I embed or link images in my email signature?

Link to hosted images on your own HTTPS domain. Embedded CID attachments add weight to every message and show a misleading paperclip, while base64 data URIs simply do not render in Outlook for Windows or Gmail.

Can I use my brand’s custom font in an email signature?

Only as a progressive enhancement. Outlook for Windows and Gmail do not load custom web fonts, so define a fallback stack such as Arial, Helvetica, sans-serif and accept that most recipients will see the fallback. If the brand font is critical, keep it to the logo image. A comparable breakdown sits on canva.com.

Are free email signature generators good enough?

They are fine for a single freelancer who needs something clean quickly. For a team, a generator usually creates inconsistent output, hosts your logo on a third party domain you do not control, and cannot be updated centrally. A custom coded template solves all three.

How many social icons should a signature have?

Up to four, and only the profiles you actually maintain. Size them at 16 to 24 px, keep them the same visual weight, and link them to the company profiles rather than personal accounts unless there is a reason not to. Related reading: 20 best email signature design examples for 2026.