Typography

The typography tokens are made up of font families, weights, sizes, and line heights.

Font Family

Font Weight

Size and Height

Setting font-size and line-height should almost never be done manually. Instead, prefer using the appropriate preset Heading or Body component. The values listed here are paired and mapped to the different presets. They are listed separately here mostly for reference.

Prefer preset sizes

In React, prefer using a preset size by either using the Heading or Body component or by applying a textStyle before overriding fontSize or lineHeight.

In Bootstrap, Heading and Body preset sizes are baked in to both <h1> through <h6> elements or corresponding .heading-* class.

Font Size

Line Height

Design guidance

Figma

We deliver type styles to designers via Figma shared styles, via the Typography library. Figma design files you create will have these included by default.

Accessibility

We aim for WCAG 2.1 level AA color contrast, i.e. 4.5:1 in most cases. The default colors we ship for type in Heading and Body meet this standard when on the default background. If you're using a custom color or background color, please confirm the color contrast before delivering designs. For more details about our color palettes, see the color tokens documentation.

Line length

Running text that spans multiple lines at standard screen sizes should adhere to best practices for line length. That means ensuring that no line of type in running text contains more than about 66-72 characters including spaces and punctuation, regardless of text size.