Typography Pairings

Typography Pairings

Curated font pairings organized by character and context, with computed type scales and fluid typography formulas.

Purpose

• Provide distinctive, intentional typography choices
• Map pairings to personality and use case
• Include ready-to-use type scale systems
• Ban overused AI-default font combinations

Curated Pairings

Serif + Sans-Serif (Classic Contrast)

Sans-Serif + Sans-Serif (Contemporary)

Monospace + Sans-Serif (Technical)

Display + Body (High Impact)

Type Scale Systems

Minor Third (1.200) — Compact, professional

Major Third (1.250) — Balanced, versatile

Perfect Fourth (1.333) — Dramatic, editorial

Fluid Typography

Use clamp() for responsive scaling between viewport widths:

/* Formula: clamp(min, preferred, max) */
/* preferred = min + (max - min) * ((100vw - minVW) / (maxVW - minVW)) */

--text-base: clamp(1rem, 0.5rem + 0.75vw, 1.125rem);
--text-lg: clamp(1.2rem, 0.8rem + 0.9vw, 1.5rem);
--text-xl: clamp(1.44rem, 0.9rem + 1.2vw, 2rem);
--text-2xl: clamp(1.728rem, 1rem + 1.6vw, 2.5rem);
--text-3xl: clamp(2.074rem, 1.2rem + 2vw, 3.5rem);

Viewport breakpoints: min = 320px, max = 1280px

Weight & Leading Rules

Rule: As font size increases, line-height decreases and letter-spacing goes negative.

Anti-Generic Bans

Validation Checklist

• Font pairing has clear character rationale
• Heading and body fonts have sufficient contrast (different classification or weight)
• No more than 2 font families (3 only if including monospace for code)
• Type scale follows consistent ratio
• Line heights set per context (not one value for all)
• Font weights create clear hierarchy (min 200 weight difference heading vs body)
• No banned combinations used without explicit justification
• Fluid typography applied for responsive scaling