Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Lemontaps Design Guide: Best practices for email signatures

Lemontaps Design Guide: Best Practices for Email Signatures

Prerequisites: Administrator · Email Signature Addon

This guide summarizes the most important design principles for creating stable, professional email signatures with Lemontaps. It is aimed at designers and marketing teams who create signature templates.

Email signatures differ technically from standard web layouts. Many email clients – particularly Microsoft Outlook – have limited support for modern HTML and CSS technologies. This is why special design rules apply to signatures.

Goal of a good email signature

A professional signature should:

  • clearly identify the sender
  • provide key contact details
  • match the corporate design
  • display correctly in as many email clients as possible
  • work on both desktop and mobile

Signatures should therefore be visually clear, technically simple, and compact.

Recommended signature structure

Name, Job title / Role, Phone number, Email address, Company / Website

Legal text / Disclaimer: In many countries, certain company details are legally required in business emails.

Optional: Company logo, social links, marketing banner, QR code linking to the digital business card

The simpler the structure, the more stable the display across different email clients.

Maximum signature size

Many email clients do not support true responsiveness.

Recommended total width: 320–600 px, optimal 450–550 px. Signatures that are too wide may be cut off on smartphones.

Layout rules

Email signatures should be kept as simple as possible. Recommendations: few layout areas, clear hierarchy, no complex structures.

Many modern web technologies do not work in email clients. Avoid: Flexbox, Grid, complex CSS layouts. Use simple HTML structures instead.

Line height

Outlook Classic uses Microsoft Word as its rendering engine and interprets CSS line heights differently from Outlook Web. The Lemontaps preview in the editor shows the result for Outlook Web – the display in Outlook Classic may differ.

Recommendation: Set the line height to 1.3. This value renders consistently in both Outlook Classic and Outlook Web. Larger line heights may appear compressed in Outlook Classic.

Alternatively, you can control spacing between text elements using paddings, spacers, or dividers – these render consistently across both Outlook variants.

Column layouts and potential display issues

Many signatures use column layouts, for example: logo on the left, contact details in the center, QR code in the third column. Such layouts are generally possible but can cause display issues in certain situations – particularly when emails are forwarded or in long email threads.

Some email servers or clients convert messages to a different format when replying (e.g. HTML → RTF or simplified HTML). This can alter table structures or column layouts. Typical effects: columns shift below each other, images move, spacing changes, text wraps differently. This behavior depends heavily on the recipient's email client.

Use fixed pixel sizes

Outlook Web does not reliably interpret percentage values for column widths, image sizes, and paddings. Setting columns to e.g. 25%/50%/25% or images to "centered" can result in gaps or misalignment – even if the display looks correct in the Lemontaps editor and in Outlook Classic.

Recommendation: Use fixed pixel values for all columns, images, and paddings. If something appears off-center or misaligned in Outlook Web, check whether left and right paddings are set as fixed pixel values.

Recommendation for maximum stability

The most stable signature design is a single-column layout. Advantages: content cannot shift when emails are replied to or forwarded, better display on mobile devices, fewer client dependencies.

Column layouts can still be used but should be applied with caution and tested thoroughly.

Fonts

Many email clients do not support external web fonts. Recommended fonts: Arial, Calibri, Verdana, Tahoma. If corporate fonts are used, always define a fallback.

Example: "Inter", Arial, sans-serif

Font sizes

Lemontaps uses pixels (px) as the unit. Many email clients – particularly Outlook – use points (pt). Rule of thumb: 1pt ≈ 1.33px.

Recommended sizes: Name 15–16px, Job title 13–14px, Contact details 12–13px, Disclaimer 9–11px.

Define font size per element

For stable mobile rendering, setting the font size globally at page level is not sufficient. Assign a fixed font size to each individual text element as well. Without an element-specific value, font sizes may render larger or smaller than expected on mobile devices.

Colors

Colors should always be defined as HEX or RGB values. Examples: #000000, #1A1A1A, rgb(0,0,0). Avoid: CSS variables, theme variables. Important colors should be defined directly on the element.

Images and logos

Key rules for images: always upload images at their final size, define width and height, avoid CSS scaling. Recommended formats: PNG, JPG. Not recommended: SVG.

QR code linking to the digital business card

Lemontaps allows inserting a QR code linking to the digital business card. Recommended size: 80–120 px. Possible placement: to the right of contact details or below the signature.

Mobile display

A large proportion of emails are read on smartphones. The signature should be no wider than 600 px, contain as few columns as possible, and have a clear hierarchy. Layouts with stacked elements work most reliably on mobile devices.

Also assign a fixed font size to each text element individually – a global page-level setting alone is not sufficient for stable mobile rendering. See Font sizes for more details.

Marketing banners in signatures

Email signatures can also be used for marketing purposes. Typical examples: events, product launches, whitepapers, recruiting. Recommended banner size: width max. 600 px, height 80–120 px. Banners should remain compact so the signature continues to look professional.

Placeholders and dynamic content

In Lemontaps, signatures are automatically filled with user data. Typical variables: name, job title, phone number, mobile number, email address, company, address.

Designers should keep in mind: phone numbers can vary in length, job titles can be longer than expected, and some users may not have all fields filled in. Use the $INE$ / $/INE$ placeholder to automatically hide a line when its value is empty.

Dark mode

Many email clients support dark mode. Recommendations: use sufficient contrast, avoid very light grey text, use logos with a transparent background.

Common design mistakes

Avoid: signatures that are too wide, overly complex layouts, too many colors, too many icons, font sizes that are too small, banners that are too large, percentage values instead of pixel values, missing element-specific font sizes.

Simpler signatures are technically far more reliable.