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.

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
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.

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.

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

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.

complicated
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?

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…

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.

Images

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.

email signature image transparency
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.

email-signature-design-left-alignment
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.

email-signature-design-separator
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

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 are available to use from our email signature generator.