Email Signature Design
Good design isn't about being flashy. It's about being clear. The best email signatures you've ever seen probably didn't stand out — they just felt right. This guide covers everything that makes that happen.
Design My Signature — FreeNo account needed.
Email signature design principles that actually matter
Email signatures are small. The constraints are real. You have a few lines of text and maybe an image to communicate who you are and how to reach you. These principles are what separate a signature that works from one that gets in the way.
Hierarchy
Your name should be the most visually prominent element. Job title second. Everything else — phone, links, company — should be smaller or lighter. In practice this means: name at 14–16px and bold, title and company at 13px in a medium weight, contact details at 12px in a muted gray. This is how readers naturally scan from most to least important.
Whitespace
Line height of 1.4–1.6 makes text readable without the signature feeling crammed. Add a small amount of space (8–12px) between logical groups — for example, between your name/title block and your contact details block. Whitespace is what makes a signature feel organized rather than dense.
Alignment
Left-align everything unless you're using a centered single-column layout. Mixed alignments — some centered, some left — look accidental. If you have a photo or logo on the left with text on the right, make sure the text column starts at a consistent horizontal position across all rows.
Consistency
Use the same font throughout. The same font size for the same hierarchy level. The same color for all links. Mixing fonts, sizes, or link colors inside a single signature creates visual noise that reads as sloppiness even if the reader can't articulate why.
Choosing the right template for your context
NeatStamp's templates are built around these principles. Here's what each style is best suited for — and when you should pick one over the others.
Minimal
Most versatileA single column. Name, title, contact details, optional social links. No photo, no logo. Pure text with one accent color.
Best for: Lawyers, accountants, engineers, consultants, anyone in a formal or technical context. Works equally well whether you're emailing a client for the first time or replying to an internal thread.
With headshot
Relationship-driven rolesTwo-column layout: headshot on the left (80×80px), name, title, and contact details on the right.
Best for: Sales, real estate, coaching, recruiting, financial advisors — any role where putting a face to a name matters. See the professional email signature guide for headshot sizing best practices.
With logo
Brand-forwardCompany logo positioned above or beside the contact details. Works best with a horizontal logo under 150px wide.
Best for: Small business owners, agency staff, startup founders — anyone where the brand is still being built and every touchpoint matters. See the email signature with logo guide for logo file format and sizing guidance.
With CTA
Sales & outreachIncludes a styled call-to-action line below the contact details — a booking link, a resource, or a product page.
Best for: Sales reps, consultants, and anyone who sends a high volume of outbound email. Use a single, specific CTA — not multiple. "Book a 20-minute call →" with a Calendly link is a good example.
Browse all templates in the NeatStamp template gallery. Each one is table-based and tested in Outlook.
Colors in email signatures — what works and what doesn't
The rule is simple: two colors. One for accents, one for body text. Here's how that plays out in practice.
Proven combinations
Color psychology basics (applied to signatures)
Blue reads as trustworthy and stable — it's the most common choice in professional contexts for a reason. Green signals growth or health. Gray and black are authoritative and timeless. Red draws attention but is also associated with alerts and errors — use it carefully. Yellow and orange can work for creative contexts but often look casual.
If your company has brand colors, match them exactly. Use the hex code from your brand guide, not an approximation. Being slightly off (#2464eb instead of #2563eb) is visible to anyone who works on brand materials and gives the impression of carelessness. If you're not sure what your brand color is, ask your marketing team for the hex code.
Typography for email signatures
Typography is where most people's design instincts work against them. You want to use a nice font. But email isn't a webpage — it doesn't load fonts from Google Fonts. Here's the reality.
Why custom fonts break in email
Custom fonts require the email client to fetch the font file from an external server. Gmail, Outlook, and most corporate email clients either block external requests for security reasons or simply don't support @font-face declarations. When the font doesn't load, the client substitutes a system font — usually Arial or Times New Roman — at whatever default size it feels like. Your carefully sized 15px Inter suddenly becomes 16px Arial and the spacing shifts. Table cells that fit at the original size now overflow.
Web-safe fonts that work in every email client
Arial / Helvetica
Clean, neutral, modern-ish
Best for: Default choice for most professional contexts
Arial, Helvetica, sans-serif
Verdana
Wider letterforms, very readable at small sizes
Best for: Good for small text — phone numbers, disclaimers
Verdana, Geneva, sans-serif
Georgia
Serif — warm, editorial, slightly formal
Best for: Law, finance, publishing — traditional industries
Georgia, 'Times New Roman', serif
Trebuchet MS
Slightly more personality than Arial
Best for: Marketing, creative, startup contexts
Trebuchet MS, Helvetica, sans-serif
Font sizes
Image sizing and placement — exact dimensions
Image handling is one of the trickier parts of email signature design because Outlook and Gmail handle them differently. Here are the exact numbers I recommend.
| Image type | Display size | Upload size (2×) | Max file size | Format |
|---|---|---|---|---|
| Headshot | 80×80px | 160×160px | 80KB | JPEG or PNG |
| Company logo (inline) | max 150px wide | max 300px wide | 60KB | PNG (transparent) |
| Banner (below signature) | max 500px wide, max 150px tall | max 1000px wide | 100KB | JPEG or PNG |
DPI and Outlook — the retina problem
Outlook on Windows doesn't automatically adjust images for high-DPI displays. An image uploaded at exactly 80×80px will look blurry on a retina screen because Outlook displays it at 80×80px physical pixels without upscaling. The fix: upload at 160×160px and constrain the display size using HTML attributes — width="80" height="80" directly on the <img> tag, not in CSS. Outlook respects HTML attributes; it ignores CSS properties on images.
For full guidance on using a logo specifically, see the email signature with logo guide.
Design mistakes to avoid
These come up constantly. Some are obvious in hindsight, some less so.
Using CSS floats or flexbox for layout
Outlook Desktop ignores CSS layout properties. A signature built with float: left for the photo and a div for the text will look correct in Gmail and completely broken in Outlook — the photo and text will stack vertically instead of sitting side by side. Use HTML tables for any multi-column layout.
Inline images vs. linked images — and getting it wrong
Images can be embedded inline (base64 encoded directly in the HTML) or linked from a URL. Inline images are never blocked by corporate firewalls. Linked images can be blocked. However, inline images significantly increase email file size. NeatStamp links to hosted images, which works fine for most use cases — but if you're emailing very security-conscious corporate recipients, test it first.
Absolute pixel padding in Outlook
Outlook adds extra padding to table cells in ways that differ from other clients. If you're adding padding in CSS, test in Outlook specifically. The common workaround is to use empty spacer cells (a transparent 1×1 pixel image with specified width/height) instead of CSS padding for critical spacing.
Three or more fonts
I've seen signatures with one font for the name, a different one for the title, and a third for the contact details. Even if all three are web-safe, using multiple fonts in a signature reads as inconsistent and undesigned. Pick one.
Oversized logos
A logo wider than 150px in a signature typically looks like an advertisement. Keep logos small and proportional to the text. See the exact dimensions in the image table above.
Wrapping text issues on Outlook 365
Outlook 365 (the web version) and Outlook Desktop have slightly different font-size handling. Text that sits at 12px can sometimes look too small in Outlook 365 if the client's zoom level is set above 100%. Using 13px as a minimum for all visible text prevents most of these issues.
Mobile-responsive signature design
More than half of email opens happen on mobile. Your signature will be seen on a 375px-wide screen frequently. Here's what that means in practice.
What holds up on mobile
- ✓Single-column layouts — they simply scale down
- ✓Signatures constrained to max 500px wide
- ✓Font sizes of 13px minimum — readable without zooming
- ✓Links with enough tap target area (at least 44×44px)
What breaks on mobile
- ✗Two-column table layouts — the columns stack or overflow
- ✗Wide banner images that force horizontal scrolling
- ✗Font sizes below 12px — unreadable without pinch-zoom
- ✗Fixed-width tables wider than 480px
The biggest design compromise in email signatures is the two-column layout (photo left, text right). It looks great on desktop. On mobile, the two columns often stack — the photo appears above the text, and the visual hierarchy breaks. This isn't fixable with CSS media queries in Outlook. The honest answer is that single-column layouts are safer for most users.
Always test your signature by sending yourself a test email and checking it on your phone before rolling it out. What looks right in the editor doesn't always match what your recipients see.
Related guides
Frequently asked questions
What is the ideal width for an email signature?
Between 500px and 600px. Most email clients display content at roughly 600px wide. If your signature is wider than that, it will either get clipped or force horizontal scrolling on mobile. NeatStamp's templates are all constrained to 500px to give a comfortable margin.
Can I use custom fonts in my email signature?
Not reliably. Custom fonts (including Google Fonts) require a font load from an external server, and most email clients block external resources or simply ignore font-face declarations. When the font doesn't load, the email client substitutes a system default — often at a slightly different size and spacing. Use Arial, Verdana, Georgia, Trebuchet MS, or Times New Roman.
Why does my signature look different in Outlook than in Gmail?
Outlook Desktop uses Microsoft Word's rendering engine, which ignores most CSS. Flexbox, grid, and floats don't work. Margins, padding, and line-height behave differently. The only reliable layout approach for Outlook is HTML tables. If your signature was built with modern CSS, it may look fine in Gmail and broken in Outlook.
What file format should I use for my logo?
PNG with a transparent background is best. It works on both light and dark email themes and doesn't show a white rectangle around the logo. Keep the file size under 100KB. Avoid SVG — Outlook doesn't render SVG images.
How do I make my signature look good on mobile?
Use a single-column layout. Two-column designs (photo on the left, text on the right) often collapse or wrap poorly on small screens. Keep total content width under 500px. Avoid very small text — 12px is the minimum for comfortable mobile reading. Test by sending yourself a test email and viewing it on your phone.
How many colors should an email signature use?
Two at most. One primary color (typically your brand color, used for your name, links, or dividers) and dark gray or black for body text. Three or more colors makes the signature feel cluttered. If you're unsure, monochrome — black name, gray secondary text — always looks clean.
What size should a headshot be in an email signature?
Display it at 80×80px. Upload the actual image file at 160×160px (2× the display size) for sharp rendering on retina screens. Use the HTML width and height attributes to constrain the display size rather than CSS, as Outlook ignores CSS sizing on images.
Should I include a banner image in my email signature?
Only if it serves a specific purpose — a promotion, an event, or a clear CTA. Decorative banners add weight to every email you send and are often blocked by corporate email clients that strip images. If you use one, keep it under 600px wide, under 150px tall, and under 100KB.
Ready to put this into practice?
NeatStamp's templates apply all of these principles out of the box. Free, no account, works in Gmail, Outlook, and Apple Mail.
Design My Signature — Free