Working type director's reference for selecting, pairing, and shipping typefaces with real taste. Covers a broad, opinionated catalog of typefaces and foundries (libre through commercial), a mood/era/register-driven selection framework that never collapses to one answer, font pairing as logic, fluid

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. 1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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 . 7. 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

typography-expert