Typography

Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible.

Font sizes are smaller on mobile and scale up at the md breakpoint to be larger on desktop.

ScaleFont size: mobileFont size: desktop1.25 line height1.5 line height
0040px48px6072
032px40px5060
126px32px4048
222px24px3036
318px20px2530
416px16px2024
514px14px17.521
612px12px1518

Heading utilities

Use .h1.h6 to change an elements font size and weight to match our heading styles.

View in Storybook

These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.

View in Storybook

Type scale utilities

Use .f1.f6 to change an elements font size while keeping inline with our type scale.

View in Storybook

Lighter font-weight utilities are available in a limited range: .f00-light - .f3-light. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to f3 at 20px. The larger sizesf0 and f00 allow for lighter and larger type that is in keeping with our marketing styles.

View in Storybook

Line height styles

Change the line height density with these utilities: .lh-default, .lh-condensed, .lh-condensed-ultra. Responsive variants are also available (e.g. .lh-sm-condensed).

View in Storybook

The lh-0 utility class sets line-height: 0 !important, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.

Typographic styles

Change the font weight, styles, and alignment with these utilities.

View in Storybook

Word-break

There are two utilities for adjusting how lines and words of text break when they exceed the width of their containing element:

  1. wb-break-word sets word-break: break-word and overflow-wrap: break-word, which will only break words if they would exceed the line length after wrapping.

  2. wb-break-all sets word-break: break-all, which will force a word to break regardless of whether it's shorter than the line length. See MDN's word-break docs for more info.

View in Storybook

Text alignment

Use text alignment utilities .text-left, .text-center, and .text-right to left align, center, or right align text.

View in Storybook

Responsive text alignment

Use the following formula to make a text alignment utility responsive: .text-[breakpoint]-[alignment].

View in Storybook

List styles

Remove bullets from an unordered list or numbers from an ordered list by applying .list-style-none to the <ul>.

View in Storybook