Email Style Guide
- Gustavo Arrussul
Analytics
Email Design
Overview
This email style guide provides a clear and consistent framework for creating on-brand, engaging, functional, and professional emails. From typography and color palettes to layout and best practices, this style guide ensures that every email sent reflects Relias' identity, renders consistently across email clients and devices, and meets disparate user expectations.
Email design principles
BREVITY | MOBILE RESPONSIVENESS | VISUAL HIERARCHY |
|---|---|---|
Ensure the purpose of the email is immediately apparent and the content is skimmable. Use clear, concise language and a well-structured layout to guide the reader through the content. Strive to write paragraphs that do not exceed three or four lines in length. | Ensure emails are optimized for viewing on various devices, particularly mobile phones, to cater to the growing number of mobile users. | Organize content with a clear visual hierarchy, using different font sizes, on-brand colors, and formatting to prioritize important information and guide the reader's attention. Having only one H1 heading per email is considered a best practice. |
ACCESSIBILITY | PERSONALIZATION | LOADING SPEED |
|---|---|---|
Ensure the email design is accessible to all recipients, including those with disabilities. Use alt text for images and consider color contrast for readability. | When possible, use dynamic content and personalization to tailor the email experience to the recipient's preferences and behaviors. | Optimize email design to ensure fast loading times, minimizing the use of large images and heavy content that could slow down the email's display. Gmail has a size limit of 102KB for each email message. |
Brand colors
Typography
Font properties
| Jost, Helvetica | Open Sans, Helvetica | Tracking | Weight | Style |
|---|---|---|---|---|---|
H1/Title | 28 px |
| Normal | 700 | Normal |
H2/Subtitle | 22 px |
| Normal | 700 | Normal |
H3/Subhead | 20 px |
| Normal | 500 | Normal |
Subheadline | 16 px |
| 0.1 em | 600 | Uppercase |
Body Text |
| 16 px | Normal | 400 | Normal |
CTA |
| 16 px | 0.1 em | 700 | Uppercase |
Hyperlink |
| 16 px | Normal | 700 | Bold, underlined |
Footer text |
| 16 px | Normal | 400 | Italic |
Font color
| Product | Newsletter | Webinar | Dark background |
|---|---|---|---|---|
H1/Title | #272727 | #272727 | #272727 | #FFFFFF |
H2/Subtitle | #272727 | #272727 | #272727 | #FFFFFF |
H3/Subhead | #1C4923 | #063028 | #065642 | Lightest palette hue |
Subheadline | #3D9B46 | #177F59 | #1AAA89 | #E2E2E2 |
Body Text | #272727 | #272727 | #272727 | #FFFFFF |
CTA | #FFFFFF | #FFFFFF | #FFFFFF | #272727 |
CTA Button | #287339 | #177F59 | #05856A | Lightest palette hue |
Hyperlink | #287339 | #177F59 | #05856A | #FFFFFF |
Footer text | #272727 | #272727 | #272727 | #FFFFFF |
Build
Best practices
Accessibility
Do not use all uppercase letters except for acronyms. If you must use all uppercase letters, apply a style attribute within the element.
DO: <span style=”text-transform:uppercase;”>Get a copy now</span>
DON'T: <span>GET A COPY NOW</span>
Subject line
Limit your subject line to no more than nine words and 60 characters. Shorter is often better. You should use no more than one emoji at a time and, ideally, immediately before the subject line text.
Keep all caps to a minimum.
DO: 5 Must-Read Articles for This Week
DON'T: Post-Trade Show WEBINAR: Expert Insights Into Key Trends and Observations From the Trade Show Floor
Email client rendering issues
Email Client | Version | Support Issue | Solution |
|---|---|---|---|
Outlook
| 2007, 2010, and 2013 | GIFs appear as flat images (first frame). | If GIF has a headline or call-to-action, include it in the first frame. |
Outlook |
| Background images do not display. | Add a fallback background color (those with more advanced coding skills can consider using VML). |
Outlook | 2007, 2010, 2013, and Office 365 | Images are not scaling | Outlook does not support CSS styles for widths and heights. Include HTML width and height attributes to display your image at its intended size. |
Outlook |
| Unexpected horizontal lines appearing in the email | Update your content's font size and line height to be even numbered. |