Email Signature Design Guidelines

Ensure that your signature displays correctly

across various email clients and devices
 

Rocketseed email signature design guidelines

We have created this signature guide to ensure that your signature displays correctly
across various email clients and devices.

Various email clients render imagery and text differently, therefore following the below
guidelines will help eliminate known rendering issues.

Design - Size and weight guidelines

Our guidelines provide the recommended width and height for everyday email
signature and banner designs. When using both banners and signature we
recommend the widths are consistent. We advise 650pixel guideline widths to ensure
full visibility when viewing via preview panes or on mobile devices. The file size of
banners should not exceed 40kb.

The combined file sizes of images within the signature should also be less than 40kb,
to ensure the weight of the email is controlled. Images should be JPG or GIF format.

Deliverability Considerations: Text vs Imagery

When we create your signature template, the personalised sender information in the
signature fields will be coded as text elements. This is important for deliverability as a
balance of text and imagery lowers the spam score. It is not best practice to use a full
image as a signature. If you wish to have colour around text, it is possible to choose
one solid background colour as per the example below.

2
 
 
 

Links
More than one link can be applied to an image within your email signature. By image
mapping a signature or banner you have the opportunity to cross and up-sell your
business services by incorporating tabs or buttons in your design, and taking your
recipients to other areas of your website. Create links to documents, videos, social
media channels, newsletter sign-up or even the App Store.  

Stripping of signature fields

The Rocketseed editor allows master templates to be built and to accommodate
personalisation of required fields for different senders e.g. not every sender has a
mobile number therefore we can omit the field automatically in your template. Our
smart technology means that you do not need to have different template designs for
users who require multiple/less contacts fields. You can manage your signature
templates more efficiently.

Example A includes more contact details than example B. The contact field labels
have been removed automatically in example B to prevent empty fields appearing.
Example A

Example B

3
 
 
 

Fonts and sizes

As best practice we recommend using only web safe fonts in email signatures - these
are listed below. This will ensure that the text within your email signature will display
correctly on all devices. If you use a font that the recipient does not have stored on
their computer it may use a default system font instead. Although we recommend
using web safe system fonts, we can apply Google fonts providing we set a secondary
web safe font for recipients email clients that do not support Google fonts.

System Fonts Google Fonts

Andale Mono Avant Garde

Arial Bookman Old Style

Arial Black Calibri

Book Antiqua Cambria

Comic Sans Century Gothic

Courier Copperplate Gothic Light

Georgia Garamond

Helvetica Gill Sans

Impact Lucida Console

Symbol Symbol Lucida Sans Unicode

Tahoma Monotype Corsiva

Times New Roman Monotype Sorts

Trebuchet MS MS Sans Serif

Verdana Palatino Linotype

Webdings Webdings

Windings Windings

4
 
 
 

Signature layouts on mobile devices

When designing a signature layout, you need to ensure that it displays correctly on
mobile devices. One thing to keep in mind when choosing your layout is that mobile
devices automatically enlarge font sizes to ensure they are a readable size. This
causes text information to wrap onto the next line, therefore we advise not to have too
much text on the same row. For example, we would always suggest that a postal
address have a row of it’s own to display in which has the full width of the design to
use (not limited by an image to the right).

Signature Layout 1
When adding a logo to the right of text information do not add in more than one logo
or an image that is too wide. This will force the text to wrap. Our design team will
make alternative suggestions if required. Overall the below design works well on
mobile devices.

5
 
 
 

Signature Layout 2
The below layout can have a logo/sender image on the left and contact information
on the right or vice versa. This layout also works well on mobile devices. Avoid
having images on both sides of the text.

Signature design layouts – Things to avoid

 Signature layouts with more than one logo/image displaying next to contact
information may not display properly on mobile devices.
 It is advisable to try and avoid adding in contact information next to each other
with multiple images included next to it in the design, since most mobile devices
are set to have a screen width of 460px it will wrap the text.
 Signatures are created in a table format. Avoid using more than two columns in a
design.

6