Typography
Text recipes on the ZUNO scale over semantic HTML, with no hidden margins.
Shipping a design system
Notes from moving three products onto one set of components.
Start with tokens
Every surface reads bg-background, so dark mode came for free.
Consistency is a feature your users never ask for and always notice.
- Tokens before components
- Compositions before variants
- Docs before release
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add typographyDependencies
What add typography installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
3 examples · 1 componentShipping a design system
Notes from moving three products onto one set of components.
Start with tokens
Every surface reads bg-background, so dark mode came for free.
Consistency is a feature your users never ask for and always notice.
- Tokens before components
- Compositions before variants
- Docs before release
Article
Headings, a lead, reading text with inline code, a quote and a list, spaced by the parent.
Billing
Payment method
Visa ending in 4242
Level and look
The outline decides the element; the typography map decides the size.
We only use it for receipts.
Updated 2 min ago
- Create a project
- Invite your team
- Connect a domain
Small text and lists
Label, muted and caption sizes, and a numbered list.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
TypographyH1 … TypographyH4Page title (28 → 32 px), section (20), card (18) and subsection (16), weight 600, balanced wrapping. | h1 … h4 | — |
TypographyP / TypographyLeadReading text (16 / 24 px) and a muted 18 px introduction. | p | — |
TypographySmall / TypographyMuted14 px label weight and 14 px muted interface text. | small / p | — |
TypographyBlockquoteQuote with a start-edge rule; mirrors in RTL. | blockquote | — |
TypographyInlineCodeMonospace on a muted chip, sized relative to the text around it. | code | — |
TypographyListBulleted or numbered list with muted markers and 8 px between items. | ul / ol | ordered = false |
typographyThe same recipes as class strings, to style another element or level: <h2 className={typography.h1}>. | Record<string, string> | — |
Accessibility
Each recipe renders the matching HTML element, so headings, quotes, code and lists keep their meaning for screen readers and reader modes.
Choose the heading level from the page outline, not from the size: when a section needs a bigger look, use the typography map on the right element (<h2 className={typography.h1}>).
Reading text is 16 px and essential text never drops to 12 px; the caption recipe is for non-critical metadata.
Headings use scroll-margin, so anchor links land below a sticky header.
No margins are built in: spacing comes from Stack or gap, so a recipe never adds space you can't see in the markup.