Visual

Product typography

Typography guidelines ensure that we provide a consistent visual hierarchy that maximizes legibility throughout all of our written content.

Tip!
Tip!
This page contains guidelines for using typography within our products. If you're working on a brand or marketing project, please refer to our brand typography guidelines.

Typefaces

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.

Type tool

Presets
Font Size
Weight
Theme
Token
400
Line Height (px)
26px
Line Height (proportional)
1.48
SassCopy Both
@include Typography-size--400;
$Typography-weight--bold
JavascriptCopy Both
TYPOGRAPHY_SIZE_400
TYPOGRAPHY_WEIGHT_BOLD
CSSCopy Both
--typography-size--400
--typography-weight--bold
Component
<Text fontSize={400} fontWeight='bold' />

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

Type weights

WeightUse
Reserved for headlines and buttons
Reserved for and
Reserved for body copy and subtexts

Type styles

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.

Headlines

Headline

Headline is the largest text on the screen, reserved for short, important text or numerals.

This is a Headline

Headline

Subheadline

Subheadline is smaller than Headline. Subheadlines are reserved for short text that is slightly less important than a Headline.

This is a Subheadline

Subheadline

Small Subheadline
  • 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.
This is a Small Subheadline

Small Subheadline

Body copy

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.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Body Copy

Subtexts

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.
This is a byline
This is a small byline

Byline

Color

Please see our color documentation for guidance on using type with color.

Specimen

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.

This is a headline
This is a byline
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
This is a headline
This is a small byline
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
This is a headline
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
This is a small byline
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

Type setting

When type setting content, it’s imperative to proofread and spellcheck everything. For more information, please read the full writing guidelines.

Sentence case

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.

Sentence case

Do
Use sentence case on titles, headings, subheadings
Don't
Use periods at the end of a title or heading

Title case

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).

Using Typography in code

Design token documentation