Email Signature Design – Best Practices and Examples

email signature design

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.


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
email signature fonts

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.

email signature fonts serif sans serif

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.


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.

email signature too wide mobile

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?

email signature html plain text

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.

email clients


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.

email signature layout

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…

email signature design colors

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.


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.

email signature design photo editing software

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.

email signature design filetypes

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.

email signature design use layers

Examples of Amazing Email Signature Designs

All these layouts (and many more) are available to use from our email signature generator.