Typography

Condensed from: Taste Skill (https://github.com/Leonxlnx/taste-skill), Open Design (https://github.com/nexu-io/open-design), UI UX Pro Max (https://github.com/nextlevelbuilder/ui-ux-pro-max-skill), Hallmark (https://github.com/Nutlope/hallmark)

Faces

• Max 2 families (display + body), or 1 family at 2-3 weights. One family is normal: 31% of strong studied sites use one.
• Optional outlier with exactly one job: the wordmark, code/IDs, or one headline figure. Never a third face for labels, quotes or numbers.
• Never mix two faces inside one headline. Never style one word differently (italic, serif, colour, highlight).
• Generated defaults (use only if the brand already does): Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Raleway, Nunito, Work Sans, DM Sans, Plus Jakarta Sans, Source Sans, bare system-ui on headings; Merriweather/Lora/Georgia as body serif.
• Saturated (need a stated reason): Playfair Display, Cormorant Garamond, Fraunces, Instrument Serif, DM Serif Display, Space Grotesk, Bebas Neue, Unbounded, Geist, Mona Sans.
• Pick by setting the real headline in 2-3 candidates; judge shape, not reputation.
• Pair by structural contrast (serif display + grotesk body, or wide/condensed display + neutral body), similar x-height, same-build fallback (grotesk → system-ui, serif → Georgia).

Scale per surface

• Near sizes (16, 18, 20, 24, 28, 32) read as mush; merge sizes that look almost equal. Max 3 levels above the fold.

:root{
  --step-small: clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:  clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:  clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:  clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display: clamp(3rem,1rem + 9vw,9rem);
}

Leading and measure

• Caps on one line: 0.9. Caps that can wrap: ≥1.0. Below 1.0, check descender/ascender collisions.
• Body measure 45-75ch (default max-width: 65ch); editorial 60-70ch; phone 35-60ch; lead 40ch.
• Heading measure on the element: h1 14-20ch, h2 30ch, h3 40ch.

Tracking by size

Tracking scales with size: a value right at 120px chokes 32px. Set it per step.

Weights

• Max 3 weights across the page. Jump, don't step: 400 + 600, or 300 + 700. A 400/500/600/700/800 ladder reads as default.
• Roles: read 400, emphasize 500, announce 600. 700 does one job per screen (money, title).
• Big type does not need bold: 48% of studied heroes are regular weight. Editorial display: light or regular.
• On dark grounds drop one step (400 → 350 on variable fonts) or add +0.01em.
• Secondary text = same face, muted colour; not a lighter weight, not <13px (app meta floor 11-12px).
• font-synthesis: none. Never change weight on hover (line reflows).

Numerals

• font-variant-numeric: tabular-nums on tables, prices, KPIs, timers, counters, anything that updates. Verify the face has tnum (digit widths must change); if not, switch face.
• Right-align numeric columns. Lining figures in UI; oldstyle-nums suits serif prose.
• Non-breaking space between number and unit (10 MB). Monospace only for IDs, keys, code.

Setting details

• text-wrap: balance on headings, pretty on paragraphs. Author breaks with <br> only between phrases; check at 375px.
• Display starting with O, C, A, T, W: margin-left: -0.05em (optical alignment).
• Links: text-underline-offset: .18em; text-decoration-thickness: .07em.
• Space above a heading ≥2x space below. Never justify. No centred paragraph over 3 lines. No caps run over 3 words.
• No text-shadow, stroke or gradient fill on type. hyphens: none on headings.

Loading

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/display-700.woff2" as="font" type="font/woff2" crossorigin>

• Only weights used (2-3), display=swap. Prefer variable fonts.
• Preload only 1-2 critical files (hero display + body regular), never every variant.
• Self-hosted @font-face: font-display: swap (optional for body when CLS matters), unicode-range subsets (latin, latin-ext), metric-matched fallback via size-adjust, ascent-override, descent-override, line-gap-override so the swap doesn't shift layout.
• Single display word: Google &text=Wordmark subsets to those glyphs. Frameworks: next/font handles subsetting and fallback metrics.
• Fontshare faces: https://api.fontshare.com/v2/css?f[]=<family>@<weights>&display=swap.
• Verify in a screenshot that the face rendered, not the fallback.

Vetted pairings (Google Fonts unless noted)

Read by your agent through get_guide("typography") in the taste MCP.