Signatures look wrong
Layout, images, fonts and spacing: what actually causes each one, and what to change.
- Last updated
- 7 minute read
- Troubleshooting
- Signatures
Email clients render HTML inconsistently, and Outlook on Windows is the most opinionated of them. Almost every formatting complaint traces back to markup rather than a bug in Signed.
The layout falls apart in Outlook
- Built from divs. Outlook lays out divs differently from every other client. Rebuild the layout as a table with
role="presentation". - Styled with a `<style>` block or class names. Both are stripped. Everything must be inline on the element.
- Missing `cellpadding` and `cellspacing`. Outlook adds its own spacing without them, which shifts everything by a few pixels.
Note: The designer builds Outlook-safe HTML already. Layout problems usually appear after hand-editing the HTML view. Check the HTML view for divs and classes first.
Images are missing
There are three different problems here, and they have different answers.
| What you see | Cause | Fix |
|---|---|---|
| A grey box or nothing | The reader's client blocks images by default | Nothing to fix. Keep essential details as text, and check how it looks with images off |
| Broken image icon | The image address is wrong, or it was deleted | Re-upload the photo or logo and check the person's photo_url |
| Initials instead of a photo | Their photo_url is empty | Add a photo on their record, or switch photos off in the designer |
Tip: Never put a phone number or an address inside an image. Somewhere around a third of readers will see a blank space where it was.
Fonts change and spacing grows
- Web fonts are not loaded. Mail clients ignore them. Use a font that is installed on the reader's machine, which is why the designer offers a short list.
- Font size and family set separately. Set them together, for example
font:bold 15px Arial, so clients interpret them as one instruction. - Extra blank lines in replies. Outlook often adds spacing around the quoted history. It is Outlook's doing rather than the signature's, and it affects every signature equally.
- Dark mode inverts the wrong things. A signature with a light background can end up with light text on a light panel. Text-only designs with no background colours behave best.
- Open the signature, go to the HTML view and search for
divandclass. - Replace each div with a table row, and each class with an inline style.
- Set every font with the shorthand rather than separate properties.
- Save, then check someone's signature and send yourself a real email.
The signature is in the wrong place in a reply
Signed places the signature; where it sits relative to the quoted history is Outlook's decision. In a reply, Outlook puts the cursor at the top and the signature below it, which is what most people expect. Forwarding can look different, and there is no setting in Signed that changes it.
- If the placement matters to your organisation, the most reliable fix is a plainer signature for replies, chosen by a rule.
- The Signed button in the message ribbon lets someone remove the signature from one message without changing anything permanent.
Common questions
It looks perfect in the preview but different in Gmail.
The preview shows what Signed generates, and Gmail rewrites some markup on the way in. Check in both, and keep the design simple: single column, table layout, inline styles.
Why does the logo look blurry?
It is being scaled up. Use an image at least 200 pixels wide at the size you display it, and upload a PNG rather than a JPEG with a white background.
Related articles
- Writing your own HTMLEvery variable Signed understands, plus the handful of HTML rules that keep signatures intact in mail clients.
- Photos, logos and imagesWhere each image comes from, what happens when one is missing, and how to keep signatures light.
- A signature is not showingWork down this list in order. It separates the four or five causes that account for almost every case.
Something here out of date, or a step that did not work? Tell us and we will fix the article. Every page is checked against the running product, so corrections are welcome.