Typography

Work in progress

Heading and Text components for all typographic needs.

Heading

Four levels mapping to h1–h4. The level prop controls both the rendered tag and the visual size.

Giant Hairball Has Perfect Grammar, Linguists Say

Weather Likely To Become Different Before Changing

Tree Stuck In Cat; Firefighters Baffled

The llama is a quadruped

1
<Stack space="small">
2
    <Heading level="1">Giant Hairball Has Perfect Grammar, Linguists Say</Heading>
3
    <Heading level="2">Weather Likely To Become Different Before Changing</Heading>
4
    <Heading level="3">Tree Stuck In Cat; Firefighters Baffled</Heading>
5
    <Heading level="4">The llama is a quadruped</Heading>
6
</Stack>

Visual size override

The size prop overrides the visual size independently of the semantic level, for cases where the heading rank required for accessibility or SEO doesn't match the design's visual treatment. A page's single h1, for example, can render smaller than its default size. Letter-spacing is preserved regardless of the size override.

Level 1, default size

Level 1, size xx-large

Level 1, size x-large

1
<Stack space="small">
2
    <Heading level="1">Level 1, default size</Heading>
3
    <Heading level="1" size="xx-large">Level 1, size xx-large</Heading>
4
    <Heading level="1" size="x-large">Level 1, size x-large</Heading>
5
</Stack>

Weights

normal (400)

medium (500)

semibold (600)

bold (700)

Text

Eight sizes from x-small to display. Defaults to standard (16px) rendered as a span.

x-small:Weather Likely To Become Different Before Changingsmall:Weather Likely To Become Different Before Changingstandard:Weather Likely To Become Different Before Changinglarge:Weather Likely To Become Different Before Changingx-large:Weather Likely To Become Different Before Changingxx-large:Weather Likely To Become Different Before Changingxxx-large:Weather Likely To Become Different Before Changingdisplay:Weather Likely To Become Different Before Changing

1
<Stack space="small">
2
    <Text size="x-small">x-small:Weather Likely To Become Different Before Changing</Text>
3
    <Text size="small">small:Weather Likely To Become Different Before Changing</Text>
4
    <Text size="standard">standard:Weather Likely To Become Different Before Changing</Text>
5
    <Text size="large">large:Weather Likely To Become Different Before Changing</Text>
6
    <Text size="x-large">x-large:Weather Likely To Become Different Before Changing</Text>
7
    <Text size="xx-large">xx-large:Weather Likely To Become Different Before Changing</Text>
8
    <Text size="xxx-large">xxx-large:Weather Likely To Become Different Before Changing</Text>
9
    <Text size="display">display:Weather Likely To Become Different Before Changing</Text>
10
</Stack>

Weights

normal (400)medium (500)semibold (600)bold (700)

Tones

neutralsecondarylinkbrandcriticalcautionpositiveinfopromote

1
<Stack space="small">
2
    <Text tone="neutral">neutral</Text>
3
    <Text tone="secondary">secondary</Text>
4
    <Text tone="link">link</Text>
5
    <Text tone="brand">brand</Text>
6
    <Text tone="critical">critical</Text>
7
    <Text tone="caution">caution</Text>
8
    <Text tone="positive">positive</Text>
9
    <Text tone="info">info</Text>
10
    <Text tone="promote">promote</Text>
11
</Stack>

Alignment

Aligned leftAligned centerAligned right

Font family

Sans-serif is the default. Use family="mono" for fixed-width content like code, measurements, or numeric data where column alignment matters.

Sans-serif - Giant Hairball Has Perfect Grammar, Linguists SayMono - space.xx-large = 3remMono - fontSize.standard = 1rem / 16pxMono medium - const result = compute(a, b)

1
<Stack space="small">
2
    <Text>Sans-serif - Giant Hairball Has Perfect Grammar, Linguists Say</Text>
3
    <Text family="mono">Mono - space.xx-large = 3rem</Text>
4
    <Text family="mono">Mono - fontSize.standard = 1rem / 16px</Text>
5
    <Text
6
        family="mono"
7
        weight="medium">
8
        Mono medium - const result = compute(a, b)
9
    </Text>
10
</Stack>

Element types

The element prop controls the rendered HTML tag without changing the visual style.

Default: span

Rendered as: p

Rendered as: labelText styled like heading level 2