Typography guidelines ensure that we provide a consistent visual hierarchy that maximizes legibility throughout all of our written content.
While our brand typeface is Proxima Nova, our web and mobile apps utilize system font families to provide our users with an experience that is performant and optimized for their device.
Line heights are calculated to ensure at least three lines align to an 8px grid. Please use only the associated line height values.
- DO: Use documented font weight, color or size variations to create hierarchy
- DON’T: Use font weights or sizes not documented in the guidelines
|bold||Reserved for headlines and buttons|
|semibold||Reserved for text links and labels|
|normal||Reserved for body copy and subtexts|
When working with different type styles it’s important to adhere to the type scale at all times. Below are some standards for the web we’ve defined to help you get started using the correct sizes for your content.
Headline is the largest text on the screen, reserved for short, important text or numerals.
Subheadline is smaller than Headline. Subheadlines are reserved for short text that is slightly less important than a Headline.
- Small Subheadline is smaller than Headline and Subheadline. Small Subheadline is reserved for short text that is the lowest level headline.
- Typically used for labels or the lowest level of emphasis.
Typically used for long-form writing as it works well for small text sizes.
- In our application, we are defining long-form as any copy that’s a phrase or longer.
- Typically used for paragraphs, descriptive text.
- Line lengths of around 10 - 15 words.
Descriptive details that support a more important element. Rarely, if ever used alone.
- Includes our smallest font sizes. Often subdued and very low emphasis.
- Typically used sparingly as a byline to supplement a headline or summarize author, date, time, etc.
Please see our color documentation for guidance on using type with color.
This type specimen showcases real-world combinations of the different type sizes. You might see type used like this in cards or even message bubbles.
- DO: Use between 50-80 characters per line when possible
- DON’T: Use hyphens for line breaks
- DO: Use left-aligned paragraph style and/or centered depending on existing visual/spacial factors
- DON’T: Use fully-justified and/or right-aligned paragraph styles
- DO: Use clean, balanced rags when typesetting a block of text in left alignment
- DON’T: Allow for orphans or widows in column and/or paragraph formating
When type setting content, it’s imperative to proofread and spellcheck everything. For more information, please read the full writing guidelines.
To feel more human and personal, all titles and headlines should be written in sentence case. Never use a period at the end of a title or headline. The only end punctuation used should be a question mark following a question, or an ellipsis if breaking up a sentence.
- DO: Use sentence case on titles, headings, subheadings
- DON’T: Use periods at the end of a title or heading
The only times text should be shown in title case is when displaying a CTA inside a button, referencing a proper noun or when the header is used as a label (e.g. the section headers on this page).