Typography

Corporate Font

Our corporate typeface is Source Sans Pro. We use four weights: light (h1 only), regular, semibold and occasionally bold.

Web fonts are not universally supported across email clients and it is important to specify a fallback web safe font. We use Helvetica, Arial or a sans-serif font as our default fallbacks.

More documentation on typography and the use of web fonts in email can be found on Litmus.

Helpful Hints

checkmark Do declare all text styles inline at the table cell level.
warning-indicator Don't link to an external CSS stylesheet as most desktop and webmail clients do not support this functionality.
information-indicator Separating each piece of content into its own table cell can be helpful for quick styling when working with large blocks of copy.
Illustration to show the typography hiearchy.

Text Block Width

The full body of the email should be no more than 640px wide. To ensure maximum readability, paragraph text should be set at an ideal line length of 45-80 characters per line (CPL). This translates to body copy set within a 300-500px wide area on a large-screen device. Lines of text that are much longer or shorter can become difficult for users to read – especially with paragraphs or multiple lines of text.


checkmark Allow text boxes to run a max of 500px wide only.

warning-indicator Avoid letting text blocks span wider than 500px.

Type Styles

Headings

There are six primary types of headings available through the standard header HTML tags. Heading elements identify important sections of content and create a logical, informational hierarchy for your message. It is important to remain consistent in the usage of headers throughout the body of the email.

Body Copy and Smaller Styles

Body copy should be identified by using the paragraph <p> style.

Small text is used for supporting text, such as captions and other secondary copy. It should not be used as the primary body copy size.

Smaller text should be used only for disclaimers or short amounts of copy.

Helpful Hints

information-indicator All text styles use ADA compliant colors by default.
information-indicator If text needs to be changed to a different color, ensure that the color contrast meets at least WCAG AA Level guidelines. Use this site to ensure color contrast is acceptable.
Illustration to show typography styles.

Weights

Four weights can be applied to Source Sans Pro by using the following inline CSS styles:

font-weight: 300;
font-weight: 400;
font-weight: 600;
font-weight: 700;

Helpful Hints

information-indicator Avoid adjusting the weight of an element for purely stylistic reasons.
information-indicator It’s important headings look consistent across pages. This helps the user quickly scan the page because they understand how it is laid out.
Four different weights can be applied to Source Sans Pro.

Text Links

Links in copy blocks are underlined. Link elements sit away from blocks of copy and are identified by using a right arrow HTML entity.

It is important to use meaningful link text that provides adequate context to let subscribers know where the link is taking them.

Helpful Hints

checkmark Use clear, descriptive language written in sentence case.
warning-indicator Avoid using vague text, such as “Click here” or “Learn more”.
Links in copy blocks are underlined. Link elements sit away from other text and have a carrot.

Contact Us

Have a general question or comment? Send us a message