Good email signature design is a hierarchy problem, not a decoration problem. The reader has to find your name first, your title second and one way to reach you third, in under three seconds, in a window that may be dark, narrow or missing its pictures. This page gives a one-page design spec you can copy, then applies it to two redesigns.
The numbers below are email signature design guidance. Where a number comes from a vendor or a standard we say so, and where it is our own recommendation or a value from emailfooter’s engine we say that too. The vendor facts come from Google’s Gmail help, read in October 2026, and from the W3C’s contrast criterion.
The email signature design spec in six lines
- Width: 600 pixels at most.
- Grid: one image column and one text column.
- Type: one font family, name at 15 to 16 pixels bold, everything else 13.
- Spacing: 6 pixels between name and details, 12 before icons, 14 before a legal line.
- Colour: one accent plus neutrals, body text at 4.5 to 1 contrast or better.
- Hierarchy: four levels: name, title, contact, small print.
The email signature design spec
| Property | Spec | Source or reason |
|---|---|---|
| Overall width | 600 px or less | Our rule of thumb. It fits a desktop reading pane and shrinks on a phone. |
| Columns | Image column 80 to 120 px, then a gap of 12 to 24 px, then text | emailfooter’s layouts use photo sizes of 80 to 96 px. |
| Font | One family, with fallbacks: Arial, Helvetica, sans-serif | If the font is missing the app substitutes one, and your spacing shifts. |
| Name | 15 to 16 px, bold | Largest thing in the block. |
| Title | 13 px, semibold or in the accent colour | Second level. |
| Contact lines | 13 px, regular, 20 px line height | emailfooter’s default body size is 13 px and allows 11 to 18. |
| Small print | 10 to 11 px, lighter | emailfooter sets legal text three pixels below body size, minimum 10. |
| Spacing | 6 px under the name block, 12 px before icons, 14 px before a legal line | Values taken from emailfooter’s output. |
| Icons | 22 to 24 px, a maximum of three | Taller than text, short enough to sit on one line. |
| Logo | 120 to 200 px wide as displayed, saved at twice that | See the size guide. |
| Colours | One accent, one text colour, one grey for dividers | Everything else is noise. |
| Length | Four to seven lines | If it is taller than the reply, cut. Google also caps a Gmail signature at 10,000 characters, images included. |
Layout and email signature design: where things go
Most layouts are variations of one idea: an image column next to a text column. Choose where the image goes and let the rest follow.
- Logo on the left, text on the right. The standard, and the best default for a company.
- Photo on the left, logo above or below the text. Good for client-facing roles, but it adds height.
- Logo above everything, text centred. Suits studios and consumer brands. Keep it narrow.
- No image. The safest layout. The hierarchy then relies on size and colour only.
Never put an image in the middle of a row of text. Narrow screens break there first.
Build the email signature design so it survives
The design only helps if the mail app keeps it. Gmail documents the CSS it supports: class, element and ID selectors, a list of properties, and media queries limited to width, orientation and resolution. Its list has no position, no flexbox or grid properties and no transform (Gmail CSS support, updated by Google on 15 September 2026).
Microsoft’s archived reference for the Word-based engine in Outlook for Windows lists float, position and max-width as unsupported (Microsoft’s page, which describes Outlook 2007, so test current versions yourself). The safe design therefore uses tables, set widths and inline styles. Our HTML email signature article goes into the code.
Colour and contrast in email signature design
Use one accent. It marks the title line, the divider and the icons, and nothing else. For text, the W3C asks for a contrast ratio of at least 4.5 to 1 for ordinary text and 3 to 1 for large text, defined as 18 point or 14 point bold (WCAG 1.4.3). The same page exempts logos and brand names. A 13 pixel title is ordinary text, so it needs 4.5 to 1.
We checked emailfooter’s own 24 colour themes with the WCAG formula, using the accent colour on a white background, because the title line is drawn in the accent. The result is a limit we should state plainly: 11 of the 24 fall below 4.5 to 1 on white for small text. They are Amber (3.0), Ember (3.6), Azure (4.2), Sky (2.8), Teal (3.9), Mint (3.2), Forest (4.4), Olive (3.8), Sand (3.2), Clay (3.9) and Copper (3.8).
The other 13, including Navy (11.1), Slate (6.1), Royal (5.7), Crimson (5.5) and Wine (9.1), pass. If your brand colour is on the failing list, you can set the colour roles yourself, or keep the accent for dividers and icons and make the title a darker shade. Some sample signatures on this site use themes from the failing list, so check your own before copying.
Body text deserves the same care. A mid-grey such as #4a5568 on white is about 7.5 to 1. Pale grey such as #aaaaaa is 2.3 to 1.
For dark backgrounds, check the accent against the dark background as well. That is its own subject, covered in email signature dark mode.
Two redesigns
The “before” versions are described, not drawn, because we are not going to mock up a real company’s signature. Each is a composite of common mistakes.
Redesign 1: the over-decorated sales signature
| Property | Before | After |
|---|---|---|
| Width | 680 px, with a banner | 600 px, no banner |
| Fonts | Three | One |
| Colours | Five, including a red name | One accent plus neutrals |
| Icons | Eight social icons | None |
| Lines | Eleven | Five |
| Contact | Four phone numbers | One direct number |
|
After: classic layout, one grey accent, one number, no icons. The company and person are made up.
Redesign 2: the cluttered consultancy signature
| Property | Before | After |
|---|---|---|
| Alignment | Centred text with a left-aligned logo | One left edge |
| Hierarchy | Every line bold | Bold only on the name |
| Title | In italics, light blue | Semibold in a dark accent |
| Legal line | The same size as the body | Smaller and lighter, below a rule |
| Image | One tall image of the whole signature | Real text with a small logo |
|
After: wide layout, one left edge, bold only on the name, legal line smaller and below a rule. The firm and person are made up.
The second “before” has a hidden cost. When a signature is a single picture, Microsoft’s page on message formats says plain text does not support showing pictures inside the message, and classic Outlook blocks automatic picture downloads by default (Microsoft Support). Keep the name and number as text.
Applying the spec across a team
A spec for email signature design is easy to write down and hard to keep. With emailfooter the company admin fixes the layout, colours and font once, and each employee edits only their own details, so no one can add a fourth font. The professional email signature examples article shows twelve finished signatures in this style.
Frequently asked questions
What makes a good email signature design?
A clear hierarchy (name, title, contact, small print), one accent colour, one font, a width of 600 pixels or less, and text for everything the reader needs.
How wide should an email signature be?
About 600 pixels or less. It is a rule of thumb, not a vendor limit.
How many colours should email signature design use?
One accent plus neutral text and divider colours. More than that reads as clutter.
Which font is best for email signature design?
A common one such as Arial or Helvetica, with fallbacks. If the reader’s device lacks your font, the app substitutes another.
Should email signature design include icons?
Only for networks you use for work, and no more than three. Give each a text alternative, since some apps block images.
Keep reading
- Email signature fonts: a safe list, fallbacks and a size scale: Email signature fonts compared: eight safe picks checked against Windows 11 and macOS font lists, the fallback stack each one uses, and a clear size scale.
- Email signature size: width, image size and character limits: What is the best email signature size? Recommended width, logo dimensions, image file weight and the character limits in Gmail, so your signature looks right.
- Professional email signature examples, annotated: what works and why: Twelve professional email signature examples, each annotated line by line so you can see what to copy and what to change for your own role.
Make every signature in your company match
emailfooter is a free WordPress plugin. You design the signature once, and each person adds their own details and installs it in their mail app. Prefer not to run a website? emailfooter Managed is the same software, hosted for you.