web-typography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Typography

Web排版

A practical guide to choosing, pairing, and implementing typefaces for the web. Typography serves communication—the best typography is invisible, immersing readers in content rather than calling attention to itself.

这是一份关于为网页选择、搭配和实现字体的实用指南。排版服务于沟通——优秀的排版是“隐形”的，它让读者沉浸于内容本身，而非将注意力吸引到字体上。

Core Philosophy

核心理念

Typography is the voice of your content. The typeface you choose sets tone before a single word is read. A legal site shouldn't feel playful; a children's app shouldn't feel corporate.

The "clear goblet" principle: Typography should be like a crystal-clear wine glass—the focus is on the wine (content), not the glass (type). Readers should absorb meaning, not notice letterforms.

Readers don't read, they scan. Eyes jump 7-9 characters at a time (saccades), pausing briefly (fixations). Good typography supports this natural pattern.

排版是内容的“声音”。在读者阅读任何文字之前，你选择的字体就已经奠定了内容基调。法律类网站不应显得活泼；儿童类应用不应显得刻板。

“透明酒杯”原则：排版应像一只清澈的水晶酒杯——焦点应放在酒（内容）上，而非酒杯（字体）上。读者应专注于理解内容含义，而非留意字母形态。

读者并非逐字阅读，而是扫视。眼睛会以7-9个字符为一组跳跃（扫视运动），短暂停顿（注视点）。优秀的排版应顺应这种自然的阅读模式。

Scoring

评分标准

Goal: 10/10. When reviewing or creating typography implementations, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.

目标：10/10。在评审或创建排版方案时，根据以下原则按0-10分进行评分。10分表示完全符合所有指南；分数越低说明存在需要改进的不足。评分时需说明当前分数及具体的改进建议，以达到10分标准。

Two Contexts for Type

字体的两种应用场景

All typography falls into two categories:

Context	Purpose	Priorities
Type for a moment	Headlines, buttons, navigation, logos	Personality, impact, distinctiveness
Type to live with	Body text, articles, documentation	Readability, comfort, endurance

Workhorse typefaces excel at "type to live with"—they're versatile across sizes, weights, and contexts without drawing attention to themselves. Examples: Georgia, Source Sans, Freight Text, FF Meta.

所有排版可分为两类：

场景	用途	优先级
瞬时性字体	标题、按钮、导航、Logo	个性、冲击力、独特性
长效性字体	正文、文章、文档	可读性、舒适度、耐读性

主力字体擅长“长效性字体”场景——它们在不同字号、字重和场景下都具有通用性，不会分散读者注意力。例如：Georgia、Source Sans、Freight Text、FF Meta。

How We Read

我们的阅读机制

Understanding reading mechanics improves typography decisions:

Saccades: Eyes jump in 7-9 character bursts, not smooth scanning
Fixation points: Eyes pause briefly to absorb content
Word shapes: Experienced readers recognize word silhouettes, not individual letters
Bouma: The overall shape of a word—maintaining distinct boumas aids recognition

Legibility vs. Readability:

Legibility = Can individual characters be distinguished? (typeface concern)
Readability = Can text be comfortably read for extended periods? (typography concern—size, spacing, line length)

A typeface can be legible but poorly set, making it unreadable. Both matter.

理解阅读机制有助于优化排版决策：

扫视运动（Saccades）：眼睛以7-9个字符为一组跳跃，而非平滑扫描
注视点：眼睛短暂停顿以吸收内容
单词形状：熟练的读者识别的是单词轮廓，而非单个字母
Bouma形态：单词的整体形状——保持独特的Bouma形态有助于提升识别度

易辨性（Legibility）与可读性（Readability）的区别：

易辨性 = 单个字符能否被清晰区分？（字体本身的问题）
可读性 = 文本能否长时间舒适阅读？（排版问题——字号、间距、行宽）

一款字体可能易辨性良好，但排版设置糟糕，导致可读性差。两者都至关重要。

Evaluating Typefaces

字体评估

Quick assessment checklist:

快速评估清单：

Technical Quality

技术质量

Structural Assessment

结构评估

Adequate x-height (larger = better screen readability)
Open counters and apertures (a, e, c shapes)
Distinct letterforms (Il1, O0, rn vs. m)
Appropriate contrast (thick/thin stroke variation)

足够的x高度（x高度越大，屏幕可读性越好）
开放的字怀与字口（a、e、c等字母的形状）
独特的字母形态（区分Il1、O0、rn与m）
合适的对比度（笔画粗细变化）

Practical Needs

实用性需求

Works at intended sizes (test at actual use size)
Renders well on target screens/browsers
Acceptable file size for web loading
Appropriate license for project

See references/evaluating-typefaces.md for detailed criteria.

在目标字号下表现良好（需在实际使用字号下测试）
在目标屏幕/浏览器上渲染效果佳
字体文件大小适合网页加载
符合项目的授权要求

详细评估标准请参考references/evaluating-typefaces.md。

Choosing Typefaces

字体选择

Start with purpose, not aesthetics. Ask:

What is the content's tone? (formal, casual, technical, friendly)
Where will it be read? (phone, desktop, print)
How long will people read? (glance vs. extended)
What personality should it project?

从需求出发，而非审美。先问自己：

内容的基调是什么？（正式、随意、技术向、友好）
内容将在何处被阅读？（手机、桌面、印刷品）
读者会阅读多长时间？（快速浏览 vs 长时间阅读）
字体应传递何种个性？

Selection Process

选择流程

Define the job: Body text? Headlines? UI elements? Each may need different faces
Match tone to content: A financial report needs different type than a bakery menu
Test at actual sizes: A face beautiful at 72px may be illegible at 14px
Check the family: Ensure needed weights, italics, and styles exist
Test with real content: Lorem ipsum hides problems

明确用途：是正文？标题？UI元素？不同用途可能需要不同字体
匹配内容基调：财务报告的字体与面包店菜单的字体应截然不同
在实际字号下测试：在72px下美观的字体在14px下可能难以辨认
检查字体家族：确保所需的字重、斜体和样式都存在
使用真实内容测试：Lorem ipsum会掩盖问题

Safe Starting Points

安全起步字体

For body text, these reliably work:

Serif	Sans-Serif
Georgia	-apple-system, BlinkMacSystemFont
Source Serif Pro	Source Sans Pro
Freight Text	Inter
Charter	IBM Plex Sans
Literata	Atkinson Hyperlegible

以下字体在正文场景中表现可靠：

衬线字体（Serif）	无衬线字体（Sans-Serif）
Georgia	-apple-system, BlinkMacSystemFont
Source Serif Pro	Source Sans Pro
Freight Text	Inter
Charter	IBM Plex Sans
Literata	Atkinson Hyperlegible

Pairing Typefaces

字体搭配

One to two typefaces maximum. More requires exceptional skill. When in doubt, use one family with weight variation.

最多使用1-2种字体。使用更多字体需要极高的技巧。拿不准时，可使用同一字体家族的不同字重变体。

Contrast Principle

对比原则

Successful pairings create clear contrast—faces should be obviously different, not confusingly similar.

Contrast Type	Example
Structure	Serif headline + sans-serif body
Weight	Light headline + regular body
Era	Humanist + geometric
Width	Condensed headline + normal body

成功的字体搭配需要清晰的对比——字体之间应明显不同，而非相似到令人混淆。

对比类型	示例
结构对比	衬线标题 + 无衬线正文
字重对比	轻量标题 + 常规正文
时代对比	人文主义字体 + 几何字体
宽度对比	窄体标题 + 常规宽度正文

Pairing Strategies

搭配策略

Serif + Sans-serif: The classic approach. Uses structural contrast.
Same designer: Faces designed by one person often share DNA that harmonizes (e.g., FF Meta + FF Meta Serif)
Superfamilies: Designed to work together (e.g., Roboto + Roboto Slab)
Same era: Typefaces from the same period share proportional assumptions

See references/pairing-strategies.md for specific combinations.

衬线+无衬线：经典搭配方式，利用结构对比
同一设计师作品：同一设计师设计的字体通常具有和谐的共性（如FF Meta + FF Meta Serif）
超级家族：专为搭配使用而设计的字体家族（如Roboto + Roboto Slab）
同一时代字体：同一时期的字体具有相似的比例设定

具体搭配组合请参考references/pairing-strategies.md。

Pairing Mistakes

搭配误区

Too similar: Two serifs or two sans faces that look almost alike
Competing personality: Both faces trying to be distinctive
Era clash: Mixing renaissance and postmodern without intention
Weight imbalance: One face overwhelms the other

过于相似：两种衬线或无衬线字体外观几乎一致
个性冲突：两种字体都试图突出自身独特性
时代冲突：无意识地混合文艺复兴风格与后现代风格
字重失衡：一种字体的视觉权重远超过另一种

Typographic Measurements

排版度量标准

Property	Optimal Range	Notes
Body font size	16-18px	16px minimum; err larger for reading-heavy sites
Line length (measure)	45-75 characters	66 characters ideal; use `ch` unit or `max-width`
Line height	1.4-1.8	Longer lines need more; shorter need less
Paragraph spacing	1em-1.5em	More space = more separation between ideas
Heading scale	1.2-1.5 ratio	Establish clear hierarchy without extremes

属性	最优范围	说明
正文字号	16-18px	最小16px；阅读密集型网站建议使用更大字号
行宽（measure）	45-75个字符	理想值为66个字符；使用 `ch` 单位或 `max-width` 实现
行高	1.4-1.8	行宽越大，行高应越大；行宽越小，行高可越小
段落间距	1em-1.5em	间距越大，不同观点之间的区分度越高
标题比例	1.2-1.5倍	建立清晰的层级，避免极端比例

Line Length Rules

行宽规则

css

/* Optimal: 45-75 characters */
.prose { max-width: 65ch; }

/* If wider, increase line-height to compensate */
.wide-text {
  max-width: 80ch;
  line-height: 1.8;
}

css

/* 最优范围：45-75个字符 */
.prose { max-width: 65ch; }

/* 若行宽更大，需增加行高以补偿 */
.wide-text {
  max-width: 80ch;
  line-height: 1.8;
}

Line Height Adjustments

行高调整

Context	Line Height
Headlines	1.1-1.25
Short UI text	1.3-1.4
Body paragraphs	1.5-1.7
Wide columns	1.7-1.8

场景	行高
标题	1.1-1.25
短UI文本	1.3-1.4
正文段落	1.5-1.7
宽列文本	1.7-1.8

Building Type Hierarchies

构建排版层级

Create distinction through variation in three properties:

Level	Size	Weight	Color
H1	2.5-3rem	700	#111
H2	1.75-2rem	600	#111
H3	1.25-1.5rem	600	#333
Body	1rem (16-18px)	400	#333
Secondary	0.875rem	400	#666
Caption	0.75rem	400	#888

Don't combine all levers at once. H1 doesn't need to be largest AND boldest AND darkest. Use enough to create clear hierarchy, no more.

通过三种属性的变化来区分层级：

层级	字号	字重	颜色
H1	2.5-3rem	700	#111
H2	1.75-2rem	600	#111
H3	1.25-1.5rem	600	#333
正文	1rem（16-18px）	400	#333
次要文本	0.875rem	400	#666
说明文本	0.75rem	400	#888

不要同时使用所有调整维度。H1无需同时是最大号、最粗、最深色。只需使用足够的调整来建立清晰层级即可，无需过度。

Hierarchy Checklist

层级检查清单

Can you tell what's most important at a glance?
Does squinting still reveal the hierarchy?
Are there clear "levels" or does everything blend?
Is there enough contrast between adjacent levels?

一眼就能看出内容的主次关系？
眯起眼睛仍能识别层级结构？
是否有清晰的“层级”，还是所有内容混为一谈？
相邻层级之间是否有足够的对比？

Responsive Typography

响应式排版

Type must adapt to screens and reading contexts.

字体必须适配不同屏幕和阅读场景。

Fluid Typography with clamp()

使用clamp()实现流体排版

css

/* Scales between 16px (320px viewport) and 20px (1200px viewport) */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* Fluid headings */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

css

/* 在320px视口下为16px，1200px视口下为20px，中间自动缩放 */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* 流体标题 */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

Breakpoint Considerations

断点考量

Viewport	Adjustments
Mobile (<640px)	Increase body size to 17-18px; reduce line-length limits; tighter heading scale
Tablet (640-1024px)	Standard sizing; enforce line-length limits
Desktop (>1024px)	Can use larger display type; maintain line-length

See references/responsive-typography.md for implementation patterns.

视口尺寸	调整方案
移动端（<640px）	将正文字号增加至17-18px；缩小行宽限制；使用更紧凑的标题比例
平板端（640-1024px）	标准字号；严格控制行宽
桌面端（>1024px）	可使用更大的展示型字体；保持行宽

响应式排版的实现模式请参考references/responsive-typography.md。

Practical Checklist

实用检查清单

Quick Fixes

快速修复方案

Problem	Fix
Text feels cramped	Increase line-height to 1.6+; add paragraph spacing
Lines too long, hard to track	Add `max-width: 65ch` to text containers
Headings look disconnected	Reduce space above heading; keep space below
Text looks blurry	Check font-smoothing; try different weight; increase size
Fonts loading slowly	Subset fonts; use `font-display: swap` ; preload critical fonts
Body text too small	Increase to 18px; mobile users hold phones farther than you think
Hierarchy is unclear	Increase size/weight differences between levels
Typefaces clash	Simplify to one face; or ensure clear contrast
Text hard to read	Check contrast ratio; increase font weight on light backgrounds

问题	修复方法
文本显得拥挤	将行高增加至1.6+；增加段落间距
行宽过大，难以追踪	为文本容器添加 `max-width: 65ch`
标题与内容脱节	减少标题上方间距；保留标题下方间距
文本模糊	检查字体平滑设置；尝试不同字重；增大字号
字体加载缓慢	对字体进行子集化；使用 `font-display: swap` ；预加载关键字体
正文字号过小	增大至18px；移动端用户持机距离比你想象的远
层级不清晰	增大不同层级之间的字号/字重差异
字体搭配冲突	简化为单种字体；或确保字体之间有清晰的对比
文本难以阅读	检查对比度；浅色背景下增加字重

CSS Quick Reference

CSS速查参考

css

/* Core typography setup */
body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.6;
  color: #333;
}

/* Constrain line length */
.prose {
  max-width: 65ch;
}

/* Heading rhythm */
h1, h2, h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

/* Fluid type */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Font loading */
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

See references/css-implementation.md for complete patterns.

css

/* 核心排版设置 */
body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.6;
  color: #333;
}

/* 限制行宽 */
.prose {
  max-width: 65ch;
}

/* 标题间距节奏 */
h1, h2, h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

/* 流体字体 */
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* 字体加载 */
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

完整实现模式请参考references/css-implementation.md。

Reference Files

参考文档

typeface-anatomy.md: Terminology, letterform parts, classification systems
evaluating-typefaces.md: Quality assessment, structural analysis, technical requirements
pairing-strategies.md: Combining typefaces, contrast methods, proven combinations
responsive-typography.md: Fluid type, viewport units, breakpoint strategies
css-implementation.md: @font-face, loading strategies, variable fonts, performance

typeface-anatomy.md：术语、字母形态部件、分类体系
evaluating-typefaces.md：质量评估、结构分析、技术要求
pairing-strategies.md：字体搭配、对比方法、经过验证的组合
responsive-typography.md：流体字体、视口单位、断点策略
css-implementation.md：@font-face、加载策略、可变字体、性能优化

Book Reference

书籍参考

On Web Typography by Jason Santa Maria Publisher: A Book Apart (2014) ISBN: 978-1937557065 Amazon

On Web Typography by Jason Santa Maria 出版社：A Book Apart（2014年） ISBN：978-1937557065 亚马逊