Skip to main content


Typography can help create clear hierarchies, organize information, and guide users through a product or experience.


Open Sans

Usage:For headings

Open Sans

Usage:For body copy, descriptions, navigation

Font Stack

A font stack includes fallback system fonts for when the main font does not get loaded fast enough.

Heading Font

Body Font


Style Use for
Bold Use strong to emphasize text.
Italics Use em to italicize text.
Link Use when you are linking just a few words of text, or when a link is standalone.
1. Ordered List Use ordered lists to group items in a pre-determined order.
• Unordered List Use unordered lists to group related items.
Blockquote Use with a quotation that is typically longer than a few lines.

Typography Crimes


Use unapproved font families.

More Best Practices

  • Make sure your typography has sufficient color contrast. See accessibility for more info.
  • When sizing elements, its recommended to use REM units. These allow elements to scale based on a users brower font size.
  • The base font size for typography is 16px, which is equal to 1rem. All elements on the page scale based on this root font-size.
  • Try to stick to quarter units to simplify spacing values, font-sizes etc. ie. 0.25rem, 0.5rem, 0.75rem, 1rem.
  • Please limit the use of web fonts if possible, to help with site speed. Use no more than 2 font families.
  • Please ensure headings and copy have appropriate kerning set.