Typography

The design system provides typography classes through either the Tailwind plugin or CSS variables. These target the font shorthand property.

Example

Brand

Body, primary color

Body, primary color (css variables)

<div className="font-body-md text-neutral-primary">
  Body, primary color
</div>

{/* Or via CSS variables */}
<div
  style={{
    color: `var(--color-text-neutral-primary)`,
    font: `var(--font-static-body-md-default)`,
  }}
>
  Body, primary color (css variables)
</div>

Uncolored by default

Typography classes are not colored by default, which enables you to use them in any color context. For optimal results, pair them with a color class from our color palette.

Static Fonts

Static fonts maintain consistent sizing across all screen sizes.

Display

Display fonts are used for large, prominent headings and hero text.

Tailwind Class

font-display-lg

CSS Variable

--font-static-display-lg

Computed Value

Example

Tailwind Class

font-display-md

CSS Variable

--font-static-display-md

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
`font-display-lg`	`--font-static-display-lg`		Aa
`font-display-md`	`--font-static-display-md`		Aa

Heading

Heading fonts provide a complete hierarchy for content structure.

Tailwind Class

font-heading-xxxl

CSS Variable

--font-static-heading-xxxl

Computed Value

Example

Tailwind Class

font-heading-xxl

CSS Variable

--font-static-heading-xxl

Computed Value

Example

Tailwind Class

font-heading-xl

CSS Variable

--font-static-heading-xl

Computed Value

Example

Tailwind Class

font-heading-lg

CSS Variable

--font-static-heading-lg-default

Computed Value

Example

Tailwind Class

font-heading-md

CSS Variable

--font-static-heading-md-default

Computed Value

Example

Tailwind Class

font-heading-sm

CSS Variable

--font-static-heading-sm-default

Computed Value

Example

Tailwind Class

font-heading-xs

CSS Variable

--font-static-heading-xs-default

Computed Value

Example

Tailwind Class

font-heading-xxs

CSS Variable

--font-static-heading-xxs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-heading-xxxl`	`--font-static-heading-xxxl`	Aa
`font-heading-xxl`	`--font-static-heading-xxl`	Aa
`font-heading-xl`	`--font-static-heading-xl`	Aa
`font-heading-lg`	`--font-static-heading-lg-default`	Aa
`font-heading-md`	`--font-static-heading-md-default`	Aa
`font-heading-sm`	`--font-static-heading-sm-default`	Aa
`font-heading-xs`	`--font-static-heading-xs-default`	Aa
`font-heading-xxs`	`--font-static-heading-xxs-default`	Aa

Heading Bold

Bold variants of heading fonts for emphasis.

Tailwind Class

font-heading-lg-bold

CSS Variable

--font-static-heading-lg-bold

Computed Value

Example

Tailwind Class

font-heading-md-bold

CSS Variable

--font-static-heading-md-bold

Computed Value

Example

Tailwind Class

font-heading-sm-bold

CSS Variable

--font-static-heading-sm-bold

Computed Value

Example

Tailwind Class

font-heading-xs-bold

CSS Variable

--font-static-heading-xs-bold

Computed Value

Example

Tailwind Class

font-heading-xxs-bold

CSS Variable

--font-static-heading-xxs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-heading-lg-bold`	`--font-static-heading-lg-bold`	Aa
`font-heading-md-bold`	`--font-static-heading-md-bold`	Aa
`font-heading-sm-bold`	`--font-static-heading-sm-bold`	Aa
`font-heading-xs-bold`	`--font-static-heading-xs-bold`	Aa
`font-heading-xxs-bold`	`--font-static-heading-xxs-bold`	Aa

Body

Body fonts are used for standard text content.

Tailwind Class

font-body-xxl

CSS Variable

--font-static-body-xxl-default

Computed Value

Example

Tailwind Class

font-body-xl

CSS Variable

--font-static-body-xl-default

Computed Value

Example

Tailwind Class

font-body-lg

CSS Variable

--font-static-body-lg-default

Computed Value

Example

Tailwind Class

font-body-md

CSS Variable

--font-static-body-md-default

Computed Value

Example

Tailwind Class

font-body-sm

CSS Variable

--font-static-body-sm-default

Computed Value

Example

Tailwind Class

font-body-xs

CSS Variable

--font-static-body-xs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-body-xxl`	`--font-static-body-xxl-default`	Aa
`font-body-xl`	`--font-static-body-xl-default`	Aa
`font-body-lg`	`--font-static-body-lg-default`	Aa
`font-body-md`	`--font-static-body-md-default`	Aa
`font-body-sm`	`--font-static-body-sm-default`	Aa
`font-body-xs`	`--font-static-body-xs-default`	Aa

Body Bold

Bold variants of body fonts for emphasis within content.

Tailwind Class

font-body-xxl-bold

CSS Variable

--font-static-body-xxl-bold

Computed Value

Example

Tailwind Class

font-body-xl-bold

CSS Variable

--font-static-body-xl-bold

Computed Value

Example

Tailwind Class

font-body-lg-bold

CSS Variable

--font-static-body-lg-bold

Computed Value

Example

Tailwind Class

font-body-md-bold

CSS Variable

--font-static-body-md-bold

Computed Value

Example

Tailwind Class

font-body-sm-bold

CSS Variable

--font-static-body-sm-bold

Computed Value

Example

Tailwind Class

font-body-xs-bold

CSS Variable

--font-static-body-xs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-body-xxl-bold`	`--font-static-body-xxl-bold`	Aa
`font-body-xl-bold`	`--font-static-body-xl-bold`	Aa
`font-body-lg-bold`	`--font-static-body-lg-bold`	Aa
`font-body-md-bold`	`--font-static-body-md-bold`	Aa
`font-body-sm-bold`	`--font-static-body-sm-bold`	Aa
`font-body-xs-bold`	`--font-static-body-xs-bold`	Aa

Code

Monospace fonts for code snippets and technical content.

Tailwind Class

font-code-xl

CSS Variable

--font-static-code-xl-default

Computed Value

Example

Tailwind Class

font-code-lg

CSS Variable

--font-static-code-lg-default

Computed Value

Example

Tailwind Class

font-code-md

CSS Variable

--font-static-code-md-default

Computed Value

Example

Tailwind Class

font-code-sm

CSS Variable

--font-static-code-sm-default

Computed Value

Example

Tailwind Class

font-code-xs

CSS Variable

--font-static-code-xs-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-code-xl`	`--font-static-code-xl-default`	Aa
`font-code-lg`	`--font-static-code-lg-default`	Aa
`font-code-md`	`--font-static-code-md-default`	Aa
`font-code-sm`	`--font-static-code-sm-default`	Aa
`font-code-xs`	`--font-static-code-xs-default`	Aa

Code Bold

Bold monospace fonts for emphasized code.

Tailwind Class

font-code-xl-bold

CSS Variable

--font-static-code-xl-bold

Computed Value

Example

Tailwind Class

font-code-lg-bold

CSS Variable

--font-static-code-lg-bold

Computed Value

Example

Tailwind Class

font-code-md-bold

CSS Variable

--font-static-code-md-bold

Computed Value

Example

Tailwind Class

font-code-sm-bold

CSS Variable

--font-static-code-sm-bold

Computed Value

Example

Tailwind Class

font-code-xs-bold

CSS Variable

--font-static-code-xs-bold

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-code-xl-bold`	`--font-static-code-xl-bold`	Aa
`font-code-lg-bold`	`--font-static-code-lg-bold`	Aa
`font-code-md-bold`	`--font-static-code-md-bold`	Aa
`font-code-sm-bold`	`--font-static-code-sm-bold`	Aa
`font-code-xs-bold`	`--font-static-code-xs-bold`	Aa

Dynamic Fonts

Dynamic fonts scale responsively based on viewport size, providing fluid typography that adapts to different screen dimensions.

Dynamic Display

Tailwind Class

font-dynamic-display-lg

CSS Variable

--font-dynamic-display-lg

Computed Value

Example

Tailwind Class

font-dynamic-display-md

CSS Variable

--font-dynamic-display-md

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
`font-dynamic-display-lg`	`--font-dynamic-display-lg`		Aa
`font-dynamic-display-md`	`--font-dynamic-display-md`		Aa

Dynamic Heading

Tailwind Class

font-dynamic-heading-xxxl

CSS Variable

--font-dynamic-heading-xxxl

Computed Value

Example

Tailwind Class

font-dynamic-heading-xxl

CSS Variable

--font-dynamic-heading-xxl

Computed Value

Example

Tailwind Class

font-dynamic-heading-xl

CSS Variable

--font-dynamic-heading-xl

Computed Value

Example

Tailwind Class

font-dynamic-heading-lg

CSS Variable

--font-dynamic-heading-lg-default

Computed Value

Example

Tailwind Class	CSS Variable	Example
`font-dynamic-heading-xxxl`	`--font-dynamic-heading-xxxl`	Aa
`font-dynamic-heading-xxl`	`--font-dynamic-heading-xxl`	Aa
`font-dynamic-heading-xl`	`--font-dynamic-heading-xl`	Aa
`font-dynamic-heading-lg`	`--font-dynamic-heading-lg-default`	Aa

Dynamic Heading Bold

Tailwind Class

font-dynamic-heading-lg-bold

CSS Variable

--font-dynamic-heading-lg-bold

Computed Value

Example

Tailwind Class	CSS Variable	Computed Value	Example
`font-dynamic-heading-lg-bold`	`--font-dynamic-heading-lg-bold`		Aa

Colors

Z-Index