📧 What This App Does
The Alterspective Email Signature Generator creates professional, brand-compliant email signatures that work reliably across all major email clients. It solves the common problem of email signatures breaking, losing formatting, or displaying incorrectly when copied into Outlook or other email applications.
🎨 Brand Consistency
Generates signatures that follow Alterspective's visual identity guidelines, including colors, fonts, and logo placement.
📱 Two Signature Types
Creates both a full signature for new emails and a compact version for replies and forwards.
📋 One-Click Copy
Copy your signature with embedded images directly to clipboard, ready to paste into Outlook.
💾 Download Option
Download signatures as HTML files for backup or manual installation on multiple devices.
⚙️ How Signatures Are Generated
The generator uses a carefully engineered process to create email signatures that maintain their appearance across different email clients.
1. Form Data Collection
When you enter your information, the app validates each field to ensure proper formatting:
- Name and Title: Displayed prominently in your signature
- Email: Validated for proper format and made clickable (mailto: link)
- Mobile: Formatted with clickable tel: link for easy dialing on mobile devices
- Website: Converted to a clickable HTTPS link
2. HTML Structure Generation
The signature is built using table-based HTML layout rather than modern CSS (flexbox/grid). This is intentional because:
- Tables have universal support across all email clients since the 1990s
- Microsoft Outlook uses Word's rendering engine, which doesn't support modern CSS
- Gmail strips many CSS properties but preserves table layouts
Technical Detail: All styling is applied using inline CSS attributes directly on HTML elements. External stylesheets and CSS classes are stripped by most email clients, so every style must be specified inline for reliability.
3. Image Embedding
The company logo is embedded directly into the signature using Base64 encoding. This means:
- The image data is converted to text and included in the HTML
- No external server requests are needed to display the logo
- The signature works offline and won't show broken image placeholders
- Recipients see the logo immediately without downloading from a server
4. Two Signature Variants
Each generation creates two versions optimized for different contexts:
- New Email Signature: Full 120x120px logo, complete contact details, website link, vertical divider
- Reply Signature: Compact 40x40px logo, name and title combined, essential contact info only (70% smaller)
🔤 Typography and Fonts
The signature uses carefully selected fonts that balance professionalism with reliable email client support.
Why Not Chronicle Display?
The Alterspective brand guidelines specify Chronicle Display as the primary serif typeface. However, email signatures cannot use Chronicle Display due to fundamental limitations of email clients:
Email Font Limitation: Email clients (especially Microsoft Outlook) do not support custom or embedded fonts. Unlike web pages, email HTML cannot load font files via @font-face or include embedded OTF/TTF fonts. This is a universal limitation across all email signature implementations.
| Email Client | Custom Fonts | What Happens |
|---|---|---|
| Outlook (Windows) | ✗ Not Supported | Strips all @font-face declarations, ignores web fonts entirely |
| Outlook (Mac) | ✗ Very Limited | May attempt to load but often fails silently |
| Gmail | ⚠ Partial | Blocks external font loading for security reasons |
| Apple Mail | ✓ Supported | Only client with reliable web font support |
Because Outlook is the primary email client for business communications, we must use web-safe fonts that are pre-installed on recipients' computers. Chronicle Display would only display correctly for Apple Mail users (a small minority of business email).
Fonts Used in Signatures
- Names: Georgia (serif) - The closest web-safe alternative to Chronicle Display, with similar elegant serif characteristics
- Job Titles and Contact Info: Montserrat (sans-serif) - From the Alterspective brand guidelines, with Arial as fallback
Font Fallback Chain
Each font declaration includes fallbacks to ensure readability even if the primary font is unavailable:
- For Names: Georgia → Times New Roman → Times → serif
- For Body: Montserrat → Arial → Helvetica → sans-serif
Why Georgia? Georgia was designed by Matthew Carter specifically for screen readability. It shares Chronicle Display's elegant serif characteristics while being universally available on Windows, Mac, iOS, and Android devices.
Montserrat Note: While Montserrat is loaded via Google Fonts for the best appearance, Outlook and some other email clients will automatically fall back to Arial, which is installed on virtually all computers and maintains readability.
Font Preview
E: john.smith@alterspective.com.au
✅ Email Client Compatibility
Ensuring signatures display correctly across different email clients is the primary technical challenge. Here's how we ensure compatibility on both Windows and Mac.
Compatibility Matrix
| Email Client | Platform | Status | Notes |
|---|---|---|---|
| Outlook (New) | Windows | ✓ Tested | Full support, paste directly |
| Outlook (Classic) | Windows | ✓ Tested | Uses Word engine, tables essential |
| Outlook | Mac | ✓ Tested | Full support, paste directly |
| Outlook Web | Browser | ✓ Tested | Works on all browsers |
| Gmail | Browser | ✓ Compatible | Tables and inline styles preserved |
| Apple Mail | Mac/iOS | ✓ Compatible | Best rendering of all clients |
Why Tables Instead of Modern CSS?
Modern web development uses CSS Flexbox and Grid for layouts, but email clients don't support these:
- Outlook Windows uses Microsoft Word's rendering engine, which predates modern CSS
- Gmail actively strips many CSS properties for security
- Tables have been supported since HTML 3.2 (1997) and work everywhere
Key Compatibility Techniques Used
Table Layout
All positioning uses nested tables with cellpadding="0" and cellspacing="0" for precise control.
Inline Styles
Every style is applied directly on elements. No external CSS or style blocks.
Border-Based Dividers
Vertical lines use border-right property on content cells, not background colors on empty cells.
Fixed Dimensions
All sizes specified in pixels (px), never em, rem, or percentages.
100% Line Height
Line-height always set to 100% for consistent spacing across Outlook versions.
Base64 Images
Logo embedded as data URI so it copies with the signature and displays offline.
Windows-Specific Considerations
Microsoft Outlook on Windows is the most restrictive email client because it uses Word's rendering engine. Our signatures are specifically designed to:
- Avoid CSS properties Word doesn't understand (margin, float, position)
- Use border-right for divider lines (Word strips background-color on empty cells)
- Specify explicit width/height on all images
- Use web-safe fonts with proper fallbacks
Mac-Specific Considerations
Outlook for Mac uses a different rendering engine than Windows, with better CSS support. However, we maintain compatibility by:
- Using the same table-based structure for consistency
- Ensuring signatures look identical on both platforms
- Testing copy/paste workflow in Outlook for Mac
Quality Assurance: Every signature template is tested by copying to Outlook on Windows and Mac, then sending test emails to verify the signature displays correctly in the recipient's email client.
📊 Technical Summary
Technologies Used
HTML5 CSS3 (limited subset) JavaScript ES6+ Clipboard API Base64 Encoding
Signature Specifications
| Specification | New Email | Reply |
|---|---|---|
| Logo Size | 120 x 120 px | 40 x 40 px |
| Divider Width | 2px | 1px |
| Logo-Content Spacing | 15px | 10px |
| Name Font Size | 16px | 14px |
| Body Font Size | 12-13px | 13px |
Brand Colors
Navy #17232D Green #2C8248 Citrus #ABDD65 Marine #075156