Brand Typography Systems & Strategic Type Selection
Quick reference for developing strategic brand typography systems grounded in personality, hierarchy, and practical application.
"Typography exists to honor content." — Robert Bringhurst, The Elements of Typographic Style
"Typography and design should enhance communication, not just look attractive." — Erik Spiekermann
"I can teach anyone good typography in two or three days. The craft is very simple, the rest is just practice." — Erik Spiekermann
Key Principles
- Start with personality — Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
- Honor content — Beautiful type that doesn't serve content fails its purpose.
- Contrast through classification — Serif + sans-serif pairing creates natural hierarchy without conflict.
- Form follows function — Body text prioritizes legibility; display text can prioritize personality.
- Consistency builds recognition — Every touchpoint reinforces (or undermines) brand perception.
- Accessibility is non-negotiable — Design for the widest possible audience.
- Systems scale — Create hierarchies that work across all applications and contexts.
Core Frameworks
1. Brand-First Typography Selection Process
Typography selection must flow from brand strategy, not aesthetic preference.
The Process:
| Step |
Action |
Purpose |
| 1 |
Define Brand Personality |
Identify 3-5 traits that define brand voice and image |
| 2 |
Understand Target Audience |
Demographics, preferences, industry expectations |
| 3 |
Gather Inspiration |
Analyze competitors, identify differentiation opportunities |
| 4 |
Select and Pair Fonts |
Create mockups across touchpoints (print, web, mobile) |
| 5 |
Establish Hierarchy |
Define primary, secondary, tertiary with clear purposes |
| 6 |
Create Guidelines |
Document everything with examples and specifications |
Key Insight: "If the brand can define itself using descriptions to capture the tone, personality, and principles—we can translate that into typographic forms."
2. Modular Scale Typography System
A mathematical approach to creating harmonious type hierarchies using consistent ratios.
Common Ratios:
| Ratio |
Value |
Character |
Best For |
| Minor Second |
1.067 |
Subtle increments |
Dense layouts, data-heavy UIs |
| Major Second |
1.125 |
Slightly noticeable |
Functional interfaces |
| Minor Third |
1.200 |
Moderate differentiation |
Balanced content hierarchy |
| Major Third |
1.250 |
Clear hierarchy |
General UI design |
| Perfect Fourth |
1.333 |
Distinct visual hierarchy |
Editorial, marketing |
| Golden Ratio |
1.618 |
Dramatic, high-end |
Premium brands, display-heavy |
The Process:
- Define Base Size: Start with 16px for web (browser default, accessibility baseline)
- Choose a Ratio: Match to brand personality and content type
- Calculate Sizes: Multiply base by ratio for each step up, divide for steps down
- Apply to Hierarchy: Map calculated sizes to H1–H6, body, captions
- Test Responsively: Adjust ratio or base for different screen sizes
Key Principle: Limit to 6-8 distinct sizes. Larger screens can use more dramatic ratios; smaller screens benefit from conservative ratios.
Tools: Typescale.io | Type Scale Tool
3. Ellen Lupton's "Thinking with Type" Framework
A comprehensive approach covering three interconnected systems:
| System |
Focus |
Key Elements |
| Letter |
Individual characters |
Typeface anatomy, classification, personality |
| Text |
Words and paragraphs |
Alignment, spacing, kerning, tracking, leading |
| Grid |
Page structure |
Columns, margins, spatial relationships |
Key Principles:
- "Learn the rules and how to break them"
- Historical context informs modern practice
- Visual balance and Gestalt grouping guide effective layouts
- Accessibility and legibility are non-negotiable
Font Classification & Personality Matrix
| Classification |
Personality Traits |
Best For |
Example Industries |
| Serif |
Traditional, classical, reliable, authoritative, sophisticated |
Long-form reading, heritage positioning, trust |
Law firms, finance, luxury, editorial |
| Sans-Serif |
Modern, clean, minimal, approachable, contemporary |
Digital interfaces, startups, accessibility |
Tech, SaaS, healthcare, contemporary retail |
| Script |
Elegant, distinctive, personal, feminine |
Special occasions, luxury accents |
Fashion, wedding, high-end beauty |
| Handwritten |
Artsy, informal, fun, playful, authentic |
Personal connection, casual brands |
Creative agencies, children's products, artisan food |
| Display/Decorative |
Bold, attention-grabbing, distinctive |
Headlines only, limited accent use |
Entertainment, events, creative campaigns |
| Slab Serif |
Strong, sturdy, mechanical, modern-classic |
Technology with heritage, contemporary editorial |
Construction, automotive, journalism |
| Monospace |
Technical, precise, developer-oriented |
Code, data, technical documentation |
Developer tools, fintech, data platforms |
Serif vs. Sans-Serif Decision Framework
Choose Serif When:
- Brand leans artisanal, authoritative, or editorial
- Industries: Boutique hotels, legal firms, investment advisory, craft producers, heritage brands
- Long-form print content leads touchpoints
- You want to convey tradition, trust, premium positioning
- Target audience expects established credibility
Choose Sans-Serif When:
- 70%+ of touchpoints are digital UI (apps, dashboards, small screens)
- Industries: Tech, startups, digital products, contemporary retail, healthcare
- Quick legibility is paramount
- You want to convey modernity, accessibility, innovation
- Audiences expect contemporary, forward-thinking brands
Note: High-resolution displays have reduced the screen legibility gap between serif and sans-serif. Context and specific typeface matter more than classification alone.
Typeface Evaluation Criteria
Seven dimensions for evaluating any typeface:
| Criterion |
Question to Ask |
Why It Matters |
| Comprehensiveness |
Does it have all characters, weights, and styles needed? |
Brand needs evolve; typeface must grow with you |
| Legibility |
Is it readable at small sizes? Are characters distinctive? |
Content must be consumable |
| Versatility |
Works across headlines, body, captions, different media? |
One system must serve many contexts |
| Complementarity |
Works well with logo, colors, imagery? |
Typography exists within visual system |
| Distinctiveness |
Helps differentiate from competitors? |
Typography is branding opportunity |
| Technical Readiness |
Available as web font? Proper licensing? Variable font? |
Implementation constraints matter |
| X-Height Appropriateness |
Optimal for intended sizes? |
Higher x-height improves screen legibility, but extremely high reduces word-shape recognition |
Font Pairing Principles
The Classic Approach: Contrast Through Classification
The oldest reliable rule: pair serif with sans-serif. This creates clear contrast through form while allowing both typefaces to serve distinct purposes.
Five Key Principles
Seek Contrast, Not Conflict
"When two styles are paired that are almost the same—but not quite—they begin to clash, like wearing two slightly different plaid patterns at once." — Ellen Lupton
Avoid "Typographic Mud": Typefaces from the same classification but different families can blur together without creating meaningful distinction.
Create Meaningful Hierarchy: Use contrast in weight, size, and style to guide readers.
Limit Strong Personalities: Mixing two bold typographic personalities rarely works—they compete for attention.
Consider Weight Contrast: Bolder weights for titles, lighter for body (or vice versa for specific effects).
Practical Tips
- Keep one font simple when using a distinctive display font
- Serif headlines + sans-serif body (or reverse) is reliable
- Look for shared characteristics: similar x-heights, proportions, or historical era
- Test extensively in real content contexts before committing
Typography Spacing Guidelines
Line Height (Leading)
| Text Type |
Line Height |
Rationale |
| Headlines |
1.1 - 1.25 |
Tight for impact |
| Subheads |
1.25 - 1.35 |
Moderate |
| Body copy |
1.5 - 1.7 |
Optimal readability |
| Long-form content |
1.6 - 1.8 |
Extra breathing room |
Letter Spacing (Tracking)
| Context |
Tracking |
Rationale |
| Large headlines (>36px) |
-0.02em to -0.01em |
Tighten for impact |
| Medium headings |
0 |
Default |
| Body text |
0 |
Designed for optimal spacing |
| Small text (<14px) |
0.01em to 0.02em |
Open up for legibility |
| All caps |
0.05em to 0.1em |
Always add spacing |
| Buttons/Labels |
0.05em |
Improve readability |
Line Length (Measure)
- Optimal: 50-75 characters per line (66 often cited as ideal)
- Minimum: 45 characters (below = choppy reading)
- Maximum: 80 characters (above = eye strain)
Digital Typography Specifics
Variable Fonts
What They Are: Single font file containing all weights, widths, and styles through continuous interpolation.
Benefits:
- Performance: One file vs. multiple static files (e.g., 405KB vs 1,170KB for full Source Sans Pro family)
- Design Flexibility: Access any weight (e.g., 450, not just 400 or 500)
- Responsive Typography: Adjust weight/width based on viewport
- Animation: Smooth transitions between styles
Key Axes:
| Axis |
Code |
Range |
Effect |
| Weight |
wght |
Thin to Black |
Stroke thickness |
| Width |
wdth |
Condensed to Extended |
Character width |
| Italic |
ital |
Upright to Italic |
Roman/italic switch |
| Slant |
slnt |
Angle of lean |
Oblique angle |
| Optical Size |
opsz |
Size-specific adjustments |
Auto-adjusts details for size |
Web Font Performance
The Problem: Custom fonts require downloads that delay text rendering.
FOIT vs FOUT:
- FOIT (Flash of Invisible Text): Browser hides text until font loads—poor UX
- FOUT (Flash of Unstyled Text): Shows fallback font first, swaps when ready—preferred
Recommended Strategies:
- Use
font-display: swap
- Preload critical fonts
- Use
font-display: optional for maximum performance
- Match fallback metrics to reduce layout shift
Responsive Typography
Fluid Typography with clamp():
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
- Minimum: 2rem (won't shrink below)
- Preferred: 5vw (scales with viewport)
- Maximum: 4rem (won't grow above)
System Font Stacks
When to Use: Applications, dashboards, content-heavy tools where neutrality and performance matter.
Modern System Font Stack:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Resource: Modern Font Stacks
WCAG Typography Requirements
Contrast Ratios
| Standard |
Ratio |
Use Case |
| Level AA (minimum) |
4.5:1 |
Normal text |
| Level AA (minimum) |
3:1 |
Large text (24px+ or 18.5px bold) |
| Level AAA (enhanced) |
7:1 |
Normal text |
| Level AAA (enhanced) |
4.5:1 |
Large text |
Text Resizing (WCAG 1.4.4)
- Text must be resizable to 200% without loss of content or functionality
- Use relative units (rem, em, %) not fixed pixels
Text Spacing (WCAG 1.4.12)
Must accommodate user overrides for:
- Line height: 1.5x font size
- Paragraph spacing: 2x font size
- Letter spacing: 0.12x font size
- Word spacing: 0.16x font size
Dyslexia-Friendly Typography
Key Characteristics:
- Simple letter shapes (sans-serif generally preferred)
- Wider letter and word spacing
- Distinct letterforms (clear b/d, p/q differentiation)
- Upright (avoid italics for body text)
- Adequate size (16px+ for body)
Recommended Fonts:
| Font |
Why It Works |
| Lexend |
Specifically designed for readability and dyslexia |
| Open Sans |
Clear shapes, generous spacing |
| Verdana |
Clear letter shapes, uniformity |
| Atkinson Hyperlegible |
Designed for low-vision readers, benefits all |
| Inter |
Clear shapes, excellent for digital |
Key Finding: Sans-serif, monospaced, and roman fonts are most readable for dyslexic readers. Italics significantly reduce readability.
Print vs. Digital Considerations
| Factor |
Print |
Digital |
| Resolution |
300 dpi |
72-100 ppi (varies by screen) |
| Body Font Size |
10-12pt typical |
15-25px typical |
| Font Freedom |
Any font works if printed |
Limited by availability/licensing |
| Rendering |
Consistent across prints |
Varies by device/browser |
| Serif Readability |
Excellent for long text |
Depends on screen quality |
Cross-Channel Best Practices
- Choose typefaces designed for both environments
- Test selected fonts in both print and digital mockups
- Consider typeface superfamilies (versions optimized for each medium)
- Ensure licensing covers all intended uses
- Document specific size/weight adjustments needed per medium
Font Licensing
License Types
| Type |
Use Case |
Typical Limits |
| Desktop |
Design software, print materials |
Number of users/devices |
| Web |
Websites via CSS |
Page views, domains |
| App |
Mobile/desktop applications |
App downloads, platforms |
| ePub |
Digital publications |
Title count |
| Server/API |
Dynamic image generation |
Impressions |
Key Considerations
- Read the EULA: Every foundry's terms differ
- Logo Use: Some licenses explicitly prohibit logo use
- Client Work: Clients need their own license; you cannot transfer yours
- Modifications: Most licenses prohibit altering font files
- Embedding: PDF embedding, video embedding have specific rules
Open Source Options
- SIL Open Font License (OFL): Free for personal and commercial use, can modify
- Google Fonts: All fonts licensed for commercial use
- The League of Moveable Type: Quality open-source fonts
Recommended Free Fonts (Google Fonts)
Sans-Serif
- Inter: Excellent for digital interfaces, 9 weights
- DM Sans: Clean, geometric, 9 weights
- Source Sans Pro: Adobe's first open-source font
- Work Sans: Versatile, 9 weights
- Fira Sans: Space-efficient, originally for Mozilla
Serif
- Lora: Modern and classic elements, excellent readability
- Cormorant: Elegant display serif
- Playfair Display: High contrast, editorial feel
- Merriweather: Designed for screen, highly readable
Display
- Montserrat: Geometric, contemporary
- Raleway: Thin, sophisticated
- Oswald: Bold, structured
Common Mistakes
| Mistake |
Problem |
Solution |
| Inconsistent font usage across platforms |
Harms brand recognition |
Document and enforce typography system |
| Too many fonts |
Creates visual chaos |
Stick to 2-3 maximum |
| Sacrificing readability for style |
Audience can't consume content |
Test legibility at actual use sizes |
| Ignoring licensing |
Legal liability |
Audit all fonts, ensure proper licenses |
| Mismatched personality |
Typography undermines brand message |
Start with personality, select to match |
| Low contrast text |
Fails accessibility, hard to read |
Use contrast checkers, meet WCAG AA |
| Over-styling |
Shadows, gradients look unprofessional |
Keep typography clean and purposeful |
| Ignoring mobile |
Fails on primary device category |
Test across all device sizes |
| Using trendy fonts |
Dates quickly, requires rebrand |
Choose timeless options |
| Skipping hierarchy |
Users can't navigate content |
Define clear size/weight distinctions |
| Not testing across media |
Print and digital render differently |
Test in both contexts |
| Default fonts for logos |
Lacks distinctiveness |
Custom or carefully selected typefaces only |
Key Mental Models
Contrast Through Classification: Serif + sans-serif pairing creates natural hierarchy and visual interest without conflict.
Form Follows Function: Body text prioritizes legibility; display text can prioritize personality.
Consistency Builds Recognition: Every touchpoint reinforces (or undermines) brand perception.
Accessibility is Non-Negotiable: Design for the widest possible audience—good accessibility is good design.
Start With Personality: Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
If You Have Fewer Choices: "It doesn't necessarily make your life more difficult. It often makes it easier." — Erik Spiekermann
Templates
See reference/templates.md for:
- Typography System Documentation Template (complete output structure)
- Modular Scale Calculator Reference
- Accessibility Testing Checklist
- Font Licensing Checklist
When to Apply This Knowledge
During Strategy Phase
- Apply Brand-First Typography Selection Process
- Use Font Classification & Personality Matrix
- Consider Serif vs. Sans-Serif Decision Framework
During Font Selection
- Apply Typeface Evaluation Criteria (7 dimensions)
- Use Font Pairing Principles
- Research font options (Google Fonts, premium foundries)
During Hierarchy Development
- Apply Modular Scale System
- Set spacing guidelines (line height, tracking, measure)
- Define typography tokens
During Validation
- Test WCAG accessibility requirements
- Verify dyslexia-friendly considerations
- Test across print and digital
- Check font licensing
1---2name: brand-typography-systems3description: Provides brand typography selection and hierarchy development frameworks including the Brand-First Typography Selection Process, Modular Scale System, Font Classification Matrix, Serif vs. Sans-Serif Decision Framework, Typeface Evaluation Criteria, Font Pairing Principles, WCAG accessibility requirements, and typography design tokens. Auto-activates during brand typography development, font selection, type hierarchy creation, and typography system work. Use when discussing brand typography, font selection, font pairing, type hierarchy, modular scale, typography accessibility, WCAG typography, or typography guidelines.4---5
6# Brand Typography Systems & Strategic Type Selection
7
8Quick reference for developing strategic brand typography systems grounded in personality, hierarchy, and practical application.
9
10> "Typography exists to honor content." — Robert Bringhurst, *The Elements of Typographic Style*
11
12> "Typography and design should enhance communication, not just look attractive." — Erik Spiekermann
13
14> "I can teach anyone good typography in two or three days. The craft is very simple, the rest is just practice." — Erik Spiekermann
15
16---
17
18## Key Principles
19
201. **Start with personality** — Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
212. **Honor content** — Beautiful type that doesn't serve content fails its purpose.
223. **Contrast through classification** — Serif + sans-serif pairing creates natural hierarchy without conflict.
234. **Form follows function** — Body text prioritizes legibility; display text can prioritize personality.
245. **Consistency builds recognition** — Every touchpoint reinforces (or undermines) brand perception.
256. **Accessibility is non-negotiable** — Design for the widest possible audience.
267. **Systems scale** — Create hierarchies that work across all applications and contexts.
27
28---
29
30## Core Frameworks
31
32### 1. Brand-First Typography Selection Process
33
34Typography selection must flow from brand strategy, not aesthetic preference.
35
36**The Process:**
37
38| Step | Action | Purpose |
39|------|--------|---------|
40| 1 | **Define Brand Personality** | Identify 3-5 traits that define brand voice and image |
41| 2 | **Understand Target Audience** | Demographics, preferences, industry expectations |
42| 3 | **Gather Inspiration** | Analyze competitors, identify differentiation opportunities |
43| 4 | **Select and Pair Fonts** | Create mockups across touchpoints (print, web, mobile) |
44| 5 | **Establish Hierarchy** | Define primary, secondary, tertiary with clear purposes |
45| 6 | **Create Guidelines** | Document everything with examples and specifications |
46
47**Key Insight**: "If the brand can define itself using descriptions to capture the tone, personality, and principles—we can translate that into typographic forms."
48
49---
50
51### 2. Modular Scale Typography System
52
53A mathematical approach to creating harmonious type hierarchies using consistent ratios.
54
55**Common Ratios:**
56
57| Ratio | Value | Character | Best For |
58|-------|-------|-----------|----------|
59| Minor Second | 1.067 | Subtle increments | Dense layouts, data-heavy UIs |
60| Major Second | 1.125 | Slightly noticeable | Functional interfaces |
61| Minor Third | 1.200 | Moderate differentiation | Balanced content hierarchy |
62| Major Third | 1.250 | Clear hierarchy | General UI design |
63| Perfect Fourth | 1.333 | Distinct visual hierarchy | Editorial, marketing |
64| Golden Ratio | 1.618 | Dramatic, high-end | Premium brands, display-heavy |
65
66**The Process:**
671. **Define Base Size**: Start with 16px for web (browser default, accessibility baseline)
682. **Choose a Ratio**: Match to brand personality and content type
693. **Calculate Sizes**: Multiply base by ratio for each step up, divide for steps down
704. **Apply to Hierarchy**: Map calculated sizes to H1–H6, body, captions
715. **Test Responsively**: Adjust ratio or base for different screen sizes
72
73**Key Principle**: Limit to 6-8 distinct sizes. Larger screens can use more dramatic ratios; smaller screens benefit from conservative ratios.
74
75**Tools**: [Typescale.io](https://typescale.io/) | [Type Scale Tool](https://precise-type.com/)
76
77---
78
79### 3. Ellen Lupton's "Thinking with Type" Framework
80
81A comprehensive approach covering three interconnected systems:
82
83| System | Focus | Key Elements |
84|--------|-------|--------------|
85| **Letter** | Individual characters | Typeface anatomy, classification, personality |
86| **Text** | Words and paragraphs | Alignment, spacing, kerning, tracking, leading |
87| **Grid** | Page structure | Columns, margins, spatial relationships |
88
89**Key Principles:**
90- "Learn the rules and how to break them"
91- Historical context informs modern practice
92- Visual balance and Gestalt grouping guide effective layouts
93- Accessibility and legibility are non-negotiable
94
95---
96
97## Font Classification & Personality Matrix
98
99| Classification | Personality Traits | Best For | Example Industries |
100|---------------|-------------------|----------|-------------------|
101| **Serif** | Traditional, classical, reliable, authoritative, sophisticated | Long-form reading, heritage positioning, trust | Law firms, finance, luxury, editorial |
102| **Sans-Serif** | Modern, clean, minimal, approachable, contemporary | Digital interfaces, startups, accessibility | Tech, SaaS, healthcare, contemporary retail |
103| **Script** | Elegant, distinctive, personal, feminine | Special occasions, luxury accents | Fashion, wedding, high-end beauty |
104| **Handwritten** | Artsy, informal, fun, playful, authentic | Personal connection, casual brands | Creative agencies, children's products, artisan food |
105| **Display/Decorative** | Bold, attention-grabbing, distinctive | Headlines only, limited accent use | Entertainment, events, creative campaigns |
106| **Slab Serif** | Strong, sturdy, mechanical, modern-classic | Technology with heritage, contemporary editorial | Construction, automotive, journalism |
107| **Monospace** | Technical, precise, developer-oriented | Code, data, technical documentation | Developer tools, fintech, data platforms |
108
109---
110
111## Serif vs. Sans-Serif Decision Framework
112
113### Choose Serif When:
114- Brand leans artisanal, authoritative, or editorial
115- **Industries**: Boutique hotels, legal firms, investment advisory, craft producers, heritage brands
116- Long-form print content leads touchpoints
117- You want to convey tradition, trust, premium positioning
118- Target audience expects established credibility
119
120### Choose Sans-Serif When:
121- 70%+ of touchpoints are digital UI (apps, dashboards, small screens)
122- **Industries**: Tech, startups, digital products, contemporary retail, healthcare
123- Quick legibility is paramount
124- You want to convey modernity, accessibility, innovation
125- Audiences expect contemporary, forward-thinking brands
126
127**Note**: High-resolution displays have reduced the screen legibility gap between serif and sans-serif. Context and specific typeface matter more than classification alone.
128
129---
130
131## Typeface Evaluation Criteria
132
133Seven dimensions for evaluating any typeface:
134
135| Criterion | Question to Ask | Why It Matters |
136|-----------|-----------------|----------------|
137| **Comprehensiveness** | Does it have all characters, weights, and styles needed? | Brand needs evolve; typeface must grow with you |
138| **Legibility** | Is it readable at small sizes? Are characters distinctive? | Content must be consumable |
139| **Versatility** | Works across headlines, body, captions, different media? | One system must serve many contexts |
140| **Complementarity** | Works well with logo, colors, imagery? | Typography exists within visual system |
141| **Distinctiveness** | Helps differentiate from competitors? | Typography is branding opportunity |
142| **Technical Readiness** | Available as web font? Proper licensing? Variable font? | Implementation constraints matter |
143| **X-Height Appropriateness** | Optimal for intended sizes? | Higher x-height improves screen legibility, but extremely high reduces word-shape recognition |
144
145---
146
147## Font Pairing Principles
148
149### The Classic Approach: Contrast Through Classification
150
151The oldest reliable rule: pair serif with sans-serif. This creates clear contrast through form while allowing both typefaces to serve distinct purposes.
152
153### Five Key Principles
154
1551. **Seek Contrast, Not Conflict**
156 > "When two styles are paired that are almost the same—but not quite—they begin to clash, like wearing two slightly different plaid patterns at once." — Ellen Lupton
157
1582. **Avoid "Typographic Mud"**: Typefaces from the same classification but different families can blur together without creating meaningful distinction.
159
1603. **Create Meaningful Hierarchy**: Use contrast in weight, size, and style to guide readers.
161
1624. **Limit Strong Personalities**: Mixing two bold typographic personalities rarely works—they compete for attention.
163
1645. **Consider Weight Contrast**: Bolder weights for titles, lighter for body (or vice versa for specific effects).
165
166### Practical Tips
167- Keep one font simple when using a distinctive display font
168- Serif headlines + sans-serif body (or reverse) is reliable
169- Look for shared characteristics: similar x-heights, proportions, or historical era
170- Test extensively in real content contexts before committing
171
172---
173
174## Typography Spacing Guidelines
175
176### Line Height (Leading)
177
178| Text Type | Line Height | Rationale |
179|-----------|-------------|-----------|
180| Headlines | 1.1 - 1.25 | Tight for impact |
181| Subheads | 1.25 - 1.35 | Moderate |
182| Body copy | 1.5 - 1.7 | Optimal readability |
183| Long-form content | 1.6 - 1.8 | Extra breathing room |
184
185### Letter Spacing (Tracking)
186
187| Context | Tracking | Rationale |
188|---------|----------|-----------|
189| Large headlines (>36px) | -0.02em to -0.01em | Tighten for impact |
190| Medium headings | 0 | Default |
191| Body text | 0 | Designed for optimal spacing |
192| Small text (<14px) | 0.01em to 0.02em | Open up for legibility |
193| All caps | 0.05em to 0.1em | Always add spacing |
194| Buttons/Labels | 0.05em | Improve readability |
195
196### Line Length (Measure)
197
198- **Optimal**: 50-75 characters per line (66 often cited as ideal)
199- **Minimum**: 45 characters (below = choppy reading)
200- **Maximum**: 80 characters (above = eye strain)
201
202---
203
204## Digital Typography Specifics
205
206### Variable Fonts
207
208**What They Are**: Single font file containing all weights, widths, and styles through continuous interpolation.
209
210**Benefits**:
211- **Performance**: One file vs. multiple static files (e.g., 405KB vs 1,170KB for full Source Sans Pro family)
212- **Design Flexibility**: Access any weight (e.g., 450, not just 400 or 500)
213- **Responsive Typography**: Adjust weight/width based on viewport
214- **Animation**: Smooth transitions between styles
215
216**Key Axes**:
217
218| Axis | Code | Range | Effect |
219|------|------|-------|--------|
220| Weight | `wght` | Thin to Black | Stroke thickness |
221| Width | `wdth` | Condensed to Extended | Character width |
222| Italic | `ital` | Upright to Italic | Roman/italic switch |
223| Slant | `slnt` | Angle of lean | Oblique angle |
224| Optical Size | `opsz` | Size-specific adjustments | Auto-adjusts details for size |
225
226### Web Font Performance
227
228**The Problem**: Custom fonts require downloads that delay text rendering.
229
230**FOIT vs FOUT**:
231- **FOIT (Flash of Invisible Text)**: Browser hides text until font loads—poor UX
232- **FOUT (Flash of Unstyled Text)**: Shows fallback font first, swaps when ready—preferred
233
234**Recommended Strategies**:
2351. Use `font-display: swap`
2362. Preload critical fonts
2373. Use `font-display: optional` for maximum performance
2384. Match fallback metrics to reduce layout shift
239
240### Responsive Typography
241
242**Fluid Typography with `clamp()`**:
243```css
244h1 {
245 font-size: clamp(2rem, 5vw, 4rem);
246}
247```
248- **Minimum**: 2rem (won't shrink below)
249- **Preferred**: 5vw (scales with viewport)
250- **Maximum**: 4rem (won't grow above)
251
252### System Font Stacks
253
254**When to Use**: Applications, dashboards, content-heavy tools where neutrality and performance matter.
255
256**Modern System Font Stack**:
257```css
258font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
259 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
260```
261
262**Resource**: [Modern Font Stacks](https://modernfontstacks.com/)
263
264---
265
266## WCAG Typography Requirements
267
268### Contrast Ratios
269
270| Standard | Ratio | Use Case |
271|----------|-------|----------|
272| **Level AA (minimum)** | 4.5:1 | Normal text |
273| **Level AA (minimum)** | 3:1 | Large text (24px+ or 18.5px bold) |
274| **Level AAA (enhanced)** | 7:1 | Normal text |
275| **Level AAA (enhanced)** | 4.5:1 | Large text |
276
277### Text Resizing (WCAG 1.4.4)
278- Text must be resizable to 200% without loss of content or functionality
279- Use relative units (rem, em, %) not fixed pixels
280
281### Text Spacing (WCAG 1.4.12)
282Must accommodate user overrides for:
283- Line height: 1.5x font size
284- Paragraph spacing: 2x font size
285- Letter spacing: 0.12x font size
286- Word spacing: 0.16x font size
287
288---
289
290## Dyslexia-Friendly Typography
291
292**Key Characteristics**:
293- Simple letter shapes (sans-serif generally preferred)
294- Wider letter and word spacing
295- Distinct letterforms (clear b/d, p/q differentiation)
296- Upright (avoid italics for body text)
297- Adequate size (16px+ for body)
298
299**Recommended Fonts**:
300
301| Font | Why It Works |
302|------|--------------|
303| **Lexend** | Specifically designed for readability and dyslexia |
304| **Open Sans** | Clear shapes, generous spacing |
305| **Verdana** | Clear letter shapes, uniformity |
306| **Atkinson Hyperlegible** | Designed for low-vision readers, benefits all |
307| **Inter** | Clear shapes, excellent for digital |
308
309**Key Finding**: Sans-serif, monospaced, and roman fonts are most readable for dyslexic readers. Italics significantly reduce readability.
310
311---
312
313## Print vs. Digital Considerations
314
315| Factor | Print | Digital |
316|--------|-------|---------|
317| **Resolution** | 300 dpi | 72-100 ppi (varies by screen) |
318| **Body Font Size** | 10-12pt typical | 15-25px typical |
319| **Font Freedom** | Any font works if printed | Limited by availability/licensing |
320| **Rendering** | Consistent across prints | Varies by device/browser |
321| **Serif Readability** | Excellent for long text | Depends on screen quality |
322
323### Cross-Channel Best Practices
324- Choose typefaces designed for both environments
325- Test selected fonts in both print and digital mockups
326- Consider typeface superfamilies (versions optimized for each medium)
327- Ensure licensing covers all intended uses
328- Document specific size/weight adjustments needed per medium
329
330---
331
332## Font Licensing
333
334### License Types
335
336| Type | Use Case | Typical Limits |
337|------|----------|----------------|
338| **Desktop** | Design software, print materials | Number of users/devices |
339| **Web** | Websites via CSS | Page views, domains |
340| **App** | Mobile/desktop applications | App downloads, platforms |
341| **ePub** | Digital publications | Title count |
342| **Server/API** | Dynamic image generation | Impressions |
343
344### Key Considerations
3451. **Read the EULA**: Every foundry's terms differ
3462. **Logo Use**: Some licenses explicitly prohibit logo use
3473. **Client Work**: Clients need their own license; you cannot transfer yours
3484. **Modifications**: Most licenses prohibit altering font files
3495. **Embedding**: PDF embedding, video embedding have specific rules
350
351### Open Source Options
352- **SIL Open Font License (OFL)**: Free for personal and commercial use, can modify
353- **Google Fonts**: All fonts licensed for commercial use
354- **The League of Moveable Type**: Quality open-source fonts
355
356---
357
358## Recommended Free Fonts (Google Fonts)
359
360### Sans-Serif
361- **Inter**: Excellent for digital interfaces, 9 weights
362- **DM Sans**: Clean, geometric, 9 weights
363- **Source Sans Pro**: Adobe's first open-source font
364- **Work Sans**: Versatile, 9 weights
365- **Fira Sans**: Space-efficient, originally for Mozilla
366
367### Serif
368- **Lora**: Modern and classic elements, excellent readability
369- **Cormorant**: Elegant display serif
370- **Playfair Display**: High contrast, editorial feel
371- **Merriweather**: Designed for screen, highly readable
372
373### Display
374- **Montserrat**: Geometric, contemporary
375- **Raleway**: Thin, sophisticated
376- **Oswald**: Bold, structured
377
378---
379
380## Common Mistakes
381
382| Mistake | Problem | Solution |
383|---------|---------|----------|
384| Inconsistent font usage across platforms | Harms brand recognition | Document and enforce typography system |
385| Too many fonts | Creates visual chaos | Stick to 2-3 maximum |
386| Sacrificing readability for style | Audience can't consume content | Test legibility at actual use sizes |
387| Ignoring licensing | Legal liability | Audit all fonts, ensure proper licenses |
388| Mismatched personality | Typography undermines brand message | Start with personality, select to match |
389| Low contrast text | Fails accessibility, hard to read | Use contrast checkers, meet WCAG AA |
390| Over-styling | Shadows, gradients look unprofessional | Keep typography clean and purposeful |
391| Ignoring mobile | Fails on primary device category | Test across all device sizes |
392| Using trendy fonts | Dates quickly, requires rebrand | Choose timeless options |
393| Skipping hierarchy | Users can't navigate content | Define clear size/weight distinctions |
394| Not testing across media | Print and digital render differently | Test in both contexts |
395| Default fonts for logos | Lacks distinctiveness | Custom or carefully selected typefaces only |
396
397---
398
399## Key Mental Models
400
401**Contrast Through Classification**: Serif + sans-serif pairing creates natural hierarchy and visual interest without conflict.
402
403**Form Follows Function**: Body text prioritizes legibility; display text can prioritize personality.
404
405**Consistency Builds Recognition**: Every touchpoint reinforces (or undermines) brand perception.
406
407**Accessibility is Non-Negotiable**: Design for the widest possible audience—good accessibility is good design.
408
409**Start With Personality**: Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
410
411**If You Have Fewer Choices**: "It doesn't necessarily make your life more difficult. It often makes it easier." — Erik Spiekermann
412
413---
414
415## Templates
416
417See [reference/templates.md](reference/templates.md) for:
418- Typography System Documentation Template (complete output structure)
419- Modular Scale Calculator Reference
420- Accessibility Testing Checklist
421- Font Licensing Checklist
422
423---
424
425## When to Apply This Knowledge
426
427### During Strategy Phase
428- Apply Brand-First Typography Selection Process
429- Use Font Classification & Personality Matrix
430- Consider Serif vs. Sans-Serif Decision Framework
431
432### During Font Selection
433- Apply Typeface Evaluation Criteria (7 dimensions)
434- Use Font Pairing Principles
435- Research font options (Google Fonts, premium foundries)
436
437### During Hierarchy Development
438- Apply Modular Scale System
439- Set spacing guidelines (line height, tracking, measure)
440- Define typography tokens
441
442### During Validation
443- Test WCAG accessibility requirements
444- Verify dyslexia-friendly considerations
445- Test across print and digital
446- Check font licensing
majiayu000