> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Typography Systems

Building type scales that carry personality — pairing logic, size systems, and the details that separate set type from default type.

- Section: Design
- Tags: type fonts pairing scale

Typography IS the design. Before color, before layout, get this right.

## Pairing logic

Two voices, distinct jobs:

- **Display** carries headlines: high personality, set large, tight tracking (-0.01 to -0.03em), line-height ≤ 1.1.
- **Body** carries reading: neutral enough to disappear at 16–19px, line-height 1.6–1.75.
- **Mono** (optional third) marks machine things: labels, code, data, timestamps.

Contrast the pair on structure, not just style: serif display + sans body, or condensed caps display + humanist body. Two geometric sans faces fight; two serifs blur.

## Verified pairings

| Register | Display | Body | Mono |
|---|---|---|---|
| Editorial | Fraunces | Source Serif 4 | Spline Sans Mono |
| Technical | Big Shoulders Display | Barlow | JetBrains Mono |
| Warm organic | Young Serif | Karla | — |
| Precise modern | Instrument Sans (600+) | Instrument Sans (400) | Spline Sans Mono |
| Luxury | Cormorant Garamond | Jost (300) | — |
| Playful | Baloo 2 | Nunito | — |

## Size system

Build a modular scale and touch nothing else:

```
--text-xs:   0.75rem   (labels, captions)
--text-sm:   0.875rem  (secondary, UI)
--text-base: 1rem      (body)
--text-lg:   1.25rem   (lede)
--text-xl:   clamp(1.5rem, 3vw, 2rem)     (h3)
--text-2xl:  clamp(2rem, 4.5vw, 3rem)     (h2)
--text-hero: clamp(2.75rem, 7vw, 4.5rem)  (h1)
```

`clamp()` handles responsiveness without breakpoint soup. Headlines use fluid clamps; body text stays fixed — reading comfort doesn't scale with viewport.

## The details that separate set type from default type

- **Measure**: 60–72 characters per line for body text. `max-width: 42rem` is your friend.
- **Tracking**: negative on large display sizes, positive (+0.14em+) on uppercase micro-labels, zero in between.
- **Hanging punctuation**: pull quotes and bullets visually align to the margin, not the text edge.
- **Real small caps or tracked caps**: never let the browser fake small caps.
- **Tabular figures** in any aligned numeric column: `font-variant-numeric: tabular-nums`.
- **Italic as spice**: one italic phrase per headline maximum — it's the strongest emphasis you own.