<!-- skill: Typography | version: 1.0.0 | description: Font pairing, scale, readability and webfont loading craft | category: Video & Design -->
## Instructions
- Pair maximum 2 families: one display + one body, or one family with 3-4 weights; never mix two similar serifs.
- Match x-heights and contrast levels when pairing, test pairs at H1 + paragraph + caption together.
- Build type scale with ratio 1.200 (minor third) or 1.333 (perfect fourth): 12/14/16/20/24/32/48 or equivalent.
- Set body 16-18px, line-height 1.5-1.65, line-length 45-75ch (use `max-width: 65ch`), paragraph spacing 0.75em.
- Use headings line-height 1.1-1.25, letter-spacing -0.02em for display, balance wrap with `text-wrap: balance`.
- Load webfonts with `font-display: swap`, preload primary woff2, subset latin + latin-ext only to cut weight.
- Limit weights to 400/500/700 max, use variable fonts when possible, self-host via Google Fonts woff2 download.
- Establish hierarchy with size + weight + color only, avoid underline/italic/all-caps simultaneously.
- Fix widows/orphans: keep headings to 1-3 lines, use non-breaking spaces before final short words.
- Check contrast: body 4.5:1 minimum, large text 3:1, test on brand backgrounds with Stark or WebAIM checker.
- Set tabular numerals for tables/prices (`font-variant-numeric: tabular-nums`), optical size axis if available.
- Document scale as tokens: `--text-xs/sm/base/lg/xl/2xl` with size/line-height/letter-spacing triples.
## Examples
- Blog pairing: Fraunces 600 for headings + Inter 400/500 body, scale 1.333, body 17px/1.6 max 68ch.
- Dashboard: Inter variable 400-700 only, tabular nums for KPIs, captions 12px/1.4 uppercase tracked 0.06em.
- Webfont CSS: `@font-face { font-display: swap; src: url(inter-var.woff2) format(woff2); unicode-range: U+0000-00FF; }`.
## Workflows
### 1. Pair and scale setup
1. Choose display + body candidates, test H1/paragraph/button trio.
2. Define scale ratio, generate 6 steps, assign to H1-H4 + body + caption.
3. Set spacing tokens, apply to sample article + card + table.
4. Contrast-check all combos, lock tokens in CSS variables.
### 2. Webfont performance pass
1. Audit weights in use, drop unused italics/weights.
2. Subset + preload + `display:swap`, self-host woff2.
3. Measure CLS/LCP before/after, set fallback `size-adjust` to reduce shift.
## Templates
```text
Type tokens:
--text-body: 17px / 1.6 / 0em / Inter 400
--text-h1: 48px / 1.1 / -0.02em / Fraunces 600
--measure: 65ch | --para-gap: 0.75em
CSS snippet:
body { font-family: Inter, system-ui, sans-serif; max-width: 65ch; line-height: 1.6; }
@font-face { font-family: Inter; font-display: swap; src: url(/fonts/inter-var.woff2); }
Checklist: [ ] 2 families max [ ] 45-75ch [ ] swap + preload [ ] contrast pass [ ] tabular nums where needed
```
## Tools
- Google Fonts, Fontsource, Wakamai Fondue, Stark contrast plugin, WebAIM checker.
- CSS: `clamp()` fluid type, `text-wrap: balance`, variable font axes.
- Testing: Lighthouse fonts audit, Layout Shift GIF comparison, BrowserStack rendering.
## Advanced
- Use fluid type: `clamp(2rem, 1.5rem + 3vw, 3.5rem)` for H1, lock min/max to preserve hierarchy.
- Tune fallback: `size-adjust`, `ascent-override`, `descent-override` to match webfont metrics and kill CLS.
- Pair by skeleton: compare n/o/e skeletons, avoid pairing high-contrast Didone with low-contrast grotesque body.
- Implement optical sizing: `font-optical-sizing: auto` or `opsz` axis tied to size tokens.
## Documentation
- References: Butterick Practical Typography, Google Fonts Knowledge, MDN @font-face.
- Standards: WCAG 1.4.3 contrast, 1.4.8 visual presentation (80ch max, 1.5 spacing).
- Internal: type token sheet, font license file, preload list per template.
### QA checklist
- [ ] Max 2 families, 3 weights total, variable font where possible.
- [ ] Body 45-75ch verified at 320px and 1440px, headings use balance wrap.
- [ ] Webfonts swap + preloaded, subsets latin only, CLS under 0.05.
- [ ] Contrast 4.5:1 body / 3:1 large, tabular nums on data, focus visible.
- [ ] Tokens documented (size/line-height/tracking), fallback stack tested offline.
### Fluid type snippet
```text
H1: clamp(2rem, 1.5rem + 3vw, 3.5rem)/1.1/-0.02em | Body: 1.0625rem/1.6/65ch.
Fallback: font-family Inter, system-ui, -apple-system, Segoe UI, sans-serif.
Preload: <link rel=preload href=/fonts/inter-var.woff2 as=font type=font/woff2 crossorigin>
```
- Pairs figma-ui variables and css-design tokens for implementation parity.
- Complements web-accessibility checks for contrast, focus, and reduced-motion type.