# Typography

> Newsreader serif for headlines and proper nouns. JetBrains Mono for everything else. Inter only for long-form prose.

## Families

- **Newsreader** (serif · display): headlines · proper nouns
- **JetBrains Mono** (mono): UI · metadata · code
- **Inter** (sans · body): long-form prose only

## Scale

Size over line height, in px.

| Utility | Size / leading · family |
| --- | --- |
| `text-display-xl` | 80 / 76 · serif |
| `text-display-lg` | 64 / 64 · serif |
| `text-display-md` | 40 / 44 · serif |
| `text-heading-lg` | 24 / 31 · serif |
| `text-heading-md` | 18 / 25 · serif |
| `text-body-lg` | 16 / 26 · sans |
| `text-body-md` | 14 / 21 · sans |
| `text-mono-md` | 14 / 21 · mono |
| `text-mono-sm` | 12 / 17 · mono |
| `text-mono-xs` | 10 / 13 · mono |

## Using the scale

- **A step is a size, not a font.** Each one sets size and leading, and the display steps their tracking. Pair it with font-serif, font-sans or font-mono where you use it.
- **Only these ten.** No arbitrary pixel sizes and no Tailwind default steps. A test in the registry fails on both. Inline fontSize is kept for glyphs such as ◆, at 18px or less.
- **Registered in cn.** Without it, tailwind-merge reads text-mono-sm as a color and drops it next to text-[var(--fg-muted)]. lib/utils.ts, which init writes, already has it.

```tsx
<h2 className="font-serif text-display-md">Work</h2>
<span className="font-mono text-mono-sm uppercase">latest post</span>

/* or as a variable, in plain CSS */
.label { font-size: var(--text-mono-sm); line-height: var(--text-mono-sm--line-height); }
```