Typography
Overviewimport { Typography, TypographyGroup, TypographySpec, TypographyVariant } from '@nili/ui';This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.
Inter Display · Title
6 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox jumps
- variant
- h1
- size
- 56/64
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- h2
- size
- 48/56
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- h3
- size
- 40/48
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- h4
- size
- 32/40
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- h5
- size
- 24/32
- weight
- 500
- tracking
- 0px
The quick brown fox jumps
- variant
- h6
- size
- 20/28
- weight
- 500
- tracking
- 0px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="h1">The quick brown fox</Typography>
<Typography variant="h2">The quick brown fox</Typography>
<Typography variant="h3">The quick brown fox</Typography>
<Typography variant="h4">The quick brown fox</Typography>
<Typography variant="h5">The quick brown fox</Typography>
<Typography variant="h6">The quick brown fox</Typography>
</>
)
}Inter · Label
5 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox jumps
- variant
- label-xlarge
- size
- 24/32
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- label-large
- size
- 18/28
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- label-medium
- size
- 16/24
- weight
- 500
- tracking
- 0px
The quick brown fox jumps
- variant
- label-small
- size
- 14/20
- weight
- 500
- tracking
- 0px
The quick brown fox jumps
- variant
- label-xsmall
- size
- 12/16
- weight
- 500
- tracking
- 0px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="label-xlarge">The quick brown fox</Typography>
<Typography variant="label-large">The quick brown fox</Typography>
<Typography variant="label-medium">The quick brown fox</Typography>
<Typography variant="label-small">The quick brown fox</Typography>
<Typography variant="label-xsmall">The quick brown fox</Typography>
</>
)
}Inter · Paragraph
5 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox jumps
- variant
- paragraph-xlarge
- size
- 24/32
- weight
- 400
- tracking
- -0.4px
The quick brown fox jumps
- variant
- paragraph-large
- size
- 18/28
- weight
- 400
- tracking
- -0.4px
The quick brown fox jumps
- variant
- paragraph-medium
- size
- 16/24
- weight
- 400
- tracking
- 0px
The quick brown fox jumps
- variant
- paragraph-small
- size
- 14/20
- weight
- 400
- tracking
- 0px
The quick brown fox jumps
- variant
- paragraph-xsmall
- size
- 12/16
- weight
- 400
- tracking
- 0px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="paragraph-xlarge">The quick brown fox</Typography>
<Typography variant="paragraph-large">The quick brown fox</Typography>
<Typography variant="paragraph-medium">The quick brown fox</Typography>
<Typography variant="paragraph-small">The quick brown fox</Typography>
<Typography variant="paragraph-xsmall">The quick brown fox</Typography>
</>
)
}Inter · Subheading
4 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox
- variant
- subheading-medium
- size
- 16/24
- weight
- 500
- tracking
- 0.8px
The quick brown fox
- variant
- subheading-small
- size
- 14/20
- weight
- 500
- tracking
- 0.8px
The quick brown fox
- variant
- subheading-xsmall
- size
- 12/16
- weight
- 500
- tracking
- 0.4px
The quick brown fox
- variant
- subheading-2xsmall
- size
- 11/12
- weight
- 500
- tracking
- 0.4px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="subheading-medium">The quick brown fox</Typography>
<Typography variant="subheading-small">The quick brown fox</Typography>
<Typography variant="subheading-xsmall">The quick brown fox</Typography>
<Typography variant="subheading-2xsmall">The quick brown fox</Typography>
</>
)
}Inter · Body
3 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox jumps
- variant
- body-large
- size
- 18/32
- weight
- 400
- tracking
- -0.4px
The quick brown fox jumps
- variant
- body-medium
- size
- 16/28
- weight
- 400
- tracking
- 0px
The quick brown fox jumps
- variant
- body-small
- size
- 14/24
- weight
- 400
- tracking
- 0px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="body-large">The quick brown fox</Typography>
<Typography variant="body-medium">The quick brown fox</Typography>
<Typography variant="body-small">The quick brown fox</Typography>
</>
)
}Inter · Documentation
2 variants. The element is chosen from the variant — h1 renders an <h1>, paragraph-* renders a <p> — so the document outline stays correct without asking.
The quick brown fox jumps
- variant
- docs-label
- size
- 18/32
- weight
- 500
- tracking
- -0.4px
The quick brown fox jumps
- variant
- docs-paragraph
- size
- 18/32
- weight
- 400
- tracking
- -0.4px
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
<Typography variant="docs-label">The quick brown fox</Typography>
<Typography variant="docs-paragraph">The quick brown fox</Typography>
</>
)
}Changing the element
Use as when the visual weight and the semantics disagree — a section heading that must not be an <h1>, or a label rendered on a <span>.
import { Typography } from "@nili/ui"
export function Example() {
return (
<>
{/* Looks like H3, but is a section heading */}
<Typography variant="h3" as="h2">Section title</Typography>
{/* Label styling on an inline element */}
<Typography variant="label-small" as="span">Inline label</Typography>
{/* Any element, including a link */}
<Typography variant="paragraph-small" as="a" href="#">
Read the guidelines
</Typography>
</>
)
}Typography
extends TypographyVariantProps
Variant axes — from the component’s cva definition
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | h1 | h2 | h3 | h4 | h5 | h6 | label-xlarge | label-large | label-medium | label-small | label-xsmall | paragraph-xlarge | paragraph-large | paragraph-medium | paragraph-small | paragraph-xsmall | subheading-medium | subheading-small | subheading-xsmall | subheading-2xsmall | body-large | body-medium | body-small | docs-label | docs-paragraph | paragraph-medium |
Other props
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | — | |
| as | ElementType | — | Override the rendered element. Defaults to a semantically sensible tag for the variant (`h1` renders `<h1>`, `paragraph-*` renders `<p>`) so document outline and screen-reader navigation stay correct by default. |
| className | string | — |