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.
Planning Your Email Signature Design
This is the most important part of this article…by far. Before you create your email signature, spend a bit of time planning the design.
Fonts
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
- Arial Black
- Calibri
- Comic Sans
- Gadget
- Helvetica
- Palatino
- Tahoma
- Verdana
- Trebuchet
- Courier New
- Lucida
- Times New Roman
- Georgia
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.
Compatibility
How will the signature look on mobile devices?
With over 80% of people regularly using their smartphone to check emails, you may want to pay attention to this one.
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.
Layout
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?
Colors
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…
Use a color wheel
Find the complementary colors that match using a color wheel like this one.
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.
Images
Be cautious when using GIF animations
Using animations in email signatures can look unprofessional and cause the email signature size to bloat, which can take up valuable space on the recipient’s (and yours) email servers.
In addition, a lot of mail clients don’t support animated GIFs 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.
Contact Information
The fields you include in your email signature is completely up to you. However, you have to be careful not to over-do it and include details that make the email signature look messy and overcrowded.
These are the most common fields in an email signature:
- Full Name - You should use your full name, including your middle name. Don't use nicknames.
- Position - The position/job title you hold at your company.
- Company - The name of your company.
- Qualifications (optional) - Any qualifications you may have, such as BSc, BEng, CPA, etc. Adding qualifications to your email signature increases your credibility.
- Company Logo or Photo of Yourself - Make sure the company logo or your photo is good quality and you don't use blurry images. You should also ensure the images are compressed so their size isn't too large.
- Phone Numbers - Include your mobile/cell as well as your landline number. Use a click-to-call link for all phone numbers.
- Office Address - Include your office address, or multiple addresses if you have branches. Add a Google Maps link for your address.
- Website - If you have a website, including it in your email signature is a must! Add a hyperlink to it for easy access.
- Email Address (optional) - You should include your email address. However, this is optional as your email address is already available to the recipient if you send them an email.
- Social Media Icons (optional) - Linking to your social pages such as Facebook, LinkedIn, and Twitter.
- Banner (optional) - This is the perfect opportunity to insert a banner and let your recipients know about any events, promotional sales, discounts, etc.
- Disclaimer (optional) - Some companies still prefer to use disclaimers as they set some ground rules for the fair use of emails.
This doesn’t mean you have to use all of these fields, but it’s a good starting point to include at least your name, position, and company name in your email signature.
How to Design the Perfect Email Signature
Use a good photo editing program
We cannot stress this enough! Use a good photo editing program that you’re familiar with, such as Adobe Photoshop (what we use) or Gimp (which is free). This will make it so much easier to compile the perfect email signature design.
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.
Use layers
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.
Examples of Amazing Email Signature Designs
All these layouts (and many more) are available to use from our email signature generator.
