Typography

Note about type styles#

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.

Type scale across styles#

Most styles share the same scale, but a few use a more compact one. All values are in px.

Type style	Luma (Large)	Vega (Large)	Sera (Large)	Maia (Large)	Nova (Medium)	Rhea (Medium)	Lyra (Small)	Mira (Small)
Heading 1	48	48	48	48	40	40	32	32
Heading 2	30	30	30	30	26	26	26	26
Heading 3	24	24	24	24	22	22	21	21
Heading 4	20	20	20	20	18	18	18	18
Caption	13	13	13	13	13	13	11	11
Paragraph large	18	18	18	18	18	18	16	16
Paragraph (base)	16	16	16	16	16	16	14	14
Paragraph small	14	14	14	14	14	14	12	12
Paragraph mini	12	12	12	12	12	12	10	10

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:

Variable	Default value
font-family	Geist
font-family-headings	References font-family
font-family-body	References font-family
font-family-monospace	Geist 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#