brand-typography-systems

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

1. 品牌优先字体选择流程

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

字体选择必须基于品牌策略，而非审美偏好。

流程步骤：

步骤	操作	目的
1	定义品牌个性	确定3-5个能定义品牌调性与形象的特质
2	了解目标受众	分析受众 demographics、偏好及行业预期
3	收集灵感参考	研究竞品，寻找差异化机会
4	选择并搭配字体	在各类触点（印刷、网页、移动端）制作原型
5	构建层级结构	明确主、次、三级字体的用途
6	制定规范文档	记录所有细节并附上示例与规格说明

核心洞察：“如果品牌能用描述性词汇定义自身的调性、个性与原则，我们就能将其转化为排版形式。”

2. Modular Scale Typography System

2. 模块化比例排版系统

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

一种通过固定比例创建和谐字体层级的数学方法。

常用比例：

比例	数值	特点	适用场景
小二度	1.067	细微增量	密集布局、数据导向型UI
大二度	1.125	轻微辨识度	功能性界面
小三度	1.200	中等区分度	平衡的内容层级
大三度	1.250	清晰层级	通用UI设计
纯四度	1.333	鲜明视觉层级	编辑内容、营销物料
黄金比例	1.618	戏剧性、高端感	高端品牌、标题导向型内容

实施流程：

定义基础字号：网页端以16px为起点（浏览器默认值，符合可访问性基准）
选择比例值：匹配品牌个性与内容类型
计算字号：基础字号乘以比例得到各级大号，除以比例得到各级小号
映射至层级：将计算出的字号对应到H1–H6、正文、说明文字
响应式测试：针对不同屏幕尺寸调整比例或基础字号

核心原则：限制使用6-8种不同字号。大屏幕可使用更具戏剧性的比例；小屏幕适合保守的比例。

工具：Typescale.io | Type Scale Tool

3. Ellen Lupton's "Thinking with Type" Framework

3. 艾伦·勒普顿的“用字体思考”框架

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（衬线字体）	传统、经典、可靠、权威、精致	长篇阅读、传承定位、信任建立	律所、金融、奢侈品、编辑出版
Sans-Serif（无衬线字体）	现代、简洁、极简、亲切、新潮	数字界面、初创企业、可访问性	科技、SaaS、医疗、当代零售
Script（手写体）	优雅、独特、个人化、柔美	特殊场合、奢侈品点缀	时尚、婚礼、高端美妆
Handwritten（手写风格体）	艺术感、非正式、有趣、活泼、真实	建立个人连接、休闲品牌	创意机构、儿童产品、手工食品
Display/Decorative（展示/装饰体）	醒目、吸睛、独特	仅用于标题、有限点缀	娱乐、活动、创意营销活动
Slab Serif（粗衬线字体）	强劲、稳固、机械感、现代经典	有传承的科技品牌、当代编辑出版	建筑、汽车、新闻业
Monospace（等宽字体）	技术感、精确、面向开发者	代码、数据、技术文档	开发者工具、金融科技、数据平台

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.

70%以上的品牌触点为数字UI（应用、仪表盘、小屏幕）
适用行业：科技、初创企业、数字产品、当代零售、医疗
快速易读性是首要需求
希望传递现代感、可访问性、创新性
受众期待新潮、前瞻性的品牌

注意：高分辨率显示屏缩小了衬线与无衬线字体在屏幕上的易读性差距。相比字体分类，使用场景和具体字体选型更为重要。

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

评估任意字体的七个维度：

评估维度	参考问题	重要性
完整性	是否包含所需的所有字符、字重与样式？	品牌需求会演变，字体需具备扩展性
易读性	小字号下是否清晰可读？字符是否辨识度高？	内容必须易于消费
通用性	是否适用于标题、正文、说明文字及不同媒介？	一套系统需服务多种场景
互补性	是否与Logo、色彩、图像搭配协调？	排版是视觉系统的一部分
独特性	是否有助于与竞品形成差异化？	排版是品牌塑造的机会
技术适配性	是否支持网页字体？是否有合适的授权？是否为可变字体？	落地约束至关重要
X高度适配性	是否适合预期使用字号？	较高的X高度提升屏幕易读性，但过高会降低单词形状辨识度

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

使用独特的标题字体时，搭配简洁的正文字体
衬线标题+无衬线正文（或反向搭配）是可靠组合
寻找共同特征：相似的X高度、比例或历史风格
在真实内容场景中充分测试后再确定最终方案

Typography Spacing Guidelines

排版间距规范

Line Height (Leading)

行高（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

文本类型	行高范围	依据
标题	1.1 - 1.25	紧凑排版增强冲击力
副标题	1.25 - 1.35	中等间距
正文	1.5 - 1.7	最佳易读性
长篇内容	1.6 - 1.8	额外的呼吸空间

Letter Spacing (Tracking)

字符间距（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

使用场景	间距范围	依据
大标题（>36px）	-0.02em 至 -0.01em	收紧间距增强冲击力
中等标题	0	默认值
正文	0	字体设计时已优化间距
小字体（<14px）	0.01em 至 0.02em	扩大间距提升易读性
全大写文本	0.05em 至 0.1em	必须添加额外间距
按钮/标签	0.05em	提升可读性

Line Length (Measure)

行宽（Measure）

Optimal: 50-75 characters per line (66 often cited as ideal)
Minimum: 45 characters (below = choppy reading)
Maximum: 80 characters (above = eye strain)

最优范围：每行50-75个字符（通常认为66个字符为理想值）
最小值：45个字符（低于此值会导致阅读中断）
最大值：80个字符（高于此值会引发视觉疲劳）

Digital Typography Specifics

数字排版专属要点

Variable Fonts

可变字体（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

定义：单个字体文件通过连续插值包含所有字重、宽度与样式。

优势:

性能优化：单个文件替代多个静态文件（例如，Source Sans Pro完整家族仅需405KB，而静态文件需1170KB）
设计灵活性：可访问任意字重（如450，而非仅400或500）
响应式排版：可根据视窗调整字重/宽度
动画效果：实现样式间的平滑过渡

核心轴:

轴	代码	范围	效果
字重	`wght`	细体至粗体	笔画粗细
宽度	`wdth`	压缩至扩展	字符宽度
斜体	`ital`	正体至斜体	正体/斜体切换
倾斜	`slnt`	倾斜角度	偏斜角度
光学尺寸	`opsz`	特定尺寸调整	根据字号自动优化细节

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

问题：自定义字体需要下载，会延迟文本渲染。

FOIT vs FOUT:

FOIT（Flash of Invisible Text）：浏览器在字体加载完成前隐藏文本——用户体验差
FOUT（Flash of Unstyled Text）：先显示备用字体，加载完成后替换——推荐使用

推荐策略:

使用
```
font-display: swap
```
预加载关键字体
对性能要求极高的场景使用
```
font-display: optional
```
匹配备用字体的度量标准以减少布局偏移

Responsive Typography

响应式排版

Fluid Typography with
clamp()
:

css

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Minimum: 2rem (won't shrink below)
Preferred: 5vw (scales with viewport)
Maximum: 4rem (won't grow above)

使用
clamp()
实现流体排版:

css

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

最小值: 2rem（不会小于此值）
首选值: 5vw（随视窗缩放）
最大值: 4rem（不会大于此值）

System Font Stacks

系统字体栈

When to Use: Applications, dashboards, content-heavy tools where neutrality and performance matter.

Modern System Font Stack:

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Resource: Modern Font Stacks

适用场景：应用程序、仪表盘、内容导向型工具等需要中立性与性能的场景。

现代系统字体栈:

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

参考资源: Modern Font Stacks

WCAG Typography Requirements

WCAG排版要求

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

标准	对比度	适用场景
AA级（最低要求）	4.5:1	常规文本
AA级（最低要求）	3:1	大文本（24px以上或18.5px粗体）
AAA级（增强要求）	7:1	常规文本
AAA级（增强要求）	4.5:1	大文本

Text Resizing (WCAG 1.4.4)

文本缩放（WCAG 1.4.4）

Text must be resizable to 200% without loss of content or functionality
Use relative units (rem, em, %) not fixed pixels

文本必须支持缩放至200%，且不丢失内容或功能
使用相对单位（rem、em、%）而非固定像素

Text Spacing (WCAG 1.4.12)

文本间距（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.

核心特征:

简洁的字符形状（通常优先选择无衬线字体）
更宽的字符与单词间距
辨识度高的字符（b/d、p/q区分清晰）
正体（正文避免使用斜体）
足够的字号（正文16px以上）

推荐字体:

字体	优势
Lexend	专为可读性与阅读障碍设计
Open Sans	字符清晰、间距合理
Verdana	字符清晰、风格统一
Atkinson Hyperlegible	为低视力读者设计，惠及所有用户
Inter	字符清晰，适合数字场景

核心结论：无衬线、等宽与正体字体对阅读障碍者最易读。斜体显著降低可读性。

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

考量因素	印刷场景	数字场景
分辨率	300 dpi	72-100 ppi（因屏幕而异）
正文字号	10-12pt为常规值	15-25px为常规值
字体自由度	任意字体均可印刷	受可用性/授权限制
渲染效果	所有印刷品效果一致	因设备/浏览器而异
衬线字体可读性	长篇文本可读性极佳	取决于屏幕质量

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

授权类型	适用场景	典型限制
桌面授权	设计软件、印刷物料	用户/设备数量
网页授权	通过CSS在网站使用	页面浏览量、域名数量
应用授权	移动/桌面应用	应用下载量、平台数量
ePub授权	数字出版物	出版物数量
服务器/API授权	动态图片生成	展示次数

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

阅读最终用户许可协议（EULA）：每个字体厂商的条款不同
Logo使用：部分授权明确禁止用于Logo
客户项目：客户需拥有独立授权，不可转让你的授权
修改限制：多数授权禁止修改字体文件
嵌入规则：PDF嵌入、视频嵌入有特定规则

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

SIL Open Font License (OFL)：免费用于个人与商业用途，可修改
Google Fonts：所有字体均支持商业使用
The League of Moveable Type：优质开源字体库

Recommended Free Fonts (Google Fonts)

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

错误类型	问题	解决方案
跨平台字体使用不一致	损害品牌辨识度	制定并执行排版系统规范
使用过多字体	造成视觉混乱	最多使用2-3种字体
为风格牺牲可读性	受众无法消费内容	在实际使用字号下测试可读性
忽略授权问题	法律风险	审核所有字体，确保授权合规
字体与品牌个性不匹配	排版削弱品牌信息	从品牌个性出发选择字体
文本对比度低	不符合可访问性要求，难以阅读	使用对比度检查工具，满足WCAG AA级标准
过度样式化	阴影、渐变显得不专业	保持排版简洁且有目的性
忽略移动端适配	在主流设备上表现不佳	在所有设备尺寸上测试
使用潮流字体	快速过时，需重新品牌化	选择经典字体
未构建层级结构	用户无法导航内容	明确字号/字重的区分
未跨媒介测试	印刷与数字渲染效果不同	在两种场景中测试
Logo使用默认字体	缺乏独特性	仅使用定制或精心挑选的字体

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

请查看 reference/templates.md 获取：

排版系统文档模板（完整输出结构）
模块化比例计算器参考
可访问性测试清单
字体授权清单

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)

应用字体评估标准（7个维度）
使用字体搭配原则
调研字体选项（Google Fonts、高端字体厂商）

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

测试WCAG可访问性要求
验证阅读障碍友好性考量
跨印刷与数字场景测试
检查字体授权