If you’ve ever been tasked with creating a good email signature design, you would know its a difficult thing to get right, and you can often spend hours banging your head against a desk trying to get it looking perfect.
We make email signatures for a living, and see hundreds of our customers’ email signatures every single day. We see the good, the bad, and the ugly ones. After many years of working with email signatures, we started documenting design trends that we noticed in all the really good looking email signatures – and will share them with you today.
Whether you’re a web designer, marketing company, or you just really want to know all the in’s and out’s of designing the perfect email signature for yourself, stick around to find out what’s involved.
Are you using a generic font, and is there a fallback font?
When we say generic font, we don’t mean “boring font”. We mean fonts that are widely installed on all computers. If you use a font which is only installed on your computer, and your recipient doesn’t have it installed, then your email signature won’t display correctly on your recipient’s computer.
Which brings us to the fallback font. Fallback fonts are used when your primary font isn’t available on your recipient’s computer. If you want to use a fancy (non-generic) font in your email signature, ensure you have a fallback font specified.
Here’s a list of generic fonts which are safe to use in your email signature:
- Arial Black
- Comic Sans
- Courier New
- Times New Roman
Use font sizes and styles to show important parts of the signature
Experiment with font sizes and styles to highlight the important parts of the email signature, like your name or position.
Don’t mix serif and sans-serif fonts
It just doesn’t look right…trust us.
Only use 1 or 2 different fonts
Similar to colors, limit yourself to only using 1 font. If you have to use a second font, use it on a separate section of the signature, such as the disclaimer or banner.
If your signature is too wide, you may have to scroll sideways to see the whole signature on mobile phones.
Using a vertical layout works better for mobile phones.
Will your email signature work in plain text format?
A lot of email clients are set to use plain text messaging format when replying to or forwarding emails.
If your email signature is converted to plain text format when someone replies to your email, how will it look?
Which email client will the email signature be installed on?
All (yes, we mean all) email clients display email signatures differently because they have different HTML rendering engines. This is why it’s important to know what email software you’re using and how it will display your email signature.
Is the layout too wide, big or complex?
Having a layout which is too wide will mean that mobile users (or any device with a smaller screen) won’t see your email signature correctly.
Also, a layout which is too tall or has too many fields will cause unnecessary bloating. Only include information that your recipients absolutely need to know. The KISS principle applies here.
Will everyone’s signatures have the same layout, or will some be different?
It’s very common for CEO’s to say “but I want this picture of a cat in my email signature”. Jokes aside, some staff members may have a need to add other sections to their email signature.
For example, if you have an outbound sales team which emails prospective customers all day, it would be silly if they didn’t have a banner at the bottom of their email signature offering a 10% discount along with a CTA (Call-To-Action).
If you needed to add more sections such as a banner, an additional phone number or address to your email signature, will it still look good?
Have you considered the location of social icons, banners, and disclaimers?
There are many ways to design an email signature for maximum effectiveness.
Before you settle on a design, try changing the location of the sections to see what looks right.
Don’t add too much info
Looking at an email signature that has a million different bits of information doesn’t look good. Does your recipient really need to know your favorite jazz band? Make it short and neat, with just the right amount of information.
Keep future layout changes in mind
Will the signature still look good when you have to add a second office location or an additional phone number to it?
Don’t use background colors
Nothing worse than an email signature with a black background that is sent inside an email with a white background. It’s not a good look and should be avoided at all costs.
Use company colors or similar colors to your logo
Use colors which are complementary to your company colors or logo. Some colors simply don’t match.
Which brings us to the next point…
Only use 1 or 2 colors
Don’t be that person who has a “rainbow signature” with all imaginable colors making their way to your signature.
Don’t use images with transparent backgrounds
Sometimes, images with transparent backgrounds will be converted to show a black background instead of maintaining transparency.
Save yourself the embarrassment and only use images with a white background.
Don’t use animations
Using animations in email signatures not only looks unprofessional but causes the email signature size to bloat, which can take up valuable space on the recipients (and yours) email servers.
In addition, a lot of mail clients don’t support animated GIF’s and will display them as a still image, which might make the email signature look broken to the recipient.
Optimize your images
Using lossless image compression is such an easy way to reduce the file size of an image by up to 80%. If you’re using a logo, or face shot in your email signature, please compress it first using a service like TinyPNG.
Spacing / Alignment
Will spacing differences affect the look?
Some email providers (eg. Gmail) will add or remove spacing between HTML tables in the email signature. If you were to adjust the spacing between the logo and contact information, will it still look acceptable?
Email signatures should always be left aligned
All emails are left aligned, so inserting an email signature at the bottom of the email that is center aligned doesn’t look right.
Check spaces between sections
Ensure you have similar spacing between all sections. For example, the aim is to have the same spacing between the logo and contact info, and the contact info and the disclaimer.
Will you have a separator in your email signature design?
Separators can make it easy to find and read the information that your recipient wants.
Usually, separators are used to separate images and text, but you can experiment with the design to see what works for you.
Make the spacing big enough so the signature doesn’t look squashed
A good email signature design is all about spacing. The idea is to adjust the spacing so everything is distinguishable and easy to read.
How to Design the Perfect Email Signature
Know your filetypes
Saving a file as a JPG or GIF could mean you lose some flexibility if you want to change anything in the future. It goes without saying, that you should always save a copy of the image in the native photo software format. For example, for Photoshop, save it as PSD. This will ensure you can go back and change anything you need in the future, without losing any data.
For email signature designs, we recommend saving the final design as a PNG format. This is because PNG supports alpha channels and transparency, whereas JPG or GIF don’t.
Don’t use destructive patterns
This means you should be able to reverse every change without losing any information (without using the Undo function). This follows on from our last point, that every change you make should have its own layer.
Ensure you use layers for every change you make in your photo editing software.
Layers make it easy to change things around, such as moving the social icons or putting one image on top of another.