Why Email Signature Design Follows Its Own Rules
Designing an email signature is not the same as designing a web page. Email clients are conservative, inconsistent, and quick to strip out anything modern. A layout that looks perfect in your browser can collapse the moment it reaches Outlook or a phone. Good email signature design starts from that reality: build within the constraints, and your signature looks right everywhere. Ignore them, and it breaks in the exact places that matter most.
This guide covers the dimensions, fonts, colors, and compatibility rules that keep a signature clean, plus how to test it before you rely on it.
Optimal Email Signature Dimensions
Getting the email signature size right is the single biggest factor in how it renders across devices. Use these dimensions as your baseline:
| Element | Recommended size |
|---|---|
| Overall width | 600px maximum |
| Overall height | 200px maximum |
| Logo | 80–120px wide, 40–60px tall |
| Social icons | 20–24px squares |
| Banner image (optional) | 600 × 80px |
A signature wider than 600px risks breaking on mobile, and one taller than roughly 200px starts getting clipped in threaded conversation views. Staying inside these email signature dimensions keeps the whole block visible in the situations where people actually read it.
Font Best Practices
- Family: Stick to web-safe fonts — Arial, Helvetica, Georgia, or Verdana. Custom web fonts rarely load in email.
- Size: 12–14px for body text, 16–18px for your name.
- Weight: Bold for your name, regular for everything else. That single contrast creates hierarchy.
- Color: Dark gray (#333) reads more comfortably than pure black; reserve your brand color for accents.
Color Usage
Restraint is the whole game with color. A few email signature design ideas that hold up:
- Two or three colors, maximum. A primary brand color, a text color, and maybe one secondary.
- High contrast. Dark text on a light background stays legible in every client.
- Consistency. Match your company's brand guidelines so your signature feels like part of the same family as your site and cards.
- Accessibility. Aim for at least a 4.5:1 contrast ratio (WCAG AA) so the text is readable for everyone.
HTML Rules Email Clients Actually Respect
Email clients are not browsers. They strip most CSS and render with limited support, so the safe list is short.
Do use:
- Inline styles
- Table-based layouts
- Web-safe fonts
- Alt text on every image
Don't use:
- CSS classes or external stylesheets
- Flexbox or grid
- Background images
- JavaScript
If that sounds like a lot to manage by hand, it is — which is why generating the HTML instead of writing it saves real time. The email signature generator outputs code that already follows every rule on this list.
Mobile Compatibility
More than half of all email is opened on a phone, so mobile isn't an edge case — it's the main case. Your signature should:
- Stack gracefully on narrow screens.
- Use tap targets of at least 44 × 44px for any linked icon.
- Keep text readable without pinch-zooming.
- Never exceed the viewport width.
These are among the most practical email signature best practices because they affect the majority of your readers directly.
Testing Your Signature Before You Trust It
Never assume. Send a test email to yourself and check it in the places your recipients live:
- Gmail on the web.
- Gmail in the mobile app.
- Outlook on the web.
- Apple Mail on macOS.
- Dark mode in at least one of the above.
Dark mode is the sneaky one — a signature with dark text on a transparent background can vanish when a client inverts the colors. Testing catches it before your contacts do.
Putting It Together With Free Templates
You don't have to hold all of this in your head. TooStamply's six templates — Modern, Classic, Minimal, Executive, Creative, and Bold — are built to these specs: correctly sized, mobile-friendly, and output as clean HTML that works across clients. Pick one, drop in your details, adjust the accent color, and you've applied every rule in this guide without touching code. For finished layouts sorted by role, browse the professional email signature examples.
Related Guides
- Free email signature generator — create a signature with the right dimensions.
- Professional email signature examples — examples by role and industry.
- Free HTML email signature templates — ready-to-use HTML templates.
- How to add a signature in Outlook — Outlook desktop and web setup.
- How to add a signature in Apple Mail — macOS setup guide.
Frequently Asked Questions
What is the ideal email signature size?
Keep it within 600px wide and roughly 200px tall. That width fits mobile screens, and that height avoids getting clipped in threaded email views.
What font size should an email signature use?
Use 12–14px for body text and 16–18px for your name. Anything smaller is hard to read on mobile, and anything much larger dominates the message.
How many colors should an email signature have?
Two or three at most: a text color, your brand accent, and optionally one secondary color. More than that starts to look chaotic and off-brand.
Why does my signature look broken in Outlook?
Outlook renders HTML conservatively and ignores modern CSS like flexbox and grid. Table-based layouts with inline styles — which TooStamply generates — are the reliable approach.
Do I need to test my signature in dark mode?
Yes. Dark mode can invert colors and hide dark text on transparent backgrounds. A quick test in one dark-mode client catches the problem early.
Ready to apply these rules the easy way? Open the free email signature generator and build a properly sized, mobile-ready signature in minutes.