How to Clean Up HTML Formatting for Gmail Signatures

You spend hours designing the perfect email signature—balancing your logo, aligning your social icons, and picking a font that matches your brand. Then you send a test email to a client using Outlook, and your beautiful design looks like a ransom note cut out of a newspaper. The logo is massive, the text is Times New Roman, and your layout has collapsed into a single, sad column.

This happens because email clients are not web browsers. While modern browsers run on advanced engines like Blink or WebKit, email clients—specifically Outlook and parts of Gmail—rely on rendering engines that haven't significantly updated their HTML handling since the late 2000s. To get a professional result, you have to stop coding like it’s 2024 and start coding like it’s 1999.

The Technical Reality of Gmail Signature HTML

When you paste content into the Gmail signature settings box, you aren't just pasting text; you are pasting a block of HTML and CSS. The problem is that Gmail’s composer is a "contenteditable" div that attempts to interpret and sanitize whatever code you throw at it.

Here is the technical breakdown of why your formatting breaks:

CSS Stripping: Gmail tends to strip out <style> blocks located in the <head> of your HTML. If your signature relies on classes (e.g., <div class="footer">), Gmail often ignores those instructions entirely.
Computed Styles: When you copy a signature from a browser window, you are often copying the "computed style"—every single CSS attribute the browser is applying, including default margins, line heights, and font weights you didn't intend to set.
Character Limits: Gmail has a hidden character limit for signatures (around 10,000 characters). If your code is bloated with base64 image strings or Microsoft Word junk code, Gmail will simply truncate the signature, cutting it off mid-tag.

To achieve a clean signature, you must strip away modern web practices and embrace inline CSS and table-based layouts.

Why You Must Use HTML Tables

If you are a web developer, the idea of using <table> for layout probably makes you cringe. In the web world, we abandoned tables for layout fifteen years ago in favor of Flexbox and CSS Grid.

However, in the email world, tables are mandatory.

Outlook for Windows uses Microsoft Word’s rendering engine to display HTML emails. The Word engine does not understand display: flex, float: left, or position: absolute. If you try to align your logo next to your text using <div> tags and floats, Outlook will stack them vertically every time.

Pro Tip: Never rely on margins (margin-top, margin-left) to create space between elements. Outlook and some versions of Gmail ignore margins on certain elements. Instead, use empty table cells with defined heights or padding on <td> elements to create whitespace.

To ensure your Gmail formatting holds up when received by an Outlook user, you must structure your signature as a table with rows (<tr>) and cells (<td>). This rigid grid structure forces the email client to keep elements side-by-side.

The "Inline CSS" Imperative

A clean signature requires inline styles. You cannot define a style block at the top of your code and expect it to cascade down. You must apply the styling directly to the element you want to style.

Bad (Class-based):

<style>
  .title { color: #333; font-weight: bold; }
</style>
<span class="title">John Doe</span>

Good (Inline):

<span style="color: #333333; font-weight: bold; font-family: Arial, sans-serif;">John Doe</span>

When you look at the source code of a robust signature, it looks repetitive. You have to declare the font family, font size, and color on almost every single <td> or <span>. If you rely on inheritance (expecting the parent table simply to pass font styles down to the child cells), you will eventually encounter a client that resets the font to its default—usually Times New Roman.

Controlling Images: The Width Trap

One of the most common signature cleanup tasks I handle is fixing logos that explode to their full original resolution (often 2000px wide) when viewed in Outlook.

This happens because different clients respect different resizing instructions.

Gmail prefers the CSS style="width: 200px" property.
Outlook often ignores CSS width on images and only respects the HTML width="200" attribute.

To make an image bulletproof, you must use both.

The Retina Display Workflow

Screens today are high-density (Retina/4K). If you upload a logo that is exactly 200px wide, it will look blurry on a modern iPhone.

Create your image at 2x the intended display size. If you want it to appear 200px wide, save the image as 400px wide.
In your HTML, force the display size down.

The Code:

<img src="https://yourserver.com/logo.png" width="200" height="auto" style="display: block; width: 200px; height: auto; border: 0;">

Note the display: block. By default, images are inline elements, which means they sit on the text baseline. This often adds a mysterious 3-4 pixels of whitespace below the image (space reserved for descending letters like 'g' or 'y'). Setting display: block removes this phantom gap.

Font Stacks and the "Times New Roman" Fallback

You want to use your brand font. I get it. But unless your brand font is Arial, Verdana, Georgia, or Tahoma, you are entering a danger zone.

Most email clients do not support web fonts (like Google Fonts). If you code your signature to use "Open Sans" and the recipient doesn't have that font installed on their computer, the email client will revert to a fallback.

If you don't specify the fallback correctly, Outlook defaults to Times New Roman.

The Safe Stack: Always list your fonts in order of preference, ending with a generic system font.

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

Even better, wrap your text in a <span> rather than applying the font to a <div>. Some clients strip styling from block-level elements but preserve it on inline spans.

Dark Mode: The Signature Destroyer

Dark mode is the hardest variable to control in Gmail signature HTML. When a user switches their phone to dark mode, the email client (Gmail App, Apple Mail, Outlook Mobile) attempts to invert the colors of your email to reduce eye strain.

White backgrounds become black. Black text becomes white.

The Logo Problem

If your logo is a JPG with a white background, it will look like a white box sitting on a dark background in dark mode. It looks amateur.

Solution: Always use transparent PNGs for logos and icons.

The Disappearing Text Problem

If your logo includes dark text (e.g., a black "Inc." written next to your icon) and is a transparent PNG, that black text will vanish against the dark background of dark mode.

Solution: Add a white stroke or "glow" around the dark letters in your logo image file. It won't be visible on a white background, but it will provide contrast when the background turns black.

Pro Tip: Avoid using "pure black" (#000000) for your text. Some dark mode algorithms aggressively invert pure black to pure white, which can sometimes clash with partial inversions. Using a dark gray (#333333) often yields smoother results across different dark mode rendering engines.

Cleaning Up the Code: A Step-by-Step Workflow

If you are trying to fix a broken signature, don't try to edit it visually in the Gmail compose window. You need to clean the raw HTML.

1. Remove "mso-" Tags

If you or a colleague ever copied the signature from Microsoft Word, your code is likely infested with tags like mso-style-priority or class="MsoNormal". These are garbage specific to Word. They add bloat and confuse other email clients. Delete them all.

2. Flatten Your CSS

Use a tool or a text editor to move all your CSS styles inline. If you have a <style> block at the top, cut the properties and paste them into style="" attributes on the actual tags.

3. Simplify the Structure

If you have nested <div> tags five levels deep, strip them out. Replace the layout with a simple table:

One table container.
One row (<tr>).
Two cells (<td>): Left cell for the logo, right cell for the contact info.

4. Normalize Line Heights

Gmail has a habit of altering line heights, making signatures look double-spaced. Explicitly set the line-height on your container. style="line-height: 1.4; font-size: 14px;"

Concrete Example: Before and After

Here is what often happens when you paste from a rich text editor versus a cleaned HTML approach.

The "Dirty" Paste (What breaks):

<div class="gmail_signature">
  <div dir="ltr">
    <p class="MsoNormal" style="margin: 0cm 0cm 0pt;">
      <b><span style="font-family: 'Times New Roman', serif;">Jane Doe</span></b>
    </p>
    <p>Marketing Director</p>
    <img src="logo.jpg">
  </div>
</div>

Why it fails: It uses paragraphs (which have default margins), relies on Word classes, has no image sizing, and defaults to Times New Roman.

The Cleaned HTML:

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td valign="top" style="padding-right: 20px;">
      <img src="https://mysite.com/logo.png" width="100" height="100" style="display: block; width: 100px; height: 100px;">
    </td>
    <td valign="top" style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #333333;">
      <strong>Jane Doe</strong><br>
      <span style="color: #666666;">Marketing Director</span><br>
      <a href="https://mysite.com" style="color: #0055ff; text-decoration: none;">mysite.com</a>
    </td>
  </tr>
</table>

Why it works: It uses a table for layout, explicit sizing for images, inline styles for fonts, and defines colors specifically.

How to Install Your Clean HTML in Gmail

Gmail does not offer a "View Source" button in the signature editor. This makes pasting your clean code tricky. If you just paste the raw code into the box, Gmail will display the code itself (tags and all) rather than rendering it.

You have two options:

The Browser Render Method: Save your HTML code as a .html file on your computer. Open that file in Chrome. Press Ctrl+A (Select All) and Ctrl+C (Copy). Then go to Gmail settings and paste (Ctrl+V) into the signature box. By copying the rendered version from the browser, you force Gmail to accept the formatting structure.
The Inspect Element Method (Advanced): Right-click the Gmail signature box, select "Inspect," find the div containing the signature, right-click it in the DOM tree