Email Signature Style Guide
Real examples of the spacing, font sizes and line breaks that Gmail, Outlook, Apple Mail and phone apps actually respect.
Use padding on table cells, not margin
Padding on a <td> is the one spacing method every major email app respects. Margin on <div> and <p> is dropped or changed by Outlook for Windows.
Do: padding on <td> — Jane Doe Marketing Director
Don't: margin on <div>
Outlook for Windows renders email with Microsoft Word, which only partly supports CSS margin and ignores it on many elements. Padding on table cells works in Word and in every web or phone app.
Space columns apart with a fixed-width cell
To separate a logo from text, use an empty cell with a set width (or left padding on the text cell). Avoid gap, flex and float.
Do: spacer <td width="16"> — JD Jane Doe Marketing Director
Don't: display:flex; gap:16px
Outlook for Windows and many older apps do not understand flex or gap, so the logo and text stack on top of each other with no space between them.
Set font sizes in px, 13–16px for body text
Pixel sizes render the same everywhere. Use 14px for details, 16–18px for your name, and nothing under 13px — iPhones enlarge tiny text and break your layout.
Do: 14px details, 17px name — Jane Doe +1 555 0100 · acme.com
Don't: 0.7em / 10px details
em and rem depend on the email app's own default size, so the same signature looks different in each app. iOS Mail automatically enlarges text under 13px, which can push lines onto two rows.
Pick a web-safe font with a full fallback list
Arial, Helvetica, Verdana, Georgia, Tahoma and Times New Roman are installed almost everywhere. Custom web fonts only show in Apple Mail and iOS Mail.
Do: Georgia, "Times New Roman", serif — Jane Doe — Partner
Don't: "Inter" with no fallback
When a font is missing and there is no fallback, Outlook for Windows switches to Times New Roman, and Gmail uses its own default font.
Set line-height in px with the Outlook rule
Write line-height in px (about 1.4× the font size) and add mso-line-height-rule:exactly so Outlook keeps it.
Do: line-height:20px; mso-line-height-rule:exactly — Jane Doe Marketing Director Acme Inc.
Don't: no line-height (app default)
Without a fixed line-height each app uses its own default, so lines sit closer together in Outlook and further apart in Gmail.
Break lines with <br> or separate rows, not <p>
A <p> brings its own top and bottom gap, and each app sets a different size. Use <br> inside one cell, or one table row per line.
Do: <br> inside one cell — Jane Doe Marketing Director jane@acme.com
Don't: one <p> per line
Outlook adds Word paragraph spacing to every <p>, and Gmail adds its own margin, so one-paragraph-per-line signatures look double-spaced.
Keep phone numbers and short groups on one line
Use non-breaking spaces ( ) inside phone numbers, or white-space:nowrap, so phones don't split them across two lines.
Do: +1 555 0100 + nowrap — +1 (555) 010-0100 · acme.com
Don't: normal spaces in a narrow column
Narrow phone screens wrap at any space. Outlook for Windows ignores white-space:nowrap, but it still respects — so use both.