Email signature generator › Safe fonts

Fonts that survive the trip to the recipient

There is no reliable way to send a typeface with an email. The recipient's client picks from what is installed on their machine, working down a list you provide — so the list is the real design decision.

Why web fonts do not work here

On the web a page can instruct the browser to download a typeface. In email that instruction is stripped by Gmail, ignored entirely by Outlook for Windows, and honoured by a minority of clients. Designing around a font that a majority of readers will not receive means designing for a layout you will rarely see.

The list that is genuinely safe

Present on effectively every Windows and macOS machine: Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Tahoma, Trebuchet MS.

Widely available but not universal: Calibri and Cambria, which ship with Microsoft Office and are therefore on most business machines but not on a bare macOS install; Segoe UI on Windows; Palatino and Optima on macOS.

Everything else is a gamble whose outcome you never observe, because a reader whose machine substituted a font does not tell you.

How to write the stack

Name the font you want, then the closest widely available alternative, then a generic family:

font-family: Verdana, Geneva, sans-serif

The generic at the end is the part most people omit and the one that prevents the worst outcome. Without it, a client that cannot resolve any name falls back to its own default — and in Outlook that default comes from Word and is historically a serif, which is how a modern sans-serif signature arrives looking like a legal document.

Cross-platform pairs that match well

Arial, Helvetica, sans-serif renders nearly identically on Windows and macOS. Georgia, 'Times New Roman', serif is the safest serif pair. Verdana, Geneva, sans-serif gives a wider, more legible face at small sizes, which suits a signature. Tahoma, Verdana, sans-serif is narrower and fits more characters per line.

Declare it on every cell

Inheritance is not dependable in email HTML. A declaration on an outer element reaches the cells inside it in some clients and stops at the boundary in others, which produces a signature where two of five lines are in the right face. Repeat font-family on every cell that holds text. It is verbose, and it is the only construction that behaves identically everywhere.

Weights: 400 and 700, nothing between

Many of the fonts on a recipient's machine have only regular and bold. A declaration of font-weight:600 resolves to one or the other unpredictably, so the same signature can look noticeably different on two machines. Use 400 and 700.

Size, and the phone floor

Set the signature at 14px. Below roughly 13px, iOS and several Android clients enlarge the text on their own, which changes where lines break and can push a two-column layout out of shape. 14px avoids the scaling and is legible everywhere; the small print of a legal block can sit at 11px, where it is meant to be skipped anyway.

Where a brand font can still appear

Inside the logo, where it is pixels rather than text. That is the one place a typeface arrives exactly as you designed it, on every client, with no fallback — and it is the reason most brand identity in email signatures lives in the image.

Testing which font actually arrived

Send the signature to yourself, open the message in webmail in a desktop browser, and inspect the element. The computed style names the font that was resolved from your stack — not the one you asked for, the one the machine chose.

This distinguishes two failures that look identical: your font was ignored, or your font was never in the stack because a signature editor rewrote the declaration on the way in. The second happens more often than people expect after a signature has passed through two rich-text editors.

Line height, which travels with the font

A font declaration without a matching line-height inherits whatever the client uses, and clients differ by several pixels. Set it explicitly on every cell — line-height:1.5 at 14px gives 21 pixels per line, which is enough for links to be tapped individually on a phone without hitting the neighbour.

Frequently asked questions