# Design Development / Best Practices

# Email Signature Design

# Best Practices Guide

## **Size & Dimensions**

### **Overall Dimensions**
- **Maximum width:** 600-700px (recommended: 320-600px)
- **Maximum height:** 200-300px (recommended: 150-200px)
- **File size:** Keep under 1MB total (ideally under 500KB)
- **Mobile consideration:** Design should scale well to 320px width

### **Image Specifications**
- **Format:** PNG or JPG (PNG preferred for logos with transparency)
- **Resolution:** 72 DPI (web standard)
- **Logo size:** Maximum 150px wide × 100px high
- **Social icons:** 16px × 16px to 24px × 24px

---

## **Typography & Fonts**

### **Safe Web Fonts** (Use these for maximum compatibility)
**Serif:**
- Georgia
- Times New Roman
- Times

**Sans-Serif:**
- Arial
- Helvetica
- Verdana
- Tahoma
- Trebuchet MS
- Geneva

### **Font Guidelines**
- **Primary text:** 12-14px
- **Name/Title:** 14-16px (can be bold)
- **Company name:** 12-14px
- **Contact details:** 11-12px
- **Legal disclaimers:** 9-10px
- **Line height:** 1.2-1.4 for readability

### **⚠️ Avoid:**
- Custom web fonts (Google Fonts, etc.)
- Decorative or script fonts
- Font sizes smaller than 9px

---

## **Design & Layout**

### **Structure Best Practices**
- **Left-aligned** layout works best across all clients
- **Single column** design preferred
- **Clear hierarchy** with proper spacing
- **Consistent margins:** 10-15px between sections

### **Color Guidelines**
- **Text color:** Dark colors (#333333, #000000) for body text
- **Links:** Blue (#0066CC) or brand colors
- **Backgrounds:** White or very light colors
- **Contrast ratio:** Minimum 4.5:1 for accessibility

### **Visual Elements**
- **Separators:** Use simple lines (1px solid) or spacing instead of complex graphics
- **Icons:** Use standard, recognizable symbols
- **White space:** Essential for readability and professional appearance

# Websafe Fonts

Web-safe fonts are typefaces pre-installed across virtually all operating systems (Windows, macOS, Linux, iOS, and Android), guaranteeing reliable rendering without downloading external web font files.

**Sans-Serif Fonts**

* **Arial**: Universal fallback font available on almost every device and browser.
* **Helvetica**: Classic macOS/Unix sans-serif; standard primary option paired with Arial fallbacks.
* **Verdana**: Wide character spacing designed specifically for screen legibility at small sizes.
* **Tahoma**: Compact sans-serif closely related to Verdana, optimized for tight UI layouts.
* **Trebuchet MS**: Humanist sans-serif featuring distinct character forms and open shapes.
* **Calibri**: Modern Microsoft sans-serif with soft, slightly rounded letter edges.
* **Segoe UI**: Modern system user-interface font standard across Windows platforms.
* **Century Gothic**: Geometric typeface with wide, circular curves and modern styling.
* **Arial Black**: Heavy, ultra-bold variant of Arial intended for large headings.

**Serif Fonts**

* **Times New Roman**: Standard transitional serif pre-installed across Windows and macOS platforms.
* **Times**: Traditional macOS/Unix counterpart to Times New Roman.
* **Georgia**: Screen-optimized serif font with wide proportions for clean digital reading.
* **Garamond**: Classic, elegant serif typeface with traditional print-inspired proportions.
* **Palatino / Palatino Linotype**: Renaissance-style serif featuring high stroke contrast and solid legibility.
* **Cambria**: Microsoft serif font engineered for long-form reading on digital displays.
* **Baskerville**: High-contrast, traditional serif typeface native to macOS environments.
* **Bookman / Bookman Old Style**: Wide, sturdy serif with heavy stroke weights.

**Monospace Fonts**

* **Courier New**: Standard typewriter-style monospace font supported on almost all systems.
* **Courier**: Older default monospaced font on macOS and Unix systems.
* **Consolas**: Clear monospaced typeface designed specifically for code blocks on Windows.
* **Monaco**: Clean, highly legible macOS native monospaced font.
* **Lucida Console**: Fixed-width font shipped natively with Windows operating systems.
* **Andale Mono**: Fixed-width font with distinct character styling native to macOS and Linux.

**Display, Cursive & Decorative Fonts**

* **Impact**: Ultra-condensed display font designed for bold headlines and titles.
* **Comic Sans MS**: Casual, handwritten sans-serif pre-installed across Windows and macOS.
* **Copperplate Gothic / Copperplate**: Capital-heavy decorative typeface featuring subtle serifs.
* **Brush Script MT**: Script-style cursive font mimicking fluid brush calligraphy.
* **Lucida Handwriting / Bradley Hand**: Casual script and handwriting fonts widely supported across Mac and Windows platforms.