When you are designing and developing html email signature, there are a lot of factors that are out of your control. First there is the person who will use the signature, it might be you, or it might be your client, but someone will take the signature and paste it into an email client for it to be used. Then they will write an email with it and send it off to someone else, who will have a different email client that will interpret your email signature in a different way. All of this makes designing and developing email signatures a challenge.
Because of the variances in technology and email clients, there isn’t a standard when it comes to building an email signature. Everyone does things a little differently which can be confusing if you are just learning how to make one. Even those of us who have been building websites for years can be thrown off by some of the strange circumstances that can happen when designing an email signature.
Here is our best effort to answer questions when it comes to sizing things within an html email. If you have additional questions you need answers to, please let us know on our contact form and we would be happy to answer them and add them here.
What is the Best Width Size for an Email Signature?
You could use an email signature width of up to 600 pixels, but if possible we would recommend something more like 320 pixels.
For a long time the standard width for developing any kind of html email was 600px. This was during a time when you could basically guarantee that every screen was about 1024 pixels wide, and the email clients that everyone was using had some kind of sidebar that took up about 1/3 of the screen. This left about 600 pixels with a little bit of breathing room on each side. This standard is still an important one today, but it isn’t as cut and dry as it used to be for a few reasons:
- Big Monitors: Today’s desktops come in many sizes, and people don’t keep their windows full screen anymore. They can expand and shrink their windows at will. This means you have no idea how much room will actually be left to view your email. It could be around 600 pixels or it could be thousands. Because of this, many people choose the safe route of sticking to 600.
- Mobile: According to Hubspot, 40% of email opens are now on a mobile device. These devices are typically render emails smaller than 600 pixels, but the actual width can vary greatly. Many mobile email clients will shrink content from 600 to their screen size. This is partially good because it means that the signature may not appear broken, but it can also be bad because elements within the signature can become too tiny to read or be useful.
So in today’s world there isn’t always a clear answer for which to go with. In general, we would recommend keeping your signature smaller so that it appears nicely on both desktop and mobile devices. Especially with the prevalence of mobile email, this seems wise.
What is the Best Height for an Email Signature?
We recommend keeping your email signature height below 200px.
The beautiful thing about email as a format is that there is no height restriction. It won’t be a problem if you break this recommendation. That said, people can find really tall email signatures to be annoying as they are scrolling through an email chain trying to find the email they are looking for. Just be cognizant of that as you are designing an email signature for yourself or your clients.
What are the Correct Dimensions for a Logo or Image in an Email Signature?
We recommend a logo take up 150px - 300px of width, but be saved at 2x the resolution so 300px - 600px.
Including a logo or a photo in your email signature has been common practice for a long time. The question is always: what size should those images be? Give me a standard! Unfortunately, we have no such standard to quote here, but we can tell you what we found from our years of experience.
It obviously depends on the kind of image you are including. If its a logo then it may be long, or square, or tall. As such the image size will depend greatly on your image signature and it’s design.
The main thing to think about today is the quality of the image you are adding. If you put a 300px image into your email signature and view it on a mobile device, it will end up looking fuzzy. This is because that mobile devices screen is MUCH more high resolution that 300px across, so it is blowing up your image to 150% - 200% of what you put in there. Because of this we highly recommend that you save your image at double the size and then set the width and height attributes of the image to keep it to the size you want it to be seen at. This will make your logo look crystal clear on both desktops and mobile devices and help your organization look more professional.
What size should a banner be in an email signature?
We would recommend displaying these at or below 600px, but possibly be sized a little larger for quality, maybe around 900px.
Sometimes you may want to save out a banner that has some marketing language or a new deal your company is offering. All of what we’ve said about images above still applies in this example, but the main difference is that once you get to mobile in this situation, it will no longer appear at it’s given dimensions and will be scaled down to fit within the window it is given. This means that it may not be necessary to save it out at double the resolution because it may already be scaled down somewhat. Think about these banners like a billboard on the side of the road, don’t include too much text in them, just nicely sized headlines that are easy to read at any size they get scaled down to.
What file size can an image be in an email signature?
If at all possible, keep your image sizes below 15kb.
Having to download a huge image file every time you view someone’s email can be annoying. It slows down their email client and restricts them from doing what they need to do.
While we are on the subject, make sure that you are not including the images as an attachment within the email! Instead you should be uploading them to a web server somewhere and then linking to those files using an image tag in your html. Having someones logo attached to every one of their emails clogs up their email browser and makes it really hard to find your email when they are filtering by attachments to find that one PDF you sent a few months back.
What image file type should I use in an email signature?
Do not use SVG’s or WebP in an html email signature. Choose wisely between JPG’s, GIF’s, and maybe PNG’s.
New fangled web image file types like SVG's and WebP are not going to work in most email clients, so don’t even bother trying to use them!
People people quickly choose a JPG because it is an easy choice when saving images for the web. While there is nothing wrong with a JPG, we would also encourage you to consider using the other standard formats as well. Here’s why you might want to consider them:
- GIF’s are the long forgotten image file type of the web. Most web designers hardly bother with them any more. But, remember that often what we are saving in an email signature is a logo, and logos have a set number of colors, usually 1-4. These types of images are great candidates for GIF’s. A GIF logo vs a JPG logo may be smaller in file size and higher quality!
- PNG’s may not be the right choice because they are not supported on older email clients like Lotus Notes 6.5 and 7.0 as well as Outlook versions prior to 2007. That said, you may be willing to sacrifice support on those older email clients because of your audience and if dark mode support is important to you. Dark mode in emails can make the background of an email appear on a dark gray rather than white based on the user’s preferences. This can often make a logo in a signature have a white box around it because it was saved that way, which makes PNG’s a nice way to solve that problem with their beautiful transparency.
What font size should I use in an email signature?
We would recommend 11px - 13px font size for an email signature.
An email signature is meant to be a sign off, a conclusion to an email conversation, so it should balance being practical and readable without being annoying and overbearing. Many people use a default size of 12px - 14px on their email client depending on their preferences. Staying right around that size or even a tiny bit smaller can be a good thing.
Is there a limit to how many characters an email signature can be?
Yes, some email clients limit a signature by number of characters or even by file size. We recommend keeping it under 5,000 characters if possible.
Gmail will limit your email signature to 10,000 characters, this includes the html characters as well! The easiest way to stay under these limitations is to not include long paragraphs of legal disclaimers within your email signature which can end up being thousands of characters long.
Other email clients that have even shorter limits include Yahoo Mail, Outlook.com, Office 365, and AOL Mail.
A New Kind of Signature Generator
We have spent a lot of time here learning about the eccentricities of different email clients and their limitations. We have been building an advanced email signature editor that allows you to drag and drop fields into your layout and customize everything from fonts, colors, images, and spacing. Our generator creates code that looks standardized across email clients and allows for a great amount of design flexibility as you build your template.
It also allows you to share a link with your entire team or organization. They can then quickly fill in their personal information and copy the signature into their email client of choice. This process is simple and hands off for busy marketing and communications teams at large organizations.
We would love to have you try out our editor and build your first email signature today! Let us know if you have feedback or questions.