Styling & layout

Set colors, fonts, widths, and buttons that hold up in every inbox.

Navigation Menu

Navigate Home Path overview 1 HTML basics 2 Merge tags

Styling & layout 4 Testing & previewing 5 Common snippets 6 Review & resources

Four value types

The header template sets styles for the whole email, so you change values instead of styling every tag. Every placeholder is one of four types.

Color

A hex code, such as #0064ff. Set body, text, button, and legal colors. Match the Outlook background to your body background.

Size

A pixel value, such as 14px. Set content width, mobile width, font size, and logo size.

Font

A full font stack that ends in Arial or Helvetica, not a single font name.

URL

A public HTTPS link for your logo, font file, and legal pages.

Fonts

Always end your font stack with a safe system font. Gmail and Outlook for Windows ignore custom fonts and show the next font in your stack.

Email client	Custom fonts	What the reader sees
Apple Mail (macOS)	Yes	Your custom font
iOS Mail	Yes	Your custom font
Samsung Mail	Yes	Your custom font
Gmail (web and app)	No	Next font in your stack
Outlook (Windows)	No	Next font in your stack
Outlook (macOS)	Partial	Depends on the version
Yahoo Mail	No	Next font in your stack

Custom font file

Host a WOFF2 file at a public HTTPS URL. If you skip custom fonts, delete the entire @font-face block.

Layout and buttons

The guide's example uses a 580px content width and a 310px mobile width. The template already includes a mobile rule for screens up to 479px wide, so change only its width value.

Buttons use a two-color gradient by default. For a flat button, swap the gradient line for a single color.

Button style

/* Gradient (default) */
background-image: linear-gradient(BUTTON_COLOR_TOP, BUTTON_COLOR_BOTTOM);

/* Flat */
background-color: YOUR_COLOR;

← Merge tags 3 of 6 4. Testing & previewing →

Resources

Email HTML template guide Recurly Docs: Email templates Contact Recurly Support