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 Seeking authoritative backing, making nuanced judgments, understanding "why" variable-fonts.md Using variable fonts, fluid weight, performance optimization font-loading.md FOIT/FOUT issues, preloading, Core Web Vitals, self-hosting opentype-features.md Ligatures, tabular numbers, stylistic sets, slashed zero fluid-typography.md clamp(), text-wrap, truncation, vertical rhythm, font smoothing tailwind-integration.md Tailwind typography utilities, prose plugin, customization internationalization.md RTL languages, Arabic/Hebrew, CJK, bidirectional text Output Formats Type System Recommendations

Type System

Scale

Base: [size, e.g., 16px]
Ratio: [e.g., Minor Third 1.200]
Rationale: [why this ratio]

Hierarchy

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

| Display | ... | ... | ... | ... | Hero, marketing |

| H1 | ... | ... | ... | ... | Page titles |

| H2 | ... | ... | ... | ... | Section heads |

| Body | ... | ... | ... | ... | Paragraphs |

| Small | ... | ... | ... | ... | Captions, labels |

Fonts

Primary: [font] — [rationale]
Secondary: [font, if applicable]
Mono: [font, if applicable]

Implementation

[Ready-to-use CSS/Tailwind]

Typography Audits

Typography Audit

Issues

| Element | Problem | Recommendation |

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

| ... | ... | ... |

Quick Wins

[Immediate improvement 1]
[Immediate improvement 2]

Core Principles The Four Fundamentals (Bringhurst)

The most important typographic considerations for body text:

Point size — 16px minimum for body; 14px absolute floor for secondary text Line spacing — 1.5-1.7 for body; 1.1-1.3 for headings Line length — 45-75 characters (66 ideal); use max-w-prose (~65ch) 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) --text-xs: 12px; / 0.75rem / --text-sm: 14px; / 0.875rem / --text-base: 16px; / 1rem / --text-lg: 18px; / 1.125rem — not in pure scale / --text-xl: 20px; / 1.25rem / --text-2xl: 24px; / 1.5rem / --text-3xl: 30px; / 1.875rem / --text-4xl: 36px; / 2.25rem / --text-5xl: 48px; / 3rem /

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 / Sans-serif (modern) / font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/ Serif / font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/ Monospace / font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

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 / Balanced line lengths for headings (≤6 lines) / h1, h2, h3, blockquote, figcaption { text-wrap: balance; }

/ Prevent orphans in body text / p, li { text-wrap: pretty; }

Caveat: Don't use balance inside bordered containers—creates visual imbalance.

Fluid Typography / Font scales smoothly between breakpoints / h1 { font-size: clamp(2rem, 1rem + 4vw, 4rem); line-height: clamp(1.1, 1.3 - 0.1vw, 1.3); }

body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }

See fluid-typography.md for complete scale.

Text Truncation / Single line / .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/ Multi-line (2 lines) / .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

Dark Mode Typography Weight Adjustment

Text appears heavier on dark backgrounds. Reduce weight slightly:

@media (prefers-color-scheme: dark) { body { font-weight: 350; / Instead of 400 / } h1, h2, h3 { font-weight: 600; / Instead of 700 / } }

Font Smoothing

Apply antialiasing on dark backgrounds to counter perceived boldness:

.dark-bg { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

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 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 / Use relative units so users can scale / body { font-size: 1rem; / Not 16px / }

/ Respect reduced motion / @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

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 :root { --font-sans: Inter, ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }

body { font-family: var(--font-sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; letter-spacing: -0.02em; }

p { text-wrap: pretty; max-width: 65ch; }

code { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }

@media (prefers-color-scheme: dark) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }

Tailwind Quick Start

See tailwind-integration.md for complete patterns.

安装