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

1. Start with personality — Typography selection flows FROM brand personality TO typeface choices. Never the reverse.
2. Honor content — Beautiful type that doesn't serve content fails its purpose.
3. Contrast through classification — Serif + sans-serif pairing creates natural hierarchy without conflict.
4. Form follows function — Body text prioritizes legibility; display text can prioritize personality.
5. Consistency builds recognition — Every touchpoint reinforces (or undermines) brand perception.
6. Accessibility is non-negotiable — Design for the widest possible audience.
7. 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:

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:

The Process:

1. Define Base Size: Start with 16px for web (browser default, accessibility baseline)
2. Choose a Ratio: Match to brand personality and content type
3. Calculate Sizes: Multiply base by ratio for each step up, divide for steps down
4. Apply to Hierarchy: Map calculated sizes to H1–H6, body, captions
5. 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:

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

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:

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

1. 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

1. Avoid "Typographic Mud": Typefaces from the same classification but different families can blur together without creating meaningful distinction.

1. Create Meaningful Hierarchy: Use contrast in weight, size, and style to guide readers.

1. Limit Strong Personalities: Mixing two bold typographic personalities rarely works—they compete for attention.

1. 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)

Letter Spacing (Tracking)

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:

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:

1. Use font-display: swap
2. Preload critical fonts
3. Use font-display: optional for maximum performance
4. 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

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:

Key Finding: Sans-serif, monospaced, and roman fonts are most readable for dyslexic readers. Italics significantly reduce readability.

Print vs. Digital Considerations

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

Key Considerations

1. Read the EULA: Every foundry's terms differ
2. Logo Use: Some licenses explicitly prohibit logo use
3. Client Work: Clients need their own license; you cannot transfer yours
4. Modifications: Most licenses prohibit altering font files
5. 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

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](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