HTML Email Signature Guide: Code Templates and Best Practices

Q: How do I center my signature?

Wrap your signature table in another table and use `align="center"`: ```html ```

TL;DR: HTML email signatures must use table-based layouts, inline CSS, and web-safe fonts. Modern CSS features (flexbox, grid, CSS variables) don't work in email clients. Keep your code simple - a 50-line signature with tables renders better than 200 lines of complex divs.

Building HTML email signatures is different from building web pages. Email clients strip CSS files, ignore modern layout properties, and render the same code differently. What looks perfect in your browser might break completely in Outlook.

This guide covers the HTML and CSS techniques that actually work across email clients.

Email HTML vs. Web HTML

What Works

Technique	Support
Tables for layout	All clients
Inline CSS	All clients
Images (hosted externally)	All clients
Basic text formatting	All clients
Links	All clients
Web-safe fonts	All clients
Hex colors	All clients

What Doesn't Work

Technique	Problem
`<style>` tags	Stripped by Gmail
External CSS files	Stripped by all clients
Flexbox	Not supported
CSS Grid	Not supported
CSS variables	Not supported
Custom fonts	Fall back to defaults
`position: absolute`	Breaks layouts
`float`	Inconsistent support
SVG images	Poor support

Basic HTML Signature Template

Here's a minimal, reliable signature structure:

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #374151;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 14px; color: #111827;">Jane Doe</strong>
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px; color: #6b7280;">
      Marketing Director
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 8px; color: #6b7280;">
      Acme Inc.
    </td>
  </tr>
  <tr>
    <td>
      <a href="tel:+15551234567" style="color: #0d9488; text-decoration: none;">+1 (555) 123-4567</a>
      &nbsp;|&nbsp;
      <a href="mailto:jane@acme.com" style="color: #0d9488; text-decoration: none;">jane@acme.com</a>
    </td>
  </tr>
</table>

Why this works:

cellpadding="0" cellspacing="0" removes default table spacing
Inline styles ensure rendering consistency
Web-safe font stack with fallbacks
Simple structure easy to modify

Signature with Logo

Adding a logo requires careful image handling:

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #374151;">
  <tr>
    <td style="padding-bottom: 12px;">
      <img src="https://yourcompany.com/logo.png"
           alt="Acme Inc."
           width="150"
           height="40"
           style="display: block; border: 0;">
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px;">
      <strong style="font-size: 14px; color: #111827;">Jane Doe</strong>
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px; color: #6b7280;">
      Marketing Director
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 8px; color: #6b7280;">
      Acme Inc.
    </td>
  </tr>
  <tr>
    <td>
      <a href="tel:+15551234567" style="color: #0d9488; text-decoration: none;">+1 (555) 123-4567</a>
      &nbsp;|&nbsp;
      <a href="mailto:jane@acme.com" style="color: #0d9488; text-decoration: none;">jane@acme.com</a>
    </td>
  </tr>
</table>

Image rules:

Always specify width and height attributes
Use display: block to prevent unwanted spacing
Host images on reliable servers (your domain or CDN)
Keep file sizes under 50KB
Use absolute URLs (not relative paths)

Two-Column Layout (Logo + Info)

For signatures with logo on the left and info on the right:

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #374151;">
  <tr>
    <td style="vertical-align: top; padding-right: 16px;">
      <img src="https://yourcompany.com/logo.png"
           alt="Acme Inc."
           width="80"
           height="80"
           style="display: block; border: 0;">
    </td>
    <td style="vertical-align: top; border-left: 2px solid #e5e7eb; padding-left: 16px;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding-bottom: 4px;">
            <strong style="font-size: 14px; color: #111827;">Jane Doe</strong>
          </td>
        </tr>
        <tr>
          <td style="padding-bottom: 4px; color: #6b7280;">
            Marketing Director
          </td>
        </tr>
        <tr>
          <td style="padding-bottom: 8px; color: #6b7280;">
            Acme Inc.
          </td>
        </tr>
        <tr>
          <td style="padding-bottom: 4px;">
            <a href="tel:+15551234567" style="color: #0d9488; text-decoration: none;">+1 (555) 123-4567</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="mailto:jane@acme.com" style="color: #0d9488; text-decoration: none;">jane@acme.com</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Two-column tips:

Use vertical-align: top on both cells
Nested tables for complex content
Divider using border-left on the second cell
Consistent padding for visual balance

Social Icons

Adding social media icons requires image-based icons (not font icons):

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #374151;">
  <!-- Name and info rows here -->

  <tr>
    <td style="padding-top: 12px;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding-right: 8px;">
            <a href="https://linkedin.com/in/janedoe">
              <img src="https://yourcompany.com/icons/linkedin.png"
                   alt="LinkedIn"
                   width="20"
                   height="20"
                   style="display: block; border: 0;">
            </a>
          </td>
          <td style="padding-right: 8px;">
            <a href="https://twitter.com/janedoe">
              <img src="https://yourcompany.com/icons/twitter.png"
                   alt="Twitter"
                   width="20"
                   height="20"
                   style="display: block; border: 0;">
            </a>
          </td>
          <td>
            <a href="https://instagram.com/janedoe">
              <img src="https://yourcompany.com/icons/instagram.png"
                   alt="Instagram"
                   width="20"
                   height="20"
                   style="display: block; border: 0;">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Social icon tips:

Use PNG images (not SVG or font icons)
Keep icons 20-24px square
Host on same domain as logo
Add alt text for accessibility
Link each icon to the correct profile

Inline CSS Reference

Here are the CSS properties that work reliably in email:

Text Styling

<!-- Font family (use fallbacks) -->
style="font-family: Arial, Helvetica, sans-serif;"

<!-- Font size -->
style="font-size: 14px;"

<!-- Font weight -->
style="font-weight: bold;"
<!-- Or use <strong> tags -->

<!-- Color -->
style="color: #374151;"

<!-- Text decoration -->
style="text-decoration: none;"
style="text-decoration: underline;"

<!-- Line height -->
style="line-height: 1.5;"

Spacing

<!-- Padding -->
style="padding: 8px;"
style="padding-top: 8px; padding-bottom: 8px;"

<!-- Cell spacing (on table element) -->
cellpadding="0" cellspacing="0"

<!-- No margin support - use padding instead -->

Borders

<!-- Border on element -->
style="border: 1px solid #e5e7eb;"
style="border-bottom: 2px solid #0d9488;"
style="border-left: 2px solid #e5e7eb;"

Alignment

<!-- Horizontal alignment -->
style="text-align: left;"
style="text-align: center;"

<!-- Vertical alignment (on td) -->
style="vertical-align: top;"
style="vertical-align: middle;"

Email Client Quirks

Gmail

Strips <style> tags completely
All CSS must be inline
Generally good rendering
Mobile Gmail has different rules than desktop

Outlook (Windows)

Uses Word rendering engine
Poor support for many CSS properties
May add gaps between tables
Requires mso- conditional comments for fixes

Outlook-specific fixes:

<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr><td>
<![endif]-->

<!-- Your signature HTML here -->

<!--[if mso]>
</td></tr>
</table>
<![endif]-->

Apple Mail

Generally excellent rendering
Supports more CSS than most clients
Be careful not to rely on features only Apple supports

Mobile Clients

Screen width around 320-400px
Test with responsive widths
Avoid signatures wider than 300px
Stack elements vertically when possible

Testing Your Signature

Testing Tools

Litmus - Comprehensive email testing (paid)
Email on Acid - Similar to Litmus (paid)
Manual testing - Send to yourself on Gmail, Outlook, mobile

Manual Testing Checklist

Common Issues to Check

Issue	Cause	Fix
Images not showing	Blocked by default	Add alt text, test with images off
Layout broken	CSS not supported	Simplify, use tables
Wrong fonts	Custom fonts not supported	Use web-safe fonts
Gaps between rows	Outlook rendering	Add `mso-` fixes
Signature too wide	Fixed width issues	Use percentage or max 600px

Troubleshooting Common Problems

Problem: Images Not Loading

Symptoms: Broken image icons, blank spaces Causes:

Relative URLs instead of absolute
Images hosted on localhost
Unreliable hosting
Incorrect file paths

Solution:

<!-- Bad -->
<img src="/images/logo.png">
<img src="logo.png">

<!-- Good -->
<img src="https://yourcompany.com/images/logo.png">

Problem: Signature Too Wide on Mobile

Symptoms: Horizontal scrolling, cut-off content Causes:

Fixed pixel widths too large
No max-width constraints

Solution:

<!-- Limit table width -->
<table style="max-width: 100%; width: 300px;">

Problem: Fonts Look Different

Symptoms: Different fonts in different clients Causes:

Custom fonts not supported
Missing fallback fonts

Solution:

<!-- Always include fallbacks -->
style="font-family: Arial, Helvetica, sans-serif;"

Problem: Links Not Clickable

Symptoms: Links display as text Causes:

Missing href attribute
Malformed URLs

Solution:

<!-- Include full URLs -->
<a href="https://yourcompany.com">Visit our site</a>
<a href="mailto:email@company.com">email@company.com</a>
<a href="tel:+15551234567">+1 (555) 123-4567</a>

Complete Template

Here's a production-ready signature template:

<table cellpadding="0" cellspacing="0" border="0"
       style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #374151; max-width: 300px;">
  <tr>
    <td style="padding-bottom: 12px;">
      <img src="https://yourcompany.com/logo.png"
           alt="Company Name"
           width="150"
           style="display: block; border: 0;">
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px;">
      <strong style="font-size: 14px; color: #111827;">Jane Doe</strong>
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px; color: #6b7280;">
      Marketing Director
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 8px; color: #6b7280;">
      Acme Inc.
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px;">
      <a href="tel:+15551234567" style="color: #0d9488; text-decoration: none;">+1 (555) 123-4567</a>
    </td>
  </tr>
  <tr>
    <td style="padding-bottom: 4px;">
      <a href="mailto:jane@acme.com" style="color: #0d9488; text-decoration: none;">jane@acme.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://acme.com" style="color: #0d9488; text-decoration: none;">acme.com</a>
    </td>
  </tr>
  <tr>
    <td style="padding-top: 12px;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding-right: 8px;">
            <a href="https://linkedin.com/in/janedoe">
              <img src="https://yourcompany.com/icons/linkedin.png" alt="LinkedIn" width="20" height="20" style="display: block; border: 0;">
            </a>
          </td>
          <td>
            <a href="https://twitter.com/janedoe">
              <img src="https://yourcompany.com/icons/twitter.png" alt="Twitter" width="20" height="20" style="display: block; border: 0;">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Frequently Asked Questions

Can I use CSS flexbox in email signatures?

No. Flexbox is not supported by most email clients, especially Outlook. Use tables for layout instead. Tables have been the standard for email layout for decades and remain the most reliable option.

Why do my images show as broken icons?

Images must be hosted at publicly accessible URLs. If you're using local file paths or relative URLs, they won't load. Always use absolute URLs starting with https:// and host images on your company server or a CDN.

How do I center my signature?

Wrap your signature table in another table and use align="center":

<table width="100%"><tr><td align="center">
  <!-- Your signature table here -->
</td></tr></table>

What's the maximum width for an email signature?

Keep signatures under 600px wide for email client compatibility, and under 300px for optimal mobile display. Most signatures work best between 200-300px.

How do I update HTML signatures across my team?

For teams, manually updating HTML signatures doesn't scale. Use a signature management tool like Signkit to update all signatures from one place. See our comparison of tools.

Key Takeaways

Use table-based layouts, not divs with CSS
All CSS must be inline - external styles are stripped
Stick to web-safe fonts (Arial, Helvetica, Georgia)
Host images on reliable servers with absolute URLs
Keep total width under 300px for mobile compatibility
Test across Gmail, Outlook (Windows), and mobile
Outlook requires special attention - it uses Word rendering

Skip the Code Complexity

Building HTML email signatures is tedious. Signkit generates email-client-safe HTML automatically - no coding required. Our templates use table layouts, inline CSS, and work across all major email clients.

Create your signature | Browse templates

Email HTML vs. Web HTML

What Works

What Doesn't Work

Basic HTML Signature Template

Signature with Logo

Two-Column Layout (Logo + Info)

Social Icons

Inline CSS Reference

Text Styling

Spacing

Borders

Alignment

Email Client Quirks

Gmail

Outlook (Windows)

Apple Mail

Mobile Clients

Testing Your Signature

Testing Tools

Manual Testing Checklist

Common Issues to Check

Troubleshooting Common Problems

Problem: Images Not Loading

Problem: Signature Too Wide on Mobile

Problem: Fonts Look Different

Problem: Links Not Clickable

Complete Template

Frequently Asked Questions

Can I use CSS flexbox in email signatures?

Why do my images show as broken icons?

How do I center my signature?

What's the maximum width for an email signature?

How do I update HTML signatures across my team?

Key Takeaways

Skip the Code Complexity

Tags

Enjoyed this article?

Related Articles

Email Signature Dark Mode: How to Make Your Signature Work Everywhere

How to Add an Email Signature in Apple Mail (Mac, iPhone, iPad)

Outlook Email Signature: How to Set Up in 2026

Ready to create professional email signatures?