typography
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseTypography
排版设计
Professional typography for user interfaces, grounded in principles from the masters.
"Typography exists to honor content." — Robert Bringhurst
面向用户界面的专业排版设计，遵循业界大师的经典原则。
"排版设计的存在是为了尊重内容。" — 罗伯特·布林赫斯特
Reference Files
参考文档
For detailed guidance on specific topics, consult these references:
| Topic | When to Read |
|---|---|
| masters.md | Seeking authoritative backing, making nuanced judgments, understanding "why" |
| variable-fonts.md | Using variable fonts, fluid weight, performance optimization |
| font-loading.md | FOIT/FOUT issues, preloading, Core Web Vitals, self-hosting |
| opentype-features.md | Ligatures, tabular numbers, stylistic sets, slashed zero |
| fluid-typography.md | clamp(), text-wrap, truncation, vertical rhythm, font smoothing |
| tailwind-integration.md | Tailwind typography utilities, prose plugin, customization |
| internationalization.md | RTL languages, Arabic/Hebrew, CJK, bidirectional text |
如需获取特定主题的详细指导，请查阅以下参考文档：
| 主题 | 阅读场景 |
|---|---|
| masters.md | 寻求权威依据、做出细致判断、理解设计背后的"原因" |
| variable-fonts.md | 使用可变字体、实现动态字重、优化性能 |
| font-loading.md | 解决FOIT/FOUT问题、预加载优化、核心Web指标、自托管字体 |
| opentype-features.md | 连字、表格数字、样式集、带斜线零等特性使用 |
| fluid-typography.md | 使用clamp()、文本换行、截断、垂直韵律、字体平滑 |
| tailwind-integration.md | Tailwind排版工具类、prose插件、自定义配置 |
| internationalization.md | RTL语言、阿拉伯语/希伯来语、CJK、双向文本处理 |
Output Formats
输出格式
Type System Recommendations
字体系统建议
markdown
undefinedmarkdown
undefinedType System
字体系统
Scale
比例系统
- Base: [size, e.g., 16px]
- Ratio: [e.g., Minor Third 1.200]
- Rationale: [why this ratio]
- 基础字号：[示例：16px]
- 比例系数：[示例：小三度 1.200]
- 设计依据：[选择该比例的原因]
Hierarchy
层级结构
| Level | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| Display | ... | ... | ... | ... | Hero, marketing |
| H1 | ... | ... | ... | ... | Page titles |
| H2 | ... | ... | ... | ... | Section heads |
| Body | ... | ... | ... | ... | Paragraphs |
| Small | ... | ... | ... | ... | Captions, labels |
| 层级 | 字号 | 字重 | 行高 | 字符间距 | 适用场景 |
|---|---|---|---|---|---|
| 展示级 | ... | ... | ... | ... | 英雄区、营销文案 |
| 一级标题 | ... | ... | ... | ... | 页面标题 |
| 二级标题 | ... | ... | ... | ... | 区块标题 |
| 正文 | ... | ... | ... | ... | 段落文本 |
| 辅助文本 | ... | ... | ... | ... | 说明文字、标签 |
Fonts
字体选择
- Primary: [font] — [rationale]
- Secondary: [font, if applicable]
- Mono: [font, if applicable]
- 主字体：[字体名称] — [选择依据]
- 次要字体：[如需搭配]
- 等宽字体：[如需使用]
Implementation
实现代码
[Ready-to-use CSS/Tailwind]
undefined[可直接使用的CSS/Tailwind代码]
undefinedTypography Audits
排版审计报告
markdown
undefinedmarkdown
undefinedTypography Audit
排版审计报告
Issues
问题清单
| Element | Problem | Recommendation |
|---|---|---|
| ... | ... | ... |
| 元素 | 问题描述 | 优化建议 |
|---|---|---|
| ... | ... | ... |
Quick Wins
快速优化方案
- [Immediate improvement 1]
- [Immediate improvement 2]
---- [立即优化项1]
- [立即优化项2]
---Core Principles
核心原则
The Four Fundamentals (Bringhurst)
四大基础原则（布林赫斯特提出）
The most important typographic considerations for body text:
- Point size — 16px minimum for body; 14px absolute floor for secondary text
- Line spacing — 1.5-1.7 for body; 1.1-1.3 for headings
- Line length — 45-75 characters (66 ideal); use (~65ch)
max-w-prose - Font choice — Match typeface to content and context
正文文本最重要的排版考量因素：
- 字号 — 正文最小16px；次要文本绝对下限为14px
- 行高 — 正文行高1.5-1.7；标题行高1.1-1.3
- 行长 — 45-75个字符（理想值66）；使用（约65ch）
max-w-prose - 字体选择 — 匹配字体与内容及场景
Hierarchy Through Contrast
通过对比构建层级
Establish hierarchy using multiple dimensions:
| Dimension | Low Contrast | High Contrast |
|---|---|---|
| Size | 14px → 16px | 16px → 48px |
| Weight | 400 → 500 | 400 → 700 |
| Color | Gray-600 → Gray-900 | Gray-400 → Black |
| Case | Normal | UPPERCASE |
"Use one typeface per design. Avoid italics and bold—rely on gradations of scale instead." — Massimo Vignelli
从多个维度建立排版层级：
| 维度 | 低对比 | 高对比 |
|---|---|---|
| 字号 | 14px → 16px | 16px → 48px |
| 字重 | 400 → 500 | 400 → 700 |
| 颜色 | 灰600 → 灰900 | 灰400 → 黑色 |
| 大小写 | 常规 | 全大写 |
"设计中仅使用一种字体。避免使用斜体和粗体——转而依靠字号比例的层级变化。" — 马西莫·维涅里
Restraint
克制原则
- 1-2 font families maximum — One serif, one sans if pairing
- 3-4 heading levels in practice — Deeper nesting usually signals structure problems
- Stick to your type scale — Resist arbitrary sizes
- Let whitespace work — Don't fill every gap
"In the new computer age, the proliferation of typefaces represents a new level of visual pollution." — Massimo Vignelli
- 最多使用1-2种字体族——如需搭配，可选择一款衬线体和一款无衬线体
- 实际使用3-4级标题层级——更深的嵌套通常意味着结构存在问题
- 严格遵循字体比例系统——避免随意设置字号
- 善用留白——不要填满每一处空隙
"在新的计算机时代，字体的泛滥代表着一种新的视觉污染。" — 马西莫·维涅里
Type Scales
字体比例系统
Modular Scale Ratios
模块化比例系数
| Name | Ratio | Character |
|---|---|---|
| Minor Second | 1.067 | Subtle, conservative |
| Major Second | 1.125 | Gentle, professional |
| Minor Third | 1.200 | Balanced, versatile |
| Major Third | 1.250 | Bold, impactful |
| Perfect Fourth | 1.333 | Strong hierarchy |
| Golden Ratio | 1.618 | Dramatic, editorial |
| 名称 | 比例 | 特点 |
|---|---|---|
| 小二度 | 1.067 | 细微、保守 |
| 大二度 | 1.125 | 温和、专业 |
| 小三度 | 1.200 | 平衡、通用 |
| 大三度 | 1.250 | 醒目、有冲击力 |
| 纯四度 | 1.333 | 层级清晰 |
| 黄金比例 | 1.618 | 戏剧性、适合编辑类内容 |
Practical Scale (Minor Third @ 16px)
实用比例系统（小三度 @ 16px）
css
--text-xs: 12px; /* 0.75rem */
--text-sm: 14px; /* 0.875rem */
--text-base: 16px; /* 1rem */
--text-lg: 18px; /* 1.125rem — not in pure scale */
--text-xl: 20px; /* 1.25rem */
--text-2xl: 24px; /* 1.5rem */
--text-3xl: 30px; /* 1.875rem */
--text-4xl: 36px; /* 2.25rem */
--text-5xl: 48px; /* 3rem */css
--text-xs: 12px; /* 0.75rem */
--text-sm: 14px; /* 0.875rem */
--text-base: 16px; /* 1rem */
--text-lg: 18px; /* 1.125rem — 不属于纯比例系统 */
--text-xl: 20px; /* 1.25rem */
--text-2xl: 24px; /* 1.5rem */
--text-3xl: 30px; /* 1.875rem */
--text-4xl: 36px; /* 2.25rem */
--text-5xl: 48px; /* 3rem */When to Deviate
特殊场景调整
- Marketing/hero: Larger jumps allowed
- Dense data interfaces: Tighter scale
- Mobile: Slightly larger base (17-18px)
- 营销/英雄区: 允许更大的字号跨度
- 数据密集型界面: 使用更紧凑的比例系统
- 移动端: 基础字号略大（17-18px）
Spacing Guidelines
间距指南
Line Height by Context
按场景设置行高
| Context | Line Height | Rationale |
|---|---|---|
| Body text | 1.5-1.7 | Generous for readability |
| Headings | 1.1-1.3 | Tighter, especially large sizes |
| UI labels | 1.2-1.4 | Compact but legible |
| Buttons | 1.0-1.25 | Single line, tight |
"The eye does not read letters, but the space between them." — Adrian Frutiger
| 场景 | 行高范围 | 设计依据 |
|---|---|---|
| 正文 | 1.5-1.7 | 保证可读性 |
| 标题 | 1.1-1.3 | 紧凑、突出标题 |
| UI标签 | 1.2-1.4 | 紧凑但清晰 |
| 按钮文本 | 1.0-1.25 | 单行文本、紧凑布局 |
"眼睛阅读的不是字母，而是字母之间的空间。" — 阿德里安·弗里蒂格
Letter Spacing
字符间距（字距调整）
| Context | Tracking | CSS |
|---|---|---|
| Body text | Default or +0.01em | |
| All caps | +0.05em to +0.1em | |
| Large headings | -0.01em to -0.02em | |
| Small text (<14px) | +0.01em to +0.02em | |
All-caps rule: Always add tracking. Keep short (1-3 words).
| 场景 | 字距设置 | CSS属性 |
|---|---|---|
| 正文 | 默认或+0.01em | |
| 全大写文本 | +0.05em至+0.1em | |
| 大标题 | -0.01em至-0.02em | |
| 小文本(<14px) | +0.01em至+0.02em | |
全大写规则: 必须添加字距。文本长度控制在1-3个单词以内。
Paragraph Spacing
段落间距
- Between paragraphs: 1em to 1.5em (equal to or slightly more than line-height)
- After headings: Reduced top margin on first paragraph
- Between sections: 2-3× paragraph spacing
- 段落之间: 1em至1.5em（等于或略大于行高）
- 标题之后: 第一段的上边距缩小
- 区块之间: 2-3倍段落间距
Font Selection
字体选择
System Font Stacks
系统字体栈
css
/* Sans-serif (modern) */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;css
/* 无衬线字体（现代风格） */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
/* 衬线字体 */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
/* 等宽字体 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;Safe Web Font Recommendations
安全的Web字体推荐
| Category | Fonts | Use Case |
|---|---|---|
| Sans-serif | Inter, Source Sans 3, Work Sans, DM Sans | UI, body text |
| Serif | Source Serif 4, Lora, Merriweather, Literata | Editorial, long-form |
| Monospace | JetBrains Mono, Fira Code, Source Code Pro | Code, data |
| Display | Fraunces, Epilogue, Outfit | Headlines |
| 类别 | 推荐字体 | 适用场景 |
|---|---|---|
| 无衬线字体 | Inter、Source Sans 3、Work Sans、DM Sans | UI界面、正文文本 |
| 衬线字体 | Source Serif 4、Lora、Merriweather、Literata | 编辑类内容、长文本 |
| 等宽字体 | JetBrains Mono、Fira Code、Source Code Pro | 代码、数据展示 |
| 展示字体 | Fraunces、Epilogue、Outfit | 标题、大字号文本 |
Pairing Principles
字体搭配原则
- Pair by contrast — Serif + sans-serif
- Match x-height — For visual harmony when mixed
- Ensure weight availability — Both need needed weights/styles
"A father should not have a favorite among his daughters." — Hermann Zapf (on his typefaces)
- 通过对比搭配——衬线体+无衬线体
- 匹配x高度——混合使用时保证视觉和谐
- 确保字重可选——两款字体都需具备所需的字重和样式
"父亲不应偏爱自己的任何一个女儿。" — 赫尔曼·扎普夫（谈及他设计的字体）
Modern CSS Typography
现代CSS排版技术
Text Wrapping
文本换行优化
css
/* Balanced line lengths for headings (≤6 lines) */
h1, h2, h3, blockquote, figcaption {
text-wrap: balance;
}
/* Prevent orphans in body text */
p, li {
text-wrap: pretty;
}Caveat: Don't use inside bordered containers—creates visual imbalance.
balancecss
/* 为标题平衡行宽（≤6行文本） */
h1, h2, h3, blockquote, figcaption {
text-wrap: balance;
}
/* 避免正文出现孤行 */
p, li {
text-wrap: pretty;
}注意: 不要在带边框的容器内使用——会造成视觉不平衡。
balanceFluid Typography
流体排版
css
/* Font scales smoothly between breakpoints */
h1 {
font-size: clamp(2rem, 1rem + 4vw, 4rem);
line-height: clamp(1.1, 1.3 - 0.1vw, 1.3);
}
body {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}See fluid-typography.md for complete scale.
css
/* 字体在断点间平滑缩放 */
h1 {
font-size: clamp(2rem, 1rem + 4vw, 4rem);
line-height: clamp(1.1, 1.3 - 0.1vw, 1.3);
}
body {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}详见fluid-typography.md获取完整比例系统。
Text Truncation
文本截断
css
/* Single line */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multi-line (2 lines) */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}css
/* 单行截断 */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行截断（2行） */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}Dark Mode Typography
深色模式排版
Weight Adjustment
字重调整
Text appears heavier on dark backgrounds. Reduce weight slightly:
css
@media (prefers-color-scheme: dark) {
body {
font-weight: 350; /* Instead of 400 */
}
h1, h2, h3 {
font-weight: 600; /* Instead of 700 */
}
}深色背景下文本会显得更粗，需略微降低字重：
css
@media (prefers-color-scheme: dark) {
body {
font-weight: 350; /* 替代默认的400 */
}
h1, h2, h3 {
font-weight: 600; /* 替代默认的700 */
}
}Font Smoothing
字体平滑
Apply antialiasing on dark backgrounds to counter perceived boldness:
css
.dark-bg {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}在深色背景上应用抗锯齿效果，抵消视觉上的加粗感：
css
.dark-bg {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Color Contrast
颜色对比度
- Avoid pure white (#fff) on pure black (#000)—too harsh
- Use off-white (#f5f5f5) and near-black (#1a1a1a)
- Aim for 10:1 to 15:1 contrast in dark mode
- 避免纯白色（#fff）搭配纯黑色（#000）——过于刺眼
- 使用米白色（#f5f5f5）和近黑色（#1a1a1a）
- 深色模式下目标对比度为10:1至15:1
Typographic Details
排版细节
Quotation Marks
引号使用
Use curly quotes, not straight:
- Correct: "Hello" and 'world'
- Incorrect: "Hello" and 'world'
使用弯引号而非直引号：
- 正确：“Hello” 和 ‘world’
- 错误："Hello" 和 'world'
Dashes
破折号使用
| Type | Character | Use |
|---|---|---|
| Hyphen | - | Word breaks, compounds |
| En dash | – | Ranges (2020–2024), relationships |
| Em dash | — | Parenthetical statements |
| 类型 | 字符 | 用途 |
|---|---|---|
| 连字符 | - | 单词拆分、复合词 |
| 短破折号 | – | 表示范围（2020–2024）、关系 |
| 长破折号 | — | 插入语、补充说明 |
Numbers
数字格式
| Type | Use Case | CSS |
|---|---|---|
| Tabular | Tables, prices, alignment | |
| Proportional | Body text | |
| Old-style | Editorial content | |
| Slashed zero | Code, data | |
See opentype-features.md for complete reference.
| 类型 | 适用场景 | CSS属性 |
|---|---|---|
| 表格数字 | 表格、价格、对齐 | |
| 比例数字 | 正文文本 | |
| 旧式数字 | 编辑类内容 | |
| 带斜线零 | 代码、数据 | |
详见opentype-features.md获取完整参考。
Accessibility
无障碍设计
Minimums
最低标准
| Element | Minimum | Preferred |
|---|---|---|
| Body text | 16px | 16-18px |
| Secondary text | 14px | 14-16px |
| Legal/caption | 12px | 12px + increased tracking |
| Contrast ratio | 4.5:1 | 7:1 |
| 元素 | 最低要求 | 推荐标准 |
|---|---|---|
| 正文 | 16px | 16-18px |
| 次要文本 | 14px | 14-16px |
| 法律文本/说明文字 | 12px | 12px + 增加字距 |
| 对比度 | 4.5:1 | 7:1 |
User Preferences
尊重用户偏好
css
/* Use relative units so users can scale */
body {
font-size: 1rem; /* Not 16px */
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}css
/* 使用相对单位，方便用户缩放文本 */
body {
font-size: 1rem; /* 不要使用16px */
}
/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}Dyslexia Considerations
阅读障碍友好设计
- Avoid justified text
- Prefer sans-serif with distinct letterforms (a vs α, l vs 1 vs I)
- Generous line height and paragraph spacing
- Consider offering OpenDyslexic as option
- 避免两端对齐文本
- 选择字母形态区分度高的无衬线字体（如a与α、l与1与I）
- 增大行高和段落间距
- 考虑提供OpenDyslexic字体作为选项
Common Mistakes
常见错误
Avoid
需避免的问题
- All-caps body text or long headings
- Centered body paragraphs
- Line length over 80 characters
- Insufficient contrast for "aesthetic" reasons
- Mixing too many font families (>2)
- Decorative fonts for UI text
- Justified text on the web
- Tiny gray text on white backgrounds
- Letter-spacing on Arabic text
- 正文或长标题使用全大写
- 正文文本居中对齐
- 行长超过80个字符
- 为了“美观”牺牲对比度
- 使用超过2种字体族
- UI文本使用装饰性字体
- Web端使用两端对齐文本
- 白色背景上使用极小的灰色文本
- 阿拉伯语文本添加字距调整
Watch For
需要注意的问题
- Orphans and widows in prominent text
- Inconsistent heading hierarchy
- Missing font fallbacks
- Layout shift from web font loading
- Underlined text that isn't a link
- 重要文本中出现孤行和widow
- 标题层级不一致
- 缺少字体降级方案
- Web字体加载导致布局偏移
- 非链接文本添加下划线
Quick Implementation
快速实现方案
Minimal Professional Setup
极简专业配置
css
:root {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
body {
font-family: var(--font-sans);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
h1, h2, h3 {
line-height: 1.2;
text-wrap: balance;
letter-spacing: -0.02em;
}
p {
text-wrap: pretty;
max-width: 65ch;
}
code {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
}
@media (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}css
:root {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
body {
font-family: var(--font-sans);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
h1, h2, h3 {
line-height: 1.2;
text-wrap: balance;
letter-spacing: -0.02em;
}
p {
text-wrap: pretty;
max-width: 65ch;
}
code {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
}
@media (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}Tailwind Quick Start
Tailwind快速入门
html
<article class="
prose prose-gray lg:prose-lg
prose-headings:text-balance
prose-p:text-pretty
dark:prose-invert
max-w-prose mx-auto
">
<!-- Content -->
</article>See tailwind-integration.md for complete patterns.
html
<article class="
prose prose-gray lg:prose-lg
prose-headings:text-balance
prose-p:text-pretty
dark:prose-invert
max-w-prose mx-auto
">
<!-- 内容 -->
</article>详见tailwind-integration.md获取完整模式。",