# Typography

> Type sets the hierarchy a tired reader scans first: what's a heading, what's next, what can wait. Your DESIGN.md names the fonts, their roles, and the scale.

Your product uses the typefaces, weights, and type scale its DESIGN.md declares. Where DESIGN.md says nothing, the codebase's font and size tokens decide. Where neither does, Tailwind's default font stacks and type scale apply (TYP-1, TYP-3).

The fonts and sizes below are this site's, taken from its DESIGN.md as a worked example.

*(interactive element omitted — view it on the page)*

**Plus Jakarta Sans** is geometric enough to feel modern, soft enough to feel warm. The name nods to Southeast Asia.

**Inter** is designed for screens: tall x-height, open apertures. For people scanning between tasks, readability is kindness.

## Type scale

*(interactive element omitted — view it on the page)*

| Step | Size | Font |
| --- | --- | --- |
| Display | 96 / 72 / 60 / 48px | Plus Jakarta Sans 600 |
| Heading 1 | 30px | Plus Jakarta Sans 600 |
| Heading 2 | 24px | Plus Jakarta Sans 600 |
| Heading 3 | 20px | Plus Jakarta Sans 600 |
| Body Large | 18px | Inter 400 |
| Body | 16px | Inter 400 |
| Body Small | 14px | Inter 400 |
| Caption / Label | 12px | Inter 500 / 600, sentence case |

This site's scale is the Tailwind default type scale (`text-xs` … `text-9xl`). Sizes come
from named utilities, never arbitrary `text-[Npx]` values.

Body line-height: 1.5–1.6. Related standards: TYP-1, TYP-2, TYP-3, TYP-4.

## Usage

```tsx
<h2 className="font-display text-2xl font-semibold" />  {/* Heading 2 */}
<p className="font-body text-base" />                    {/* Body */}
```

## Best practices

- Do: Use the display face your DESIGN.md declares for headlines, and its body face for body and UI text.
- Do: Give body text a line height of 1.5 to 1.6, and respect the scale.
- Don't: Mix display and body roles, or reach for a decorative or script font.
- Don't: Set body text below 14px, or use all-caps — use sentence case (genuine acronyms excepted).

## Related

### Agent skill

- `/dx-harness:dx-design-polish`: Reviews the visual craft of a page: spacing, type, radius, colour, and shadow. Proposes ranked fixes.

[All skills](/harness/skills)

### In the catalogue

- [TYP-1](/standards/catalog/typ-1) (L1): Display and body/UI text use the typefaces and weights the product's DESIGN.md declares (else the codebase's font tokens, else Tailwind's default font stacks); no other typefaces
- [TYP-2](/standards/catalog/typ-2) (L1): Body text at least 14px; labels at least 12px; body line-height 1.5-1.6
- [TYP-3](/standards/catalog/typ-3) (L1): Type sizes come from the type scale DESIGN.md defines (else the codebase's, else Tailwind's default scale); no off-scale sizes
- [TYP-4](/standards/catalog/typ-4) (L2): Text is never set in all-caps
- [TYP-5](/standards/catalog/typ-5) (L2): Numbers that align in columns or update in place use tabular figures (font-variant-numeric: tabular-nums)
- [TYP-6](/standards/catalog/typ-6) (L2): Running body text is held to a comfortable measure — roughly 45-75 characters per line (target 40-60), via a max-width in ch, not full-viewport paragraphs
- [SLP-6](/standards/catalog/slp-6) (L2): Adjacent type-scale steps differ by at least 1.10x; no flat hierarchy