brand-typography-systems（品牌排版系统）

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
2. Avoid "Typographic Mud": Typefaces from the same classification but different families can blur together without creating meaningful distinction.
3. Create Meaningful Hierarchy: Use contrast in weight, size, and style to guide readers.
4. Limit Strong Personalities: Mixing two bold typographic personalities rarely works—they compete for attention.
5. 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 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