Typography
Font sizes are smaller on mobile and scale up at the md breakpoint to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|---|---|---|---|---|
| 00 | 40px | 48px | 60 | 72 |
| 0 | 32px | 40px | 50 | 60 |
| 1 | 26px | 32px | 40 | 48 |
| 2 | 22px | 24px | 30 | 36 |
| 3 | 18px | 20px | 25 | 30 |
| 4 | 16px | 16px | 20 | 24 |
| 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 |
Heading utilities
Use .h1 – .h6 to change an elements font size and weight to match our heading styles.
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.
Type scale utilities
Use .f1 – .f6 to change an elements font size while keeping inline with our type scale.
Lighter font-weight utilities are available in a limited range. 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.
Line height styles
Change the line height density with these utilities. Responsive variants are also available (e.g. .lh-sm-condensed).
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.
Word-break
There are two utilities for adjusting how lines and words of text break when they exceed the width of their containing element:
wb-break-wordsetsword-break: break-wordandoverflow-wrap: break-word, which will only break words if they would exceed the line length after wrapping.wb-break-allsetsword-break: break-all, which will force a word to break regardless of whether it's shorter than the line length. See MDN'sword-breakdocs for more info.
Text alignment
Use text alignment utilities to left align, center, or right align text.
Responsive text alignment
Use the following formula to make a text alignment utility responsive: .text-[breakpoint]-[alignment]
List styles
Remove bullets from an unordered list or numbers from an ordered list by applying .list-style-none to the <ul>.
