Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line heigh

Typography Professional typography for user interfaces, grounded in principles from the masters. "Typography exists to honor content." — Robert Bringhurst Reference Files For detailed guidance on specific topics, consult these references: Topic When to Read [masters.md](references/masters.md) Seeking authoritative backing, making nuanced judgments, understanding "why" [variable fonts.md](references/variable fonts.md) Using variable fonts, fluid weight, performance optimization [font loading.md](references/font loading.md) FOIT/FOUT issues, preloading, Core Web Vitals, self hosting [opentype features.md](references/opentype features.md) Ligatures, tabular numbers, stylistic sets, slashed zero [fluid typography.md](references/fluid typography.md) clamp(), text wrap, truncation, vertical rhythm, font smoothing [tailwind integration.md](references/tailwind integration.md) Tailwind typography utilities, prose plugin, customization [internationalization.md](references/internationalization.md) RTL languages, Arabic/Hebrew, CJK, bidirectional text Output Formats Type System Recommendations Typography Audits Core Principles The Four Fundamentals (Bringhurst) The most important typographic considerations for body text: 1. Point size — 16px minimum for body; 14px absolute floor for secondary text 2. Line spacing — 1.5 1.7 for body; 1.1 1.3 for headings 3. Line length — 45 75 characters (66 ideal); use max w prose (~65ch) 4. Font choice — Match typeface to content and context Hierarchy Through Contrast Establish hierarchy using multiple dimensions: Dimension Low Contrast High Contrast Size 14px → 16px 16px → 48px Weight 400 → 500 400 → 700 Color Gray 600 → Gray 900 Gray 400 → Black Case Normal UPPERCASE "Use one typeface per design. Avoid italics and bold—rely on gradations of scale instead." — Massimo Vignelli Restraint 1 2 font families maximum — One serif, one sans if pairing 3 4 heading levels in practice — Deeper nesting usually signals structure problems Stick to your type scale — Resist arbitrary sizes Let whitespace work — Don't fill every gap "In the new computer age, the proliferation of typefaces represents a new level of visual pollution." — Massimo Vignelli Type Scales Modular Scale Ratios Name Ratio Character Minor Second 1.067 Subtle, conservative Major Second 1.125 Gentle, professional Minor Third 1.200 Balanced, versatile Major Third 1.250 Bold, impactful Perfect Fourth 1.333 Strong hierarchy Golden Ratio 1.618 Dramatic, editorial Practical Scale (Minor Third @ 16px) When to Deviate Marketing/hero: Larger jumps allowed Dense data interfaces: Tighter scale Mobile: Slightly larger base (17 18px) Spacing Guidelines Line Height by Context Context Line Height Rationale Body text 1.5 1.7 Generous for readability Headings 1.1 1.3 Tighter, especially large sizes UI labels 1.2 1.4 Compact but legible Buttons 1.0 1.25 Single line, tight "The eye does not read letters, but the space between them." — Adrian Frutiger Letter Spacing Context Tracking CSS Body text Default or +0.01em tracking normal All caps +0.05em to +0.1em tracking wide / tracking wider Large headings 0.01em to 0.02em tracking tight Small text (<14px) +0.01em to +0.02em tracking wide All caps rule: Always add tracking. Keep short (1 3 words). Paragraph Spacing Between paragraphs: 1em to 1.5em (equal to or slightly more than line height) After headings: Reduced top margin on first paragraph Between sections: 2 3× paragraph spacing Font Selection System Font Stacks Safe Web Font Recommendations Category Fonts Use Case Sans serif Inter, Source Sans 3, Work Sans, DM Sans UI, body text Serif Source Serif 4, Lora, Merriweather, Literata Editorial, long form Monospace JetBrains Mono, Fira Code, Source Code Pro Code, data Display Fraunces, Epilogue, Outfit Headlines Pairing Principles Pair by contrast — Serif + sans serif Match x height — For visual harmony when mixed Ensure weight availability — Both need needed weights/styles "A father should not have a favorite among his daughters." — Hermann Zapf (on his typefaces) Modern CSS Typography Text Wrapping Caveat: Don't use balance inside bordered containers—creates visual imbalance. Fluid Typography See [fluid typography.md](references/fluid typography.md) for complete scale. Text Truncation Dark Mode Typography Weight Adjustment Text appears heavier on dark backgrounds. Reduce weight slightly: Font Smoothing Apply antialiasing on dark backgrounds to counter perceived boldness: Color Contrast Avoid pure white ( fff) on pure black ( 000)—too harsh Use off white ( f5f5f5) and near black ( 1a1a1a) Aim for 10:1 to 15:1 contrast in dark mode Typographic Details Quotation Marks Use curly quotes, not straight: Correct: "Hello" and 'world' Incorrect: "Hello" and 'world' Dashes Type Character Use Hyphen Word breaks, compounds En dash – Ranges (2020–2024), relationships Em dash — Parenthetical statements Numbers Type Use Case CSS Tabular Tables, prices, alignment font variant numeric: tabular nums Proportional Body text font variant numeric: proportional nums Old style Editorial content font variant numeric: oldstyle nums Slashed zero Code, data font feature settings: "zero" 1 See [opentype features.md](references/opentype features.md) for complete reference. Accessibility Minimums Element Minimum Preferred Body text 16px 16 18px Secondary text 14px 14 16px Legal/caption 12px 12px + increased tracking Contrast ratio 4.5:1 7:1 User Preferences Dyslexia Considerations Avoid justified text Prefer sans serif with distinct letterforms (a vs α, l vs 1 vs I) Generous line height and paragraph spacing Consider offering OpenDyslexic as option Common Mistakes Avoid All caps body text or long headings Centered body paragraphs Line length over 80 characters Insufficient contrast for "aesthetic" reasons Mixing too many font families ( 2) Decorative fonts for UI text Justified text on the web Tiny gray text on white backgrounds Letter spacing on Arabic text Watch For Orphans and widows in prominent text Inconsistent heading hierarchy Missing font fallbacks Layout shift from web font loading Underlined text that isn't a link Quick Implementation Minimal Professional Setup Tailwind Quick Start See [tailwind integration.md](references/tailwind integration.md) for complete patterns.