← Documentation

Typography

Note about type styles#

The typographic styles included in the kit
The typographic styles we included

On purpose, we only provide you with a minimal number of styles. We built it this way so that you can customise the typography to your liking.

Find the Typography collection inside Variables and tweak the theme to customize the look and feel.

Changing the font across the kit#

To change the font across the kit, go to the typography variable collection. Under font definitions, you’ll find the following variables:

VariableDefault value
font-familyGeist
font-family-headingsReferences font-family
font-family-bodyReferences font-family
font-family-monospaceGeist Mono

Change font-family to update the font globally. Since font-family-headings and font-family-body reference it, they’ll update automatically. You can also override them individually if you want different fonts for headings and body text.

Each individual type style (e.g. heading 1, heading 2, etc.) also has its own variables for font-family, weight, font-size, line-height, spacing, and letter-spacing, so you can fine-tune each style separately.

Exporting type styles as Tailwind 4 utility classes#

You can export the type styles from the kit as Tailwind 4 @utility classes using the Obra shadcn/ui Pro CSS Export plugin. This gives you ready-to-use utility classes that match your Figma typography settings exactly.

Legacy docs#