Typography
Type scale, weights, and suggested usages for headings (h1–h6), body text, links, button and form labels. Built on Tailwind's default scale with Inter as the primary typeface.
Font Family
The primary typeface is Inter, loaded via next/font/google. It provides excellent legibility at all sizes and supports variable weights.
Inter Light
Inter Regular
Inter Semibold
Inter Bold
Type Scale
text-xs0.75rem / 12pxline-height: 1remThe quick brown fox jumps over the lazy dog
text-sm0.875rem / 14pxline-height: 1.25remThe quick brown fox jumps over the lazy dog
text-base1rem / 16pxline-height: 1.5remThe quick brown fox jumps over the lazy dog
text-lg1.125rem / 18pxline-height: 1.75remThe quick brown fox jumps over the lazy dog
text-xl1.25rem / 20pxline-height: 1.75remThe quick brown fox jumps over the lazy dog
text-2xl1.5rem / 24pxline-height: 2remThe quick brown fox jumps over the lazy dog
text-3xl1.875rem / 30pxline-height: 2.25remThe quick brown fox jumps
text-4xl2.25rem / 36pxline-height: 2.5remThe quick brown fox
text-5xl3rem / 48pxline-height: 1Quick brown fox
text-6xl3.75rem / 60pxline-height: 1Brown fox
Suggested usage
Map semantic roles to the type scale and weights below. Use these patterns across pages, cards, dialogs, and forms for consistency.
Headings (h1–h6)
| Element | Suggested classes | Use for |
|---|---|---|
| h1 | text-3xl font-bold tracking-tight | Page title, hero headline |
| h2 | text-2xl font-semibold tracking-tight | Section title, major break |
| h3 | text-xl font-semibold | Subsection, card title (large) |
| h4 | text-lg font-semibold | Dialog/sheet title, card title |
| h5 | text-base font-semibold | Small section, list heading |
| h6 | text-sm font-semibold | Overline, compact heading |
Heading preview
Page title (h1)
Section title (h2)
Subsection (h3)
Dialog or card title (h4)
Small section (h5)
Overline or compact heading (h6)
Body and supporting text
| Type | Suggested classes | Use for |
|---|---|---|
| Lead / intro | text-lg text-muted-foreground | First paragraph under a hero, intro blurb |
| Body | text-base | Paragraphs, article content |
| Body (compact) | text-sm | Cards, dialogs, lists, tables |
| Description / secondary | text-sm text-muted-foreground | Card description, dialog subtitle, form hint |
| Caption / metadata | text-xs text-muted-foreground | Timestamps, labels, footnotes |
Body and supporting preview
Lead or intro paragraph under a hero. Slightly larger, muted.
Default body paragraph for articles and long-form content.
Compact body used in cards, dialogs, and tables.
Description or secondary text (e.g. card subtitle, form hint).
Caption or metadata: date, label, footnote.
Interactive and form text
| Type | Suggested classes | Use for |
|---|---|---|
| Button label | text-sm font-medium | Button component (default) |
| Form label | text-sm font-medium leading-none | Label component, input labels |
| Link | text-primary underline-offset-4 hover:underline | Inline and standalone links |
| Nav / breadcrumb | text-sm text-muted-foreground hover:text-foreground | Navigation items, breadcrumbs |
Interactive and form preview
Usage
Use tracking-tight on h1 and h2 for a cleaner headline look. Use text-muted-foreground for secondary and description text so hierarchy is clear. Button and Label components in this design system already use text-sm font-medium; keep link and nav styles consistent with the table above.
Font Weights
font-normal400The quick brown fox jumps over the lazy dogfont-medium500The quick brown fox jumps over the lazy dogfont-semibold600The quick brown fox jumps over the lazy dogfont-bold700The quick brown fox jumps over the lazy dogfont-extrabold800The quick brown fox jumps over the lazy dog