.svg){kind=small}
Lemontaps Design Guide: Best practices for email signatures
This guide summarizes the most important design principles for creating stable, professional email signatures with Lemontaps.
It is intended for designers and marketing teams who create signature templates.
Email signatures differ technically from normal web layouts. Many email clients — especially Microsoft Outlook — only support modern HTML and CSS technologies to a limited extent. Therefore, special design rules apply to signatures.
Goal of a good email signature
A professional signature should:
• clearly identify the sender
• provide important contact details
• match the corporate design
• display correctly in as many email clients as possible
• work on desktop and mobile
Signatures should therefore be visually clear, technically simple, and compact.
Recommended structure of a signature
Name
Position / Role
Phone number
Email address
Company / Website
Legal text / Disclaimer: In many countries, certain company information is legally required in business emails.
optional company logo
optional social links
optional marketing banner
optional QR code for the digital business card
A simple example:
Name
Position
Phone
Email
Website
Logo
Legal text
The simpler the structure, the more stable the display will be across different email clients.
Maximum size of the signature
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 built as simply as possible.
Recommendations:
• few layout sections
• clear hierarchy
• no complex structures
Important:
Many modern web technologies do not work in email clients.
Avoid:
Flexbox
Grid
complex CSS layouts
Instead, simple HTML structures should be used.
Column layouts and possible display issues
Many signatures are built using columns, for example:
Logo on the left, contact details on the right, QR code in the 3rd column
Such layouts are generally possible, but in certain situations they can lead to display issues.
Problems often occur with:
• forwarded emails
• long email threads
Some email servers or clients internally convert messages into another format when replying (e.g., HTML → RTF or simplified HTML). During this process, table structures or column layouts may be modified.
Typical effects:
• columns move below each other
• images shift
• spacing changes
• text wraps differently
This behavior strongly depends on the recipient’s email client.
Recommendation for maximum stability
The most stable signature design is a single-column layout.
Example:
Name
Position
Phone
Email
Website
Logo
optional banner
The advantage:
• content cannot shift when replying or forwarding
• better display on mobile devices
• fewer client dependencies
Column layouts can still be used, but they should be applied carefully and tested.
Fonts
Many email clients do not support external web fonts.
Recommended fonts:
Arial
Calibri
Verdana
Tahoma
If corporate fonts are used, a fallback should always be defined.
Example:
"Inter", Arial, sans-serif
Font sizes
Lemontaps uses pixels (px) as the unit.
Many email clients — especially Microsoft Outlook — use points (pt).
Rule of thumb:
1pt ≈ 1.33px
Recommended sizes:
Name
15–16px
Position
13–14px
Contact details
12–13px
Disclaimer
9–11px
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 in the element.
Images and logos
Some important rules apply to images:
• always upload images in their final size
• define width and height
• no CSS scaling
Recommended image formats:
PNG
JPG
Not recommended:
SVG
QR code for the digital business card
Lemontaps allows inserting a QR code for the digital business card.
Recommended size:
80–120 px
Possible placement:
• to the right of the contact details
• below the signature
Mobile display
A large portion of all emails are read on smartphones.
Therefore, the signature should:
• be a maximum of 600 px wide
• contain as few columns as possible
• have a clear hierarchy
Layouts with elements arranged vertically usually work most reliably on mobile devices.
Marketing banners in signatures
Email signatures can also be used for marketing.
Typical examples:
Events
Product launches
Whitepapers
Recruitment
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
Position
Phone number
Mobile number
Email address
Company
Address
Designers should keep in mind:
• phone numbers can vary in length
• job titles can be longer
• some information may be missing for certain users — this is not a problem, because with the placeholder setting "INE" the line can automatically move up.
Dark Mode
Many email clients support Dark Mode.
Recommendations:
• use sufficient contrast
• avoid very light gray text
• use logos with transparent backgrounds
This ensures the signature remains readable in Dark Mode.
Common design mistakes
Signatures that are too wide
layouts that are too complex
too many colors
too many icons
font sizes that are too small
banners that are too large
Simpler signatures are technically much more reliable.