Foundation

Typography

Preset typographic styles. One component, nine variants × three tones, optional element override via `as`.

Examples

Variants

Display heading

Heading 1

Heading 2

Heading 3

Heading 4

A leading paragraph that introduces a section.

Default body text.

A caption sits below an image or chart.

Eyebrow above heading

<Typography variant="display">Display heading</Typography>
<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="lead">A leading paragraph…</Typography>
<Typography variant="body">Default body text.</Typography>
<Typography variant="caption">A caption…</Typography>
<Typography variant="eyebrow">Eyebrow above heading</Typography>

Tones

Default tone

Muted

Dim

<Typography variant="body">Default tone</Typography>
<Typography variant="body" tone="muted">Muted</Typography>
<Typography variant="body" tone="dim">Dim</Typography>

Element override

Visual h2 styled element h3

<Typography variant="h2" as="h3">Visual h2 styled element h3</Typography>

Props

Prop	Type	Default	Description
`variant`	`'display' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'lead' \| 'body' \| 'caption' \| 'eyebrow'`	`'body'`	Typographic preset.
`tone`	`'default' \| 'muted' \| 'dim'`	`'default'`	Text color tier (caption + eyebrow auto-mute on default).
`as`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span' \| 'div'`	`—`	Override the rendered element when document outline calls for it.
`...rest`	`HTMLAttributes<HTMLElement>`	`—`	Spread onto the rendered element.

Install

CLI

npx @a3tai/mittsu add typography