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
|---------|---------|----------------|
| ... | ... | ... |
### 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;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
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
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
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
h1, h2, h3, blockquote, figcaption {
text-wrap: balance;
}
p, li {
text-wrap: pretty;
}
Caveat: Don't use balance inside bordered containersβcreates visual imbalance.
Fluid Typography
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 +