# Email signature design: 600×200 banners that stay small [Canonical HTML page](https://gradiently.design/guide/email-signature-design) Your signature goes out on every email you send, which makes it the most viewed design you own. Here is how to make one that looks considered, loads fast and never turns into a paperclip. ## The short version - A good email signature design keeps your name, role and contact details as live text and adds at most one small image banner. - A signature banner works well at 600×200 pixels, a 3:1 strip that fits inside the narrowest email layouts. - Exporting the banner at double size, 1200×400, and displaying it at 600 pixels wide keeps it sharp on high density screens. - Many email clients block images until the reader allows them, so nothing essential should exist only inside the banner. - A hosted image with a full https address keeps each email light, while a pasted image is often sent as an attachment on every message. Good **email signature design** is mostly restraint: your name, role and one or two ways to reach you as real text, then one small banner image of 600×200 pixels that carries your brand. Keep the banner light, link it to one page, and never put your phone number or email address only inside the picture, because many inboxes hide images until the reader says otherwise. ## What belongs in an email signature A signature has two jobs: tell people who you are and how to reach you, and remind them what you do. The first job is text. The second can be a banner. Anything beyond that is clutter that people learn to skip. | Element | Format | Notes | | --- | --- | --- | | Name | Text, bold | The one thing that should be larger | | Role and company | Text | One line, separated by a comma | | Phone or booking link | Text link | One primary way to act, not four | | Website | Text link | Short and readable, without `https://` | | Banner | Image, 600×200 | Optional; links to one page | | Social icons | Small images | Two or three at most, or skip them | Text first, image second. If every image failed to load, the signature should still work. ## Email signature banner size and weight Design the banner at 600×200 pixels, a 3:1 strip. Six hundred pixels is the width classic email templates are built around, so a banner that size fits in a phone's mail app and a desktop reading pane without scaling. For high density screens, export the same design at double size, 1200×400, and tell the email to show it at 600 pixels wide. - Signature banner 600×200: 600 × 200 - Email header 1200×600: 1200 × 600 - Business card 1050×600: 1050 × 600 A signature banner beside a newsletter header and a business card, to scale. The banner is a slim strip, not a poster. Weight matters more than you'd think, because the image travels with every reply in a long thread. Aim to keep the file well under 100 KB. A gradient banner exports beautifully as a high quality JPEG; use PNG only when you need transparency or very fine lettering. If you're also making a newsletter, the [email header design](https://gradiently.design/guide/email-header-design) guide covers the larger format. ## Designing the banner A banner seen a hundred times a week should say one thing and say it calmly. It works best as a quiet promotion: your next event, a new service, a booking link, or simply your brand's look with a short line. Change the words with the season; keep the background. A slim email signature banner for a photography studio reading Now booking spring weddings over a soft gradient A photographer's banner: one timely line and the studio name. An email signature banner announcing a free webinar on 12 November A consultancy promoting one event. When it's over, swap the line. ### Avoid - Contact details only inside the image - A banner of several hundred kilobytes - Animated GIFs that loop forever - Quotes, disclaimers and five social icons - Small grey text that vanishes in dark mode ### Do - Name and links as live text - A light 600×200 banner, under 100 KB - A still image, or one gentle loop at most - One call to action - A banner with its own background, so it reads in light and dark mode Dark mode is a real trap. Some mail apps invert or tint light colours, so a logo on a transparent background can disappear against a dark inbox. A banner that carries its own full background, such as a rich gradient, looks the same in both modes. [Dark mode design](https://gradiently.design/guide/dark-mode-design) and [gradients in email](https://gradiently.design/guide/gradients-in-email) go deeper on how clients treat colour. ## HTML for an email signature that holds together Email clients are old fashioned about layout, so signatures are built with simple tables and inline styles. This one works in the common clients: paste it into an HTML file, open it in a browser, select everything and copy it into your mail app's signature settings. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Details as live text, one hosted banner shown at 600×200 from a 1200×400 file, with alt text that still makes sense if images are blocked. > **Host the image, don't paste it** When you paste or upload an image straight into a signature, some mail apps send it as an attachment on every message, which shows up as a paperclip and fills inboxes. Linking to an image on your own website with a full https address avoids that. ## Setting up your signature, step by step 1. **Write the text block** Name, role and company, one link to act on, your website. Read it aloud; cut anything you wouldn't say. 2. **Design the banner at 600×200** Use your brand background and one short line. Keep the words in the middle with room at both ends. 3. **Export at 1200×400** A high quality JPEG for gradients and photos, PNG for transparency. Check the file is under 100 KB. 4. **Upload it to your website** Put it in a stable folder such as `/email/`, so the address never changes and old emails keep their banner. 5. **Build and paste the HTML** Adapt the code above, set the width to 600, write real alt text and paste it into your mail app. 6. **Test it properly** Send it to a Gmail and an Outlook address, open it on a phone, switch dark mode on and off, and reply to the thread twice. ## Keeping a team's signatures consistent Signatures drift: one person adds a quote, another uses last year's logo. Give the team one HTML template and one banner, and change the banner centrally when the message changes. The same discipline described in [brand consistency](https://gradiently.design/guide/brand-consistency) applies here, at a smaller size. Gradiently has an Email signature size of 600×200 ready in the Studio, and a custom 1200×400 size covers the high density export. Free exports carry a small watermark, so a clean banner needs Pro, which also brings the brand kit: logo, colours and fonts in one place. The Mark behind the banner is the same one on your social posts and [business cards](https://gradiently.design/guide/business-card-design), so a reply in someone's inbox looks unmistakably like the rest of your brand. ## FAQ ### What size should an email signature banner be? Design it at 600×200 pixels. Export at 1200×400 and set the image width to 600 so it stays sharp on high density screens. ### How big should an email signature image file be? Keep it well under 100 KB. The image is sent or loaded with every email and every reply, so a heavy file adds up quickly. ### Why does my email signature image show as an attachment? Some mail apps attach pasted or uploaded images to every message. Host the image on your website and link to it with a full https address instead. ### Should I put my phone number in the signature image? No. Many email clients block images by default, and text inside an image can't be tapped or copied. Keep contact details as live text. ### Can I use an animated GIF in my email signature? You can, but keep it small and subtle. A looping animation on every email in a long thread quickly becomes distracting, and some clients show only the first frame.