Typography Expert Agent Skill

Typography Expert

Written by someone who picks type for a living. The goal of this skill is breadth and taste, not a blessed shortlist. There is never one right typeface — there is a right *register*, and several good faces that hit it at different budgets. If you reach for the same four fonts every time, you are not choosing; you are defaulting. Stop defaulting.

When to Use This Skill

✅ Use for:

• Font selection and pairing driven by mood / era / industry / register, not by habit
• Typographic hierarchy and tokens for design systems
• Type scales (modular ratios, fluid clamp())
• Variable-font integration and axis control (wght, wdth, opsz, slnt, GRAD)
• Web-font performance (subsetting, font-display, self-host vs CDN, size-adjust fallback metrics to kill CLS)
• OpenType feature implementation (ligatures, small caps, numerals, stylistic sets)
• Licensing decisions (OFL vs commercial EULA; desktop/web/app; trial fonts)
• Accessibility for type (WCAG contrast, minimum sizes, zoom, line/letter spacing)
• Dark-mode typographic compensation
• Multilingual support (RTL, CJK, diacritics, character-set coverage)

❌ Do NOT use for:

• Logo or wordmark creation → design-system-creator
• Icon fonts / icon systems → web-design-expert (use SVG, not icon fonts)
• General CSS unrelated to type
• Image-based or rasterized lettering → different domain
• Brand naming or strategy → this is visual implementation
• Kinetic/motion typography → native-app-designer

0. Retire the Defaults (read this first)

These faces are not *bad*. They are *exhausted* — reached for reflexively, so they signal "a machine or a hurried human picked this," not "someone chose this." If a brief has no reason to use one of these, don't. For each: one sentence on why it's a cliché, then two fresher faces that fill the same role.

| Overused face | Why it reads as a cliché | Reach for instead |

|---|---|---|

| Inter (Rasmus Andersson, OFL) | The default UI sans of the entire 2018–2025 web; competent and invisible to the point of anonymity. | Hanken Grotesk (Alfredo Marco Pradil, OFL — warmer humanist UI sans) · Public Sans (USWDS, OFL — neutral but distinct) · paid: Söhne is *also* now overused; try Untitled Sans (Klim) instead. |

| Roboto (Christian Robertson, Apache) | Android's system font; "I used whatever was already loaded." | Schibsted Grotesk (Bakken & Bæck, OFL) · Onest (OFL) |

| Open Sans (Steve Matteson, Apache) | The 2013 "safe corporate" sans; reads as a CMS template. | Source Sans 3 (Paul Hunt / Adobe, OFL) · IBM Plex Sans (Bold Monday for IBM, OFL) |

| Montserrat (Julieta Ulanovsky, OFL) | Geometric "startup deck" sans, over-set at heavy weights everywhere. | Hanken Grotesk · paid: Aktiv Grotesk (Dalton Maag) or GT America (Grilli Type) |

| Poppins (Indian Type Foundry, OFL) | The "friendly app" geometric circle-o sans of a thousand landing pages. | Gabarito (OFL, geometric with character) · Figtree (OFL) · paid: Visby (Connary Fagen) |

| Lato (Łukasz Dziedzic, OFL) | 2010s humanist default; pleasant, forgettable. | Instrument Sans (Rodrigo Fuenzalida + Jordan Egstad, OFL) · Mona Sans (GitHub, OFL) |

| Helvetica / Helvetica Neue (Linotype) | "Neutral" became a cliché the moment everyone agreed it was neutral; also a paid license many fake with Arial. | Neue Haas Grotesk (the real thing, Linotype/Monotype) if you must; or pivot to a grotesque with grit: GT America (Grilli Type), ABC Diatype (Dinamo). Libre swap: Archivo (Omnibus-Type, OFL). |

| Fraunces (Undercase Type, OFL) | The "soft serif with the wonky g and opsz axis" that became *the* indie-SaaS display serif. | Newsreader (Production Type, OFL — has opsz too, far less seen) · paid: Signifier (Klim) or Domaine (Klim) for high-contrast display. |

| Geist (Vercel, OFL) | Ships with every Next.js starter; "I scaffolded this an hour ago." | Sans: Mona Sans / Hubot Sans (GitHub, OFL) or Hanken Grotesk. Mono: Commit Mono (OFL) or Martian Mono (OFL). |

| Söhne (Klim) | The premium-newsletter / AI-company house sans of 2021–present (you've seen it on a dozen "we raised a Series A" pages). | Other Klim grotesques: Untitled Sans or National 2; or off-Klim: ABC Diatype (Dinamo), Aeonik (CoType). |

| Fontshare / ITF "starter pack" — Satoshi, General Sans, Clash Display, Cabinet Grotesk, Switzer, Space Grotesk (Indian Type Foundry, free) | Free + slick + on every dribbble shot since 2021; "Clash Display + Satoshi body" is now a *look*, not a choice. | Clash Display → Bricolage Grotesque (Mathieu Triay, OFL) or Anybody/Big Shoulders (OFL) for display · Satoshi/General Sans → Hanken Grotesk, Schibsted Grotesk, Instrument Sans · Space Grotesk → Departure Mono / Space Mono is fine but tired; try Spline Sans or Familjen Grotesk (OFL). |

The meta-rule: if the only justification for a face is "it's clean and modern," you have not made a decision. *Clean and modern* is the floor, not the brief.

1. Pick the Register Before the Font

Never name a typeface before you can name the register: the mood, era, industry, medium, and voice. The same word ("modern") points at five different faces depending on register. Work the framework below, then choose — and offer options at three budget tiers so money is never the excuse for a boring result.

> Budget tiers used throughout: Libre = free, OFL/Apache, self-hostable. PWYW/Trial = pay-what-you-want or generous free-for-personal trial (commercial use paid). Commercial = licensed foundry retail.

Warm editorial (magazines, long-form, "human and considered")

• Libre: Newsreader (Production Type) for text + display; Source Serif 4 (Adobe) for body; Spectral (Production Type) for screen-first reading.
• PWYW/Trial: Editorial New (Pangram Pangram) for narrow editorial headlines; Reckless (Displaay, trial).
• Commercial: Tiempos Text/Headline (Klim); GT Sectra (Grilli Type) for that scalpel-and-broad-nib warmth; Lyon (Commercial Type).

Industrial / technical / engineering

• Libre: IBM Plex (Sans/Mono/Serif, Bold Monday) — the most credible libre technical superfamily; Space Mono only if you want the retro-NASA wink.
• PWYW/Trial: Basier (atipo, PWYW) for a tidy grotesque; Chaney (atipo) for a stencil-tech display edge.
• Commercial: GT America (Grilli Type); ABC Monument Grotesk or ABC Diatype Mono (Dinamo); Akkurat (Lineto, Laurenz Brunner) — the original Swiss-spec workhorse.

Luxury / fashion / beauty

• Libre: Cormorant (Christian Thalmann, OFL) — a Garamond-adjacent display with extreme delicacy; Libre Caslon Display (OFL) for high-contrast titling.
• PWYW/Trial: Migra (Pangram Pangram) — sculptural sharp serif; Tobias / Reckless (Displaay, trial).
• Commercial: Domaine Display (Klim); Canela (Commercial Type); Genath (Optimo, François Rappo) — a serious didone-adjacent revival with bite.

Civic / institutional / public-sector

• Libre: Public Sans (USWDS) — literally built for government; Source Sans 3; Libre Franklin (OFL) as a Franklin Gothic stand-in.
• PWYW/Trial: Wotfard (atipo, PWYW) — quiet, legible, institutional.
• Commercial: National 2 (Klim); FF Meta or Stratos for signage-grade legibility.

Literary / bookish

• Libre: EB Garamond (OFL) — a faithful Garamond; Cardo (OFL) for scholarly long-form; Newsreader for screen.
• PWYW/Trial: Editorial New for the literary-cover register.
• Commercial: Tiempos (Klim); Arnhem (OurType, Fred Smeijers); Lyon Text (Commercial Type).

Brutalist / raw / counterculture

• Libre: Velvetyne's catalog is the motherlode — Fivo Sans, Pilowlava, Basteleur, Le Murmure (libre, made for exactly this); Redaction (Titus Kaphar & Forest Young, OFL) for a degraded-newspaper feel.
• PWYW/Trial: Uncut.wtf's display section; Collletttivo (Apfel Grotezk, libre) for a deadpan grotesque.
• Commercial: ABC Whyte / ABC Gravity (Dinamo); anything from OH no Type Co (Hobeaux, Vulf Mono).

Retro-future / 70s–80s / sci-fi

• Libre: Departure Mono (OFL) for pixel-mono; Orbitron (OFL) sparingly; VTF Redaction for degraded-future.
• PWYW/Trial: Cassannet Plus (atipo, art-deco geometric) for a Cassandre-era poster feel; Round 8 (atipo).
• Commercial: Druk (Commercial Type) for compressed poster-future; ABC Gravity (Dinamo); Sharp Grotesk (Sharp Type) at its narrow widths.

Quiet Swiss / neo-grotesque restraint

• Libre: Archivo (Omnibus-Type) for a grotesque with a sturdier spine than Inter; Hanken Grotesk for a humanist-Swiss compromise.
• PWYW/Trial: Basier (atipo).
• Commercial: Akkurat (Lineto); Untitled Sans (Klim); ABC Diatype (Dinamo); the genuine Neue Haas Grotesk (Monotype).

Playful consumer / lifestyle / DTC

• Libre: Bricolage Grotesque (Mathieu Triay) — expressive, has wdth+opsz axes; Gabarito; Fredoka (OFL) only for genuinely childlike.
• PWYW/Trial: Sfizia (atipo); Pangram Pangram's PP Mori / PP Neue Montreal (free to try).
• Commercial: Covik Sans or Degular (OH no Type Co) — warm, lively, "organic over geometric"; Obviously (OH no Type Co) for a flexible width-axis display.

Academic / scientific / data-dense

• Libre: IBM Plex superfamily (sans + serif + mono share a skeleton — ideal for papers/dashboards); STIX Two (OFL) for math; Source Serif 4 for body.
• PWYW/Trial: Wotfard for UI chrome.
• Commercial: Lexicon (Bram de Does) for the most refined scholarly serif money can buy; Tiempos for journals.

2. Pairing as Logic, Not Vibes

Pairing is a small set of rules. Apply them; don't gamble.

• One workhorse + one voice. Pick a neutral, deep-weight workhorse to carry 90% of the words (body, UI, captions) and one expressive "voice" face for display/headlines. Trying to make *two* expressive faces coexist is how decks end up shouting.
• Contrast by classification, harmonize by skeleton. Pair across *categories* (a humanist serif body with a grotesque display) so they're clearly different jobs — but check they share a *skeleton*: similar construction logic, similar proportions. A geometric serif fights a humanist sans.
• Match x-heights, not point sizes. Two faces at the same font-size can look like different sizes. Compare lowercase x-heights and adjust with font-size or size-adjust. Mismatched x-height is the #1 tell of an amateur pairing.
• The superfamily shortcut. When in doubt, use one family that ships sans + serif + mono on a shared skeleton: IBM Plex (libre), Source (Sans 3 / Serif 4 / Code Pro, libre), Recursive (libre, variable), or commercial superfamilies like Klim's National + a Klim serif, Lineto's families, or GT America + GT Sectra. Guaranteed harmony, zero pairing risk.
• Same designer / same foundry. Faces from one hand often share spacing and rhythm. OH no Type Co's catalog inter-pairs; Klim faces inter-pair; Production Type's Newsreader + a Production sans.
• Historical compatibility. Faces from one era share DNA (two didones; a Garalde with a humanist sans both rooted in calligraphic forms). Don't pair a 1490s Garalde with a 1990s techno display unless tension is the *point*.
• Limit to two families. Three only if one is a mono used strictly for code/data. Past that you have chaos, not hierarchy — use weight, width, opsz, and case for variety within a family.

Quick worked pairings (none from the starter pack):

• *Warm editorial site:* Newsreader display + Hanken Grotesk body (both libre).
• *Technical product:* IBM Plex Sans UI + IBM Plex Mono data (one superfamily, libre).
• *Fashion landing:* Migra (Pangram Pangram, display) + Untitled Sans (Klim, body).
• *Civic app:* Libre Franklin display + Public Sans body (both libre).
• *Playful DTC:* Bricolage Grotesque display + Schibsted Grotesk body (both libre).

3. Catalog by Classification

Genuinely interesting faces per class, with the people/foundries behind them. Mix of libre (L) and commercial (C). Use this to escape your defaults.

Humanist sans

Calligraphic roots, modulated strokes, open apertures — warm and readable.

• Hanken Grotesk (Alfredo Marco Pradil / Hanken Design Co.) — L
• Source Sans 3 (Paul Hunt, Adobe) — L
• FF Meta (Erik Spiekermann) — C, the canonical humanist workhorse
• Skolar Sans (David Březina, Rosetta) — C, superb multiscript
• Whitney (Tobias Frere-Jones / Frere-Jones Type) — C

Neo-grotesque

The "neutral" Swiss line (Helvetica/Akzidenz tradition) — but pick a *good* one.

• Archivo (Omnibus-Type) — L
• Neue Haas Grotesk (Christian Schwartz, after Max Miedinger) — C, the real Helvetica
• GT America (Noël Leu + Seb McLauchlan / Grilli Type) — C, American gothic × Swiss
• ABC Diatype (Dinamo) — C
• Aeonik (CoType) — C

Geometric sans

Bauhaus circles-and-lines (Futura lineage).

• Gabarito (L), Spline Sans (L)
• Visby (Connary Fagen) — C
• Cassannet Plus (atipo) — PWYW, art-deco geometric
• Avenir Next / Avenir (Adrian Frutiger) — C, the humane geometric

Grotesque / industrial

Earlier, grittier grotesques and mechanical gothics.

• Le Murmure (Velvetyne) — L, expressive display grotesque
• Apfel Grotezk (Collletttivo) — L, deadpan
• ABC Monument Grotesk (Dinamo) — C
• Aperçu (Colophon, now Monotype) — C
• Sharp Grotesk (Lucas Sharp / Sharp Type) — C, 21 widths × 7 weights

Garalde / old-style serif

1490s–1600s humanist roots, low contrast, bracketed serifs, angled stress.

• EB Garamond (L), Cormorant (Christian Thalmann) — L
• Arnhem (Fred Smeijers / OurType) — C
• Galaxie Copernicus (Chester Jenkins + Kris Sowersby) — C
• Sabon Next (Jan Tschichold, revived by Jean François Porchez) — C

Transitional serif

18th-c., higher contrast, more vertical stress (Baskerville/Times lineage).

• Source Serif 4 (Frank Grießhammer, Adobe) — L
• Newsreader (Production Type) — L
• Tiempos (Kris Sowersby / Klim) — C, a modernized Plantin/Times
• Lyon (Kai Bernau / Commercial Type) — C

Didone / modern serif

Extreme thick/thin contrast, hairline serifs (Bodoni/Didot lineage).

• Libre Caslon Display is *not* didone — for libre didone use Playfair Display (Claus Eggers Sørensen) — L (note: itself now common; set it large only)
• Genath (François Rappo / Optimo) — C, a rigorous Basel didone revival
• Canela (Miguel Reyes / Commercial Type) — C, didone × glyphic
• Domaine Display (Klim) — C

Slab serif

Heavy, often unbracketed rectangular serifs.

• Roboto Slab is tired — use Zilla Slab (Typotheque for Mozilla) — L, or Bricolage's heavier cuts
• Rockwell / Archer lineage commercial: Archer (Hoefler&Co) — C
• Caponi Slab (OH no Type Co) — C

Glyphic / incised

Chiseled, flared terminals — stone-cut feel, between serif and sans.

• Trajan is a cliché (movie posters) — avoid; instead Albertus-adjacent or Friz Quadrata
• Hatton (Pangram Pangram) — free to try, high-contrast glyphic-display
• Schnyder (Commercial Type) — C, contrast-glyphic display

Humanist serif

Warmer, lower-contrast text serifs built for reading on screen.

• Spectral (Production Type) — L
• Source Serif 4 — L
• Lexicon (Bram de Does / TEFF) — C, the gold standard for book text
• FF Scala (Martin Majoor) — C

Display

Big, characterful, headline-only.

• Bricolage Grotesque (Mathieu Triay) — L, wdth + opsz
• Big Shoulders (Production Type / Chicago) — L
• Anybody (Tyler Finck) — L, extreme width axis
• Druk (Berton Hasebe / Commercial Type) — C, compressed poster
• Obviously (James Edmondson / OH no Type Co) — C
• Migra, Editorial New (Pangram Pangram) — free to try

Monospace

For code, data, and the technical register.

• JetBrains Mono (L), IBM Plex Mono (L), Commit Mono (L, "anonymous" by design), Departure Mono (L, pixel)
• Recursive Mono (Arrow Type) — L, variable with a "casual" axis
• MD IO (Mass-Driver) — C
• Vulf Mono (OH no Type Co) — C, warm and inky

Unexpected categories

• Stencil: Chaney (atipo, PWYW); Stardom/Velvetyne display stencils — for utility/military/industrial edge.
• Mechanical / monolinear: Recursive Mono Casual (L); Space Mono (L) — uniform stroke, technical-but-friendly.
• Reverse-contrast (thick horizontals, thin verticals — Western/circus/"Italian"): Le Murmure leans this way; OH no Type Co's display work explores it; commercial Caslon Doric-adjacent slab-reverse faces. Use as a deliberate jolt.
• Blackletter-adjacent / textura without going full Gothic: rarely right outside metal/heritage/editorial pull-quotes — when you must, prefer a *modern interpretation* over a 1500s textura, and never set body copy in it.

4. The Libre Tier — No Budget Is No Excuse

(a) Interesting Google Fonts beyond the defaults

Google Fonts is not just Roboto and Open Sans. Reach for these instead:

• Serifs: Newsreader (Production Type), Source Serif 4 (Adobe), Spectral (Production Type), Libre Caslon (Text + Display), EB Garamond, Cormorant, Zilla Slab.
• Grotesques / sans: Bricolage Grotesque, Instrument Sans (+ Instrument Serif for the condensed-display partner), Hanken Grotesk, Schibsted Grotesk, Gabarito, Onest, Figtree, Familjen Grotesk, Archivo (+ Archivo Expanded/Narrow), Mona Sans / Hubot Sans (GitHub).
• Caveat — already overused even though libre: Fraunces, Space Grotesk, Sora, and Plus Jakarta Sans. Fine faces, but if you use them you're swimming in the same pool as everyone else; treat them as *defaults to beat*, not destinations.

(b) Non-Google libre & PWYW foundries worth knowing

• Velvetyne (velvetyne.fr) — France, since 2010. The most adventurous libre catalog: Le Murmure, Pilowlava, Basteleur, Fivo Sans, Redaction. Genuinely libre (use/modify/redistribute).
• Collletttivo (collletttivo.it) — Milan, first Italian open-source foundry. Apfel Grotezk and friends.
• The League of Moveable Type — the original open-source foundry (League Gothic, League Spartan, Ostrich Sans).
• atipo foundry (atipofoundry.com) — Gijón, Spain. True pay-what-you-want (set your own price, including the minimum): Wotfard, Basier, Chaney, Round 8, Cassannet Plus, Sfizia, N27.
• Uncut.wtf — curated catalog (~160+) of free/open-source contemporary type by independent designers (by Kasper Nordkvist). Best discovery surface for *current* libre work.
• Open Foundry (open-foundry.com) — curated open-source typeface gallery, distraction-free specimens.
• Fontshare / Indian Type Foundry (fontshare.com) — free for commercial use, high quality (Satoshi, General Sans, Clash Display, Switzer, Cabinet Grotesk). Caveat: several are now badly overused — treat as the AI starter pack and prefer the alternatives in §0.

> Free-to-try ≠ libre. Pangram Pangram and Displaay offer generous *trial / free-for-personal* fonts, but commercial use must be licensed. Don't ship a client site on a "free" trial weight.

5. Type Scales

Modular ratios

| Ratio | Name | Use case |

|---|---|---|

| 1.067 | Minor Second | Dense UIs, dashboards |

| 1.125 | Major Second | General web body content |

| 1.200 | Minor Third | Balanced default hierarchy |

| 1.250 | Major Third | Marketing, headline-forward |

| 1.333 | Perfect Fourth | Hero sections, bold statements |

| 1.414 | Augmented Fourth | Editorial drama |

| 1.618 | Golden Ratio | Classical; too large for most UI — use only for poster/display |

Pick the ratio to match the register: dense tools want a *small* ratio (1.125–1.2); a fashion landing page wants a *large* one (1.333+) so the display face can breathe.

Fluid type with clamp()

:root {
  /* body: 16px @ 320px viewport → 20px @ 1240px */
  --step-0: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
  /* h2: 28px → 48px */
  --step-3: clamp(1.75rem, 1.32rem + 2.14vw, 3rem);
}
/* Always use rem for the min/max so user zoom is respected (see §8). */

Generate the whole scale with a tool like Utopia (utopia.fyi) so the min and max sets share one ratio — don't hand-tune each step and drift out of rhythm.

Vertical rhythm

Set a baseline unit (e.g. 1.5rem = 24px), make spacing multiples of it, and let headings snap to integer multiples. Body line-height ~1.5–1.7; headings tighter (1.05–1.2). Never apply one global line-height.

6. Variable Fonts & Axes

| Axis | Tag | Typical range | Real use |

|---|---|---|---|

| Weight | wght | 100–900 | One file, many weights — animate or theme |

| Width | wdth | ~75–125 | Fit headlines to containers without re-tracking |

| Optical size | opsz | 8–144 | Correct contrast for size — auto via font-optical-sizing: auto |

| Slant | slnt | -12–0 | Oblique without a second file |

| Grade | GRAD | varies | Adjust apparent weight without reflow — perfect for dark mode |

Use opsz correctly: large display sizes want higher contrast, finer serifs, tighter spacing; small text wants the opposite. Faces like Newsreader and Bricolage Grotesque carry a real opsz axis — let the browser drive it with font-optical-sizing: auto, or set it explicitly per type level. Don't set a display opsz on body copy.

Dark-mode compensation with GRAD (no layout shift):

@media (prefers-color-scheme: dark) {
  body { font-variation-settings: "GRAD" 50; } /* heavier-looking, same metrics */
}

If the face has no GRAD, nudge weight (400 → 450) — but know that *changes metrics* and can shift layout.

Exotic axes exist and are worth knowing per-face: Recursive ships a CASL (casual) and MONO axis; some Dinamo/variable display faces expose custom axes for serif-shape or "energy." Read the foundry's spec — never assume an axis tag.

7. Performance & Loading

• Self-host WOFF2 for control and privacy; CDN only when you must. Google Fonts CSS adds a render-blocking round trip — if you use it, preconnect and prefer self-hosting the WOFF2.
• Subset. Latin-only is ~30KB vs ~150KB+ full. Drop Cyrillic/Greek/Vietnamese you don't ship. Tools: glyphhanger, fonttools subset.
• font-display: swap for body (show text immediately); optional for non-critical decorative faces to dodge CLS entirely.
• Preload the one critical face: <link rel="preload" as="font" type="font/woff2" crossorigin>. Don't preload everything — that just competes for bandwidth.
• Kill CLS with size-adjust + fallback metrics. Match the fallback's x-height/advance to the web font so the swap doesn't reflow:

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 97%;     /* tune to match the real face's x-height */
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
body { font-family: "Hanken Grotesk", "Hanken Fallback", sans-serif; }

(Next.js next/font, Fontaine, and Capsize generate these overrides automatically — use them.)

Budget guide: Fast (<100KB, 2–3 WOFF2) · Balanced (100–200KB) · Rich (200–400KB). Prefer one variable file over eight static weights.

Never use @import for fonts (render-blocking, serialized) and never Font Awesome / icon fonts for icons — use inline SVG.

8. Accessibility — Non-Negotiable

These are hard rules, not suggestions:

• Body / prose / caption text ≥ 14px (0.875rem). Never smaller. No text-xs on body; no 0.7–0.8rem on prose, captions, or meta.
• Eyebrow / label text may sit at 12px ONLY if weight ≥ 600, uppercase, and letter-spacing ≥ 0.1em — so the *apparent* size reads larger. That's the only exception.
• Never lock zoom. No user-scalable=no, no maximum-scale<2 in the viewport meta. Use <meta name="viewport" content="width=device-width, initial-scale=1"> and nothing that defeats pinch-zoom.
• Use rem/em for body sizing, not px, so the user's browser font-size preference and zoom are honored. clamp() mins/maxes in rem.
• WCAG 2.1 AA contrast: 4.5:1 body, 3:1 for large text (≥24px, or ≥18.66px bold). Never light-on-light or dark-on-dark.
• Line spacing ≥ 1.5× body; paragraph spacing ≥ 2× font size; user must be able to override letter-spacing to 0.12em and word-spacing to 0.16em without breaking layout.
• Measure 45–75 characters (65ch sweet spot). Cap prose width; don't let it run to the viewport edge on wide screens.

9. OpenType Features

/* Prefer the high-level properties; fall back to feature-settings only for ssXX/cvXX */
.tabular   { font-variant-numeric: tabular-nums; }      /* align numbers in tables */
.fractions { font-variant-numeric: diagonal-fractions; }/* 1/2 → ½ */
.smallcaps { font-variant-caps: all-small-caps; }       /* acronyms, not faux caps */
.ligatures { font-variant-ligatures: common-ligatures; }
.brand     { font-feature-settings: "ss01" 1, "cv05" 2; }/* stylistic alts — check the spec */

Use tabular numerals for any column of figures (prices, dashboards). Use the font's real small caps, never text-transform + smaller size (that's faux small caps — uneven weight). Stylistic sets (ssXX) are font-specific — read the foundry's glyph chart; don't blindly enable ss01.

10. Anti-Patterns

★ The AI-portfolio starter-pack look (headline anti-pattern)

What it looks like: a big soft display serif (Fraunces) + Inter body + acres of whitespace + one purple/teal accent gradient + Clash Display headers. Why it's wrong: it's the visual signature of "generated, not designed" — instantly dated, indistinguishable from ten thousand other sites. Instead: pick a *register* (§1), beat every default (§0), and let the type carry a point of view.

Picking a font before knowing the register

Choosing letters before you can name the mood/era/voice. You'll always reach for your habit. Decide the register first; the shortlist follows.

The system-font cop-out

font-family: -apple-system, ... shipped as the *final* brand decision because choosing was hard. Fine for a throwaway tool; a cop-out for anything with identity. (System stacks are a great *fallback*, not a brand.)

Faux bold / faux italic

Synthesizing weight or slant the family doesn't have (browser smearing the regular). Always load a real bold and real italic, or use a variable wght/slnt axis.

Too many families

3+ unrelated families = chaos. Two max (a mono for code can be the third). Get variety from weight/width/opsz/case.

Centered, long-measure body

Centering paragraphs longer than a couple lines, or letting measure exceed ~75ch. Both wreck readability — the eye loses the next line's start.

Ignoring x-height matching

Pairing or swapping faces without comparing x-heights → visible size mismatch and CLS. Compare lowercase, tune with size-adjust.

Weight jumps too harsh

400 body → 700 heading at large sizes can clang. For subtle hierarchy try 400/600 or 380/520; reserve the big jump for genuinely loud display.

Global single line-height & fixed px sizes

One line-height: 1.5 everywhere, or hardcoded px body. Set line-height per level; size in rem with clamp().

Loading full character sets

Shipping Cyrillic/Greek/Vietnamese to an English-only site. Subset.

11. Licensing Literacy

Get this right before you ship — a wrong license is a legal and a reputational problem.

• SIL OFL (Open Font License): the libre standard (most Google Fonts, Adobe Source family, IBM Plex, Velvetyne, Collletttivo). Use commercially, embed, self-host, and modify/redistribute (under the same license, can't sell the font itself alone). Safe default for products.
• Apache 2.0: also permissive (Roboto, Inter historically) — fine commercially; fewer redistribution stipulations than OFL.
• Commercial EULA: retail foundries (Klim, Commercial Type, Grilli Type, Dinamo, Sharp Type, OH no Type Co, Colophon, Lineto, Optimo, Production Type retail, MCKL, Displaay retail) license by use type, often separately:
• Desktop (install + design comps/print) — usually priced by # of workstations.
• Web (@font-face self-host) — priced by monthly pageviews or flat. Self-host vs foundry-hosted matters: some require their CDN; others let you host the WOFF2.
• App / embedded — apps, ebooks, software UI, broadcast, logos — almost always a *separate, often larger* license. A web license does not cover an iOS app.
• Trial / free-for-personal: Pangram Pangram, Displaay, and many foundries give free weights for *non-commercial* use (portfolios, pitches). Commercial use must be paid. "Free to try" ≠ libre.
• PWYW: atipo lets you name a price (incl. their minimum) for full commercial rights — genuinely the best value tier when libre won't do.
• Foundry-hosted vs self-host: foundry-hosted webfont services (Adobe Fonts, Monotype, Fontstand) bundle licensing but tie you to their CDN/subscription and can vanish if you lapse. Self-hosting OFL/PWYW/bought-web WOFF2 is the durable choice for products you'll maintain.
• Always read the specific EULA. "We saw it on Pinterest" is not a license. Verify desktop/web/app coverage, pageview tier, and modification rights before committing a brand to a face.

12. Integration with Other Skills

• design-system-creator — emit type tokens (scale, line-height, tracking, axis defaults).
• web-design-expert — implement the chosen system in layout.
• vibe-matcher — translate a brand mood into a §1 register before selecting.

Quick Reference

• Measure: 45–75ch (65ch ideal). Body: ≥14px/0.875rem, rem units, line-height 1.5–1.7. Headings: tighter line-height (1.05–1.2).
• Default move when stuck: a superfamily (IBM Plex or Source) — guaranteed harmony, libre, variable, multilingual.
• Before naming a font: name the register (§1). Before shipping a font: check the license (§11).

*The typeface is a decision, not a default. If you can't say why this face and not its three nearest neighbors, you haven't chosen yet.*