Typography Variants

Composing type

Use Text and Heading components to render titles and body copy. These components share size and weight props and map to the underlying type system to ensure consistent typography throughout your app.

<Heading mb="2" size="xl">Typographic principles</Heading>
<Text>The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.</Text>

Formatting

Compose formatting components to add emphasis, signal importance, present code and more.

<Text>
  The <Em>most</Em> important thing to remember is,{" "}
  <Strong>stay positive</Strong>.
</Text>

Type scale

The typographic system is based on a 9 step scale, every step has a corresponding font-size, line-height and letter-spacing value which are all designed to be used in combination.

For more reference, see the Tailwind CSS Typography (opens in a new tab) documentation.

Font weight

The following weights are supported. see the Tailwind CSS Typography (opens in a new tab) documentation for more information.