Designing Signatures That Read Well on Phones

Most signatures are designed on a 27-inch monitor and read on a 6-inch phone. Here are the rules that keep them legible everywhere.

According to most public mobile-vs-desktop email statistics, roughly 60% of business email is opened on a phone first. That number gets ignored constantly in signature design because the designer is invariably on a laptop with a calm grey background and 1600 pixels of horizontal space, and the design tools all preview at that size. A signature that looks balanced on a 27-inch monitor often looks cramped, oversized, or visually noisy on a 6-inch phone in someone's hand on a train. Designing for the phone first solves the problem in both directions.

The width problem

A modern email signature designed for desktop is often 600 pixels wide — the historical convention from when email templates targeted Outlook 2003 default window widths. On an iPhone in portrait orientation, the visible viewport is roughly 375 to 430 CSS pixels wide depending on the device. A 600-pixel signature does not fit, and the client has to make a choice: shrink the entire signature to fit (making text smaller), force horizontal scrolling (which most clients refuse to do), or break the layout (which is what usually happens).

The right design constraint is to assume your signature will be rendered at about 400 pixels wide on a phone. Anything that requires the full 600 pixels to look right will break on most opens. Two-column layouts are particularly fragile: a signature with the logo on the left and contact details on the right at 600 pixels wide either has to stack vertically on mobile (which most table-based signatures cannot do) or shrink the logo and contact text together to fit.

The safest mobile-friendly layout is a single-column stack: logo on top, then name and role, then contact details, then social icons, then any banner. This stacks identically on desktop and mobile, just narrower on the phone. Two-column layouts work but require careful sizing so the columns shrink gracefully.

Tap targets and link accessibility

Apple's human-interface guidelines and Google's Material accessibility guidelines both recommend a minimum tap target of 44×44 CSS pixels. A phone number formatted as plain inline text inside a signature is often well under 44 pixels tall and difficult to tap precisely, especially for users with motor impairments.

The simplest fix is to make each contact line its own clearly tappable block. Wrap the phone number in a tel: link, the email address in a mailto: link, and the website in a standard https: link. Modern phones automatically detect phone numbers and turn them into tap-to-call regardless, but explicit links are more reliable and accessible.

Social icons are another tap-target issue. A row of 16-pixel social icons jammed close together is impossible to tap accurately on mobile. The minimum comfortable size for clickable icons is 24 pixels with at least 8 pixels of spacing between them. SignatureCraft's default social-icon size is 28 pixels for exactly this reason.

Text size and dark mode

Body text under 13 pixels is genuinely hard to read on a phone in normal lighting. Many email signatures use 10 or 11-pixel text for contact details, which looks elegant on a Retina laptop screen and is illegible on a phone in sunlight. Set 13 pixels as the floor for any text recipient might need to read accurately, including the contact lines.

Dark mode adds an additional layer of complexity. Most modern email clients on phones support automatic dark mode, where the client inverts background colours and shifts text colours to maintain contrast. Signatures designed only for a light background can look strange in dark mode: black text on a now-dark background, logos with white backgrounds appearing as awkward white rectangles, divider lines that vanish entirely.

The defensive design choice is to test your signature in both light and dark mode (which SignatureCraft's editor lets you toggle in the preview pane). Use transparent PNG logos rather than logos with hard-coded white backgrounds. Use colour values with sufficient contrast against both white and very dark grey backgrounds. Avoid pure white as a divider colour — a mid-grey works in both modes.

Hidden bandwidth costs

Phones are sometimes on slow networks or expensive metered data plans. A 500KB signature image is mostly invisible on home WiFi but slow and costly on a 3G connection in a parking garage. Lean image weights matter more for mobile recipients than for desktop ones.

The practical target for total signature image weight is under 200KB and ideally under 100KB. A typical 2× PNG logo at 160 pixels wide compresses to 15–30KB. A typical 2× banner at 1000 pixels wide compresses to 50–120KB depending on complexity. If you are over budget, run images through TinyPNG or Squoosh — most signatures can lose half their byte weight with no visible quality loss.

Step by step

  1. Open the editor and switch to the mobile preview — In SignatureCraft, the preview pane has a phone/desktop toggle. Switch to phone and design from there — what looks good on phone will also look good on desktop, but not vice versa.
  2. Set a single-column layout if possible — In the Styling tab, prefer the stacked layouts. Reserve two-column layouts for signatures where the logo is small enough not to cramp the contact column.
  3. Bump body text to 13 pixels minimum — In Styling → Typography, set the body size to at least 13 pixels. Larger is fine; smaller is illegible on phones.
  4. Add explicit tel: and mailto: links — In the Contact section, ensure phone and email fields are tagged as Tel and Email types — this generates the proper link types automatically.
  5. Test in dark mode preview — Toggle dark mode in the preview pane. If your signature looks broken or low-contrast, swap your logo for a transparent version and adjust any hard-coded colours.
  6. Compress your images — Before final export, run each image through TinyPNG or Squoosh. Aim for under 100KB total across all signature images.

Tips

  • If your signature has a banner, double-check that the banner stays legible at half its design width — that is roughly what phones will render.
  • Avoid putting essential information (your name, contact details) into images. Image-blocked recipients will see nothing.
  • Consider a shorter "mobile-optimised" signature variant for replies, which are read on phones far more often than initial sends.