Font Families

Core uses Open Sans as the base font for the site.

The full Open Sans type family consists of a variety of weights including light, regular, semibold, bold, and extrabold which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.

• Open Sans font is used for headings and body content.

Web font stack

Web font stack: Open Sans > Helvetica > Arial > Verdana > Sans-Serif

Working with these fonts

The design system provides guidance for headings, body copy, links, and lists.

The ds-content class

For pages that are mainly about written content or places where you want to use a standard mapping of heading-level styles to semantic heading levels, consider using the ds-content class.

Responsive typography

To apply responsive typography elsewhere, use the font size utility class. Since the base typography margins and line height is measured in em units, they'll automatically adjust as you change the font size.

Accessibility

Sans-serifs have been proven to be easier to read on-screen and are incredibly adaptable when resized and displayed across different platforms and browsers. Accordingly, Open Sans is used for body type, secondary and tertiary headlines, and instructional text.

• Standard body text is Open Sans Regular, 16px, #333, 24px line-height, 32px bottom-margin on paragraphs.

• Smallest paragraph text for legibility reasons is Open Sans Regular, 14px, #333, 20px line-height, 28px bottom-margin on paragraphs (except for legal/caption text).

• Uppercase font should not be used.