Typography

Clarity by Nivoda ships a single sans-serif stack and a fixed list of role presets. Every run of text in a product surface is one of those presets — pick the role, not the size.

Stack

Inter Variable, loaded via @fontsource-variable/inter in @nivoda/components. Falls through to system-ui, sans-serif if the variable font hasn't loaded. Monospace (JetBrains Mono, monospace) is used for code and tabular figures only.

Serif display typography is reserved for marketing surfaces — it doesn't appear in product UI or in these docs.

Role presets

Twelve roles, each a fixed combination of size, weight, line-height and tracking. Source: packages/components/src/components/atoms/typography/typography.tsx.

Heading 1

h1 · 96px / 6rem · 300 · lh 112px

Heading 2

h2 · 60px / 3.75rem · 300 · lh 72px

Heading 3

h3 · 48px / 3rem · 500 · lh 56px

Heading 4

h4 · 36px / 2.25rem · 500 · lh 44px

Heading 5

h5 · 24px / 1.5rem · 500 · lh 32px

Heading 6

h6 · 20px / 1.25rem · 500 · lh 32px

Subtitle 1 — medium section label above a block of body text.

subtitle-1 · 16px / 1rem · 400 · lh 28px

Subtitle 2 — smaller section label, field group headings.

subtitle-2 · 14px / 0.875rem · 500 · lh 20px

Body 1 — the default for long-form prose. This is the reading size for marketing copy, article bodies, and help centre content. Line length and line-height are tuned for comfortable multi-paragraph reading.

body-1 · 16px / 1rem · 400 · lh 24px

Body 1 Emphasis — same preset with emphasis raising weight to 500 for in-line stress.

body-1, emphasis · 16px · 500 · lh 24px

Body 2 — the default for UI copy. Form help text, table cells, card bodies, anywhere space is tighter than marketing but the text still needs to breathe.

body-2 · 14px / 0.875rem · 400 · lh 20px

Body 2 Emphasis — same preset with raised weight.

body-2, emphasis · 14px · 500 · lh 20px

CAPTION — METADATA, LABELS, MICROCOPY UNDER FORM FIELDS.

caption · 12px / 0.75rem · 400 · lh 20px · tracking wide

CAPTION EMPHASIS — SAME PRESET, MEDIUM WEIGHT.

caption, emphasis · 12px · 500 · lh 20px

How to use

import { Typography } from "@nivoda/components/typography"

<Typography variant="h1">Page title</Typography>
<Typography variant="body-1">The default for long-form prose.</Typography>
<Typography variant="body-2" emphasis>Stressed UI copy.</Typography>
<Typography variant="caption">Helper text under a form field.</Typography>

Pick the variant that matches the role, not the size. "Is this a page title?" → h1. "Is this a caption under a form field?" → caption. The component picks a sensible HTML element for the role (h1–h6 render their matching tag; subtitles render <h6>; body and caption render <p>); pass as to override when the visual weight shouldn't imply document structure.

Colour is not a Typography concern. Text inherits from ambient context; override with className="text-muted-foreground" or similar. Margins aren't a Typography concern either — spacing composes via the parent's flex gap-* or space-y-*.

See the Typography component for the full props table, asChild usage, and best practices.

Source

Role presets: packages/components/src/components/atoms/typography/typography.tsx
Component reference: COMPONENT.md — authored alongside the code
Font-size and weight tokens: packages/tokens/src/typography.tokens.json

Stack

Role presets

How to use

Source

On this page