Typography
Font Sizes
The variables for font sizes are all prefixed with --font-size-, which
is followed by a T-shirt size between xs and 4xl. For example, the
font size m represents a medium size for text and can be referenced as
--font-size-m.
Use sizes smaller than m sparingly, as overuse of small fonts can negatively
impact the readability of the page and potentially force users to zoom in.
This text has a size of xs.
This text has a size of s.
This text has a size of m.
This text has a size of l.
This text has a size of xl.
This text has a size of 2xl.
This text has a size of 3xl.
This text has a size of 4xl.
Font Weights
The variables for font weights are all prefixed with --font-weight-. For
example, the font weight normal can be referenced as --font-weight-normal.
This text has a weight of light.
This text has a weight of normal.
This text has a weight of semibold.
This text has a weight of bold.
This text has a weight of black.
Font Families
The variables for font families are all prefixed with --font-family-. For
example, the font family body can be referenced as --font-family-body.
This text has a family of body.
This text has a family of heading.
This text has a family of mono.