Guidelines for signature design

This article outlines best practices for designing email signatures that display consistently across different email clients and devices.

To ensure the best results when creating an email signature in Exclaimer, follow the design recommendations below. These guidelines help avoid common rendering issues in Outlook, Gmail, and mobile email clients.

Design guidelines

To ensure signatures display correctly across email clients, follow these guidelines:

• Use recommended widths, both for your signature template and for wide elements like banners. 
• Use tables for layout
• Upload images at actual size 
• Choose supported file formats
• Consider how the signature will appear on mobile devices
• Avoid copy and pasting text - enter text directly, or if pasting is required, paste as plain text with no formatting. 
• Apply formatting and style choices such as fonts and colors (or other choices from the Properties pane) to outermost layers first, then inner tables, cells, or groups. For more information on looking at the inner and outer parts of a template, see Colored borders, grouping, and inherit properties in the Signature Designer. 

Recommended design standards

These standards help ensure signatures render consistently across email platforms. The following table lists our recommendations for common design aspects: 

Best practices

Layout

Follow these layout guidelines to ensure clarity, consistency, and readability:

• Use tables to structure your layout.
• You can nest tables and table cells to create more complex grids, but try to avoid excessive overlays with user photos and background shapes, for example.
• Use padding to create space between elements.
• You can set a fixed width on both tables and whole templates to avoid your signature resizing on smaller device screens.
• You can stretch some elements or create wide designs to fit the width of your template.

Fonts

Font choices

Some fonts are not available on different devices or operating systems. This is especially true of custom fonts. Consider your font choices and whether you should set up a font stack of fallback fonts to ensure your design can always display text in an appropriate font. 

For more information, see Difference between custom fonts and font stacks. 

Font sizes

Use the following font sizes to maintain readability and professional appearance:

• 11 pt – 12 pt for larger text (for example: name, job title)
• 10 pt – 8 pt for contact details (for example: phone, email, website)
• 8 pt – 7 pt for disclaimers and legal text

For more information on font sizes, see How to use pixel and point values in font sizing. 

Images

For optimal image appearance and performance:

• Avoid resizing images in the Signature Designer - instead, upload your image at the exact size you want it to display at. For example, if you want your image to display at 100x100px, then create or resize your image file to be that size.
• Images can be either embedded or linked:
  • Embedded images: Uploaded directly from your device into the signature template.
  • Linked images: Hosted on a public-facing server and referenced using a hosted URL in the signature template.

For more image recommendations and troubleshooting, see How to resolve image quality issues.

Backgrounds

Consider whether a background image or background color is the best choice for your design. See Difference between background image and background color to compare the two methods and decide which is most suitable. 

Mobile compatibility

Use these practices to maintain a clean, simple, and mobile-friendly layout:

• Keep designs compact and simple to avoid horizontal scrolling.
• Always test signatures on mobile devices where possible.
• Consider how dark mode may affect your color choices and other style aspects.

Common mistakes

Avoid the following when designing signatures:

• Using signatures wider than 600 px. This can cause display issues on smaller screens.
• Not sizing images to their actual display dimensions. This may result in images appearing too large or distorted.
• Not using tables for layout. Unstructured designs can render poorly in email clients. See Difference between tables and groups. 
• Using unsupported image formats. Only use JPG, JPEG, PNG, or GIF.
• Using colors or styles that are unsuitable for dark mode on devices.
• Not being cautious when using AI to generate content, as it may not be possible to replicate in a signature. 

These issues can cause signatures to appear misaligned or incorrectly formatted.