Peculiaridades del HTML de firmas de Outlook: las 7 cosas que siempre fallan
Every email client renders HTML a little differently, but Outlook is in a league of its own. It does not use a modern browser engine; it uses Microsoft Word to render email, which means your carefully crafted signature can look like a 1999 Geocities page in the blink of an eye. If you have ever sent a test email to yourself and seen your logo misaligned, your fonts defaulting to Times New Roman, or your padding completely ignored, you are not alone. These are not random glitches—they are predictable, documented quirks of the Word HTML engine, and they will break your signature every single time unless you code around them.
The Bulletproof Background: Why VML is Non-Negotiable
The most common request in email signatures is a coloured banner or a rounded button. In any other client, you would use a div with background-color and border-radius. In Outlook, both of those properties are effectively ignored. The Word engine strips out modern CSS and falls back to a white background, leaving your signature looking like a broken wireframe.
The only reliable way to render a background image or colour in Outlook is to use VML (Vector Markup Language) with a v:rect element and a v:fill sub-element. This is the same technique used by every major email template, and it is the only way to get Outlook to display a background that is not white.
Here is the core pattern you need:
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:100px;">
<v:fill type="tile" color="#1a73e8" />
<v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true">
<![endif]-->
<!--[if !mso]><!-->
<div style="background-color:#1a73e8; padding:20px;">
<!--<![endif]-->
<!-- Your content here -->
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
<!--[if !mso]><!-->
</div>
<!--<![endif]-->
The conditional comments are critical. Outlook reads the [if mso] block and ignores the standard HTML block; every other client does the opposite. If you skip the VML, your background will simply vanish in Outlook. If you skip the standard div, your signature will break in Gmail and Apple Mail.
The Padding Trap Inside VML
Even when you get the VML background working, you will immediately hit the next issue: padding. The v:textbox element does not respect standard CSS padding values. You must use the inset attribute on the v:textbox tag to control internal spacing.
For example, style="mso-fit-shape-to-text:true" combined with inset="10px,10px,10px,10px" gives you padding inside the shape. Without it, your text will butt up against the edges of the banner, and there is no CSS workaround. This is a pure Outlook quirk that will eat an hour of your time if you do not know it exists.
The Font Fallacy: Why Calibri Becomes Times New Roman
Outlook has a nasty habit of ignoring your font-family declaration if it is not the first font listed in the email's global stylesheet. Even worse, if you specify a font like Helvetica or Arial without a fallback that Outlook recognises, it will silently substitute Times New Roman.
The fix is not to fight Outlook but to feed it what it wants. Microsoft Outlook on Windows uses the font-family property correctly, but it only respects fonts that are installed on the system. If you use a web font like Inter or Poppins, Outlook will ignore it entirely.
Your options are limited:
- Use a system font stack that starts with a Microsoft-safe font (e.g.,
Calibri, Arial, sans-serif). - Accept that Outlook users will see a slightly different font than Gmail users.
- Use a
<!--[if mso]>conditional to set a specific font for Outlook only.
The conditional approach is the most professional. You keep your modern font for everyone else, and you explicitly set Calibri or Arial for Outlook. This is not a hack; it is the standard practice for any serious email designer.
The Margin Collapse: Why Your Spacing Disappears
In standard HTML, margins collapse between adjacent elements. In Outlook, they do not collapse—they disappear entirely. If you use margin-top on a p tag or a div, Outlook will often render it as zero, squashing your signature into a cramped block.
The reliable alternative is to use padding on a parent container or to insert spacer elements. The most bulletproof method is to use a table cell with a fixed height and no content. For example:
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20" style="font-size:0; line-height:0;"> </td>
</tr>
</table>
This is the classic spacer technique. It works in every client, including Outlook, because it relies on a table cell's height attribute, which Outlook respects, rather than CSS margins.
The Width Wars: Fixed vs. Fluid Layouts
Outlook does not support max-width on block elements. If you set a div to max-width: 600px, Outlook will render it at 100% width, which can stretch your signature across the entire email pane. This is a common bug that makes signatures look broken on wide monitors.
The solution is to use a fixed-width table. Set the table's width attribute to 600 (without px), and Outlook will respect it. For fluid layouts, you need to use a hybrid approach: a fixed-width table for Outlook and a fluid div with max-width for everyone else, wrapped in conditional comments.
Here is the pattern:
<!--[if mso]>
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
<!-- Content -->
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This ensures Outlook sees a fixed 600px table, while Gmail and Apple Mail see a responsive div that shrinks on mobile.
The Line-Height Leap: Why Text Looks Squished
Outlook handles line-height differently depending on whether you use it on a block element or an inline element. If you set line-height on a p tag, Outlook will often add extra space above and below the text, making your signature look disjointed.
The fix is to set line-height on the td element inside your table, not on the text element itself. For example:
<td style="line-height: 18px; font-size: 14px; font-family: Arial, sans-serif;">
Your text here
</td>
This keeps the line spacing consistent. If you need to adjust spacing for a specific line, use a span with display:block and a fixed line-height. Do not rely on margin or padding on the text element itself.
The Image Alignment Anomaly: Why Your Logo Floats
Images in Outlook are notoriously difficult to align. The Word engine does not support float or flexbox, so if you try to place your logo next to your contact details, you will often end up with the image on its own line, pushing the text below it.
The only reliable way to align an image and text side-by-side in Outlook is to use a table with two cells. Do not use float, display:inline-block, or flex. Here is the structure:
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="padding-right:10px;">
<img src="logo.png" width="80" height="80" alt="Logo" style="display:block;">
</td>
<td valign="middle">
<p style="margin:0; font-family:Arial, sans-serif; font-size:14px;">John Doe</p>
<p style="margin:0; font-family:Arial, sans-serif; font-size:12px;">CEO</p>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the td elements. Outlook respects this attribute, whereas vertical-align in CSS is often ignored. Also, set display:block on the image to prevent a mysterious 4px gap below it—another classic Outlook bug.
The Link Styling Surprise: Why Underlines Appear
Outlook will often add an underline to your links even if you set text-decoration: none in your CSS. This is because the Word engine applies its own default link styling that overrides your inline styles in certain contexts.
The fix is to be explicit and redundant. Set text-decoration: none on the a tag itself, and also set the color property. Additionally, add style="text-decoration:none" to the a tag directly, not just in a <style> block. Outlook is more likely to respect inline styles than embedded styles.
If you are still seeing underlines, you can try adding mso-line-height-rule: exactly; to the parent td. This is a known workaround for Outlook's link rendering bug.
How newmail.click handles this
We built newmail.click to generate signatures that are Outlook-safe from the start. Our free builder outputs table-based HTML with conditional VML comments, fixed-width layouts, and inline styles for every property that Outlook is known to break. We do not rely on CSS classes or embedded stylesheets. For Pro users, we add click and open tracking that works across Outlook and every other client, plus Slack and email alerts for when your signature links are engaged. We also set UTM defaults on your tracked links so your marketing data stays clean. You can copy the generated code directly into Outlook's signature editor, and it will render correctly without manual fixes.
The Bottom Line
Outlook's Word rendering engine is not going to change anytime soon, and every signature you build must account for its quirks. The seven issues above—VML backgrounds, font fallbacks, margin collapse, fixed widths, line-height, image alignment, and link styling—are the ones that break 95% of signatures. If you address them upfront, your signature will look consistent across every major email client. If you ignore them, you are gambling on your recipients using Gmail or Apple Mail, and that is a bet you will eventually lose.