ui-typography

UI 排版技能

致谢

这些规则提炼自 Matthew Butterick 的《Practical Typography》（https://practicaltypography.com）。 Butterick 是一位排版师、作家和字体设计师，其作品连接了专业排版与日常数字写作。感谢 Matthew，让这些知识变得通俗易懂且内容全面。如果你觉得这项技能有价值，不妨直接支持他的工作。

运作模式

这些都是永久规则——不是潮流，也不是观点。它们源自数百年的排版实践，并经人类阅读方式验证。它们不会过时。

强制执行（默认）： 生成任何带可见文本的 UI 时，自动应用所有规则。使用正确的 HTML 实体和规范的 CSS。无需征求许可，也无需解释。只需输出符合排版规范的内容。

审查： 审查现有代码或设计时，指出违规之处并提供修改前后的对照。

参考文件（生成 CSS 或查询实体时阅读）：

• references/css-templates.md — 完整的 CSS 基线模板、响应式模式和 OpenType 功能
• references/html-entities.md — 包含所有字符及编码的完整实体表

---

字符

引号与撇号——始终使用弯引号

直引号是打字机时代遗留下来的产物。双引号使用 “ ”，单引号使用 ‘ ’。

撇号始终朝下——与右单引号 ’ 相同。智能引号引擎会错误地在年代缩写（'70s）和词首缩略词（'n）前插入左引号。请使用明确的 ’ 修正。

设置 <html lang="en"> 后，<q> 标签会自动应用弯引号。

夏威夷语 okina 朝上——它是一个字母，不是撇号。请使用左单引号，或改用英语拼写。

JSX/React 实现警告

Unicode 转义序列（\u2019、\u201C 等）在 JSX 文本内容中不起作用。 它们会原样显示为字符——用户看到的是 \u2019，而不是弯撇号。这是因为转译器会将标签之间的 JSX 文本视为字符串字面量，而不是 JavaScript 表达式。

无效写法：

{/* WRONG — renders literally as \u2019 */}
<p>Don\u2019t do this</p>

有效写法（任选其一）：

1. 直接使用 UTF-8 字符（首选）： 将实际字符直接粘贴到源文件中。

   <p>Don\u2019t do this</p>  {/* This is the actual curly apostrophe character U+2019 */}
   

2. 使用包含字符串字面量的 JSX 表达式： 用花括号括起，让 JS 引擎解析转义序列。

   <p>Don{'\u2019'}t do this</p>
   

3. 使用 HTML 实体（仅限 HTML 文件）： 使用 ’——但在 JSX/React 中不起作用。

通过 CLI 批量修复时，请使用带原始 UTF-8 字节的 sed（而非转义序列）：

CURLY=$(printf '\xe2\x80\x99')  # U+2019 RIGHT SINGLE QUOTATION MARK
sed -i '' "s/don't/don${CURLY}t/g" file.tsx

在 JavaScript 数据数组和字符串字面量中，\u2019 可以正常工作，因为 JS 引擎会处理转义序列。这个问题只影响标签之间的 JSX 文本内容。

短横线与连字符——三种不同的字符

字符	HTML	用途
-（连字符）	-	复合词（cost-effective）、换行
–（短破折号）	–	范围（1–10）、关联关系（Sarbanes–Oxley Act）
—（长破折号）	—	句子停顿——例如这样

切勿用 -- 或 --- 代替。如果以 “from” 开头，应与 “to” 搭配，而非使用短破折号。复合姓氏（婚后姓氏）使用连字符；共同署名使用短破折号。长破折号通常不加空格；若显得太挤，可添加  。该用短破折号的地方不要用斜线。复合形容词应加连字符（five-dollar bills）。以 -ly 结尾的副词后不加连字符。

省略号——使用单个字符

使用 …（…），而非三个句点。前后应留空格；靠近文本的一侧使用  。表示对话中断时，优先使用长破折号而非省略号。

数学与度量

乘法使用 ×，减法使用 −。加号和等号使用键盘字符 + 和 =。简单的减号可以使用短破折号。尺寸：8.5″ × 14″ 中使用 ×。

英尺和英寸符号——唯一允许使用直引号的例外。必须使用直引号：英尺使用 '，英寸使用 "。数值之间使用  ：6' 10"。

商标和版权

使用真实符号：© ™ ®，绝不要使用 (c) (TM) (R)。™/® 使用上标，前面不加空格。 © 应与正文内联，后接   和年份。“Copyright ©”属于冗余写法——只用文字或符号，不要两者并用。

段落符和节符

§ (§) 和 ¶ (¶) 后面始终加  ：§ 1782。位于句首时拼写出名称。 复数形式使用双符号：§§。

重音字符

专有名称必须使用重音符号（François Truffaut、Plácido Domingo）。外来词请查词典—— 有些词已自然化（naive），有些则没有（cause célèbre）。

其他标点

• 分号连接独立分句。冒号引出补充说明。不要混用
• 问号使用不足——用问句简化主题句
• 感叹号使用过度——长文档中最多用一个。绝不要连续使用多个
• & 符号：仅在专有名称中正确使用。正文中写“and”
• 括号/方括号：不要沿用其中内容的格式
• 表情符号/emoji：电子邮件/Slack 中可以使用。正式文档或专业 UI 文案中绝不要使用

---

间距

标点后始终空一格

任何标点后都只空一格。绝不要空两格。这一点不容商榷。两个空格会形成空隙，破坏文本的平衡。句点本身已经留有视觉空白。

不间断空格

  可防止换行。用于数字引用前（§ 42、Fig. 3）、© 后（© 2025）、尊称后（Dr. Smith），以及英尺与英寸数值之间。

空白字符

需求	工具
单词之间的空格	一个单词空格（空格键）
防止换行	 
换行，但仍在同一段落	<br>
新段落	<p> 标签
新页面（打印）	page-break-before: always
标示可断词的位置	&shy;

绝不要按住空格键。绝不要用连续回车来制造间距。输出中绝不要用制表符缩进。 HTML 会将所有空白折叠为一个空格（  除外）。

---

文本格式

粗体和斜体

规则 1：粗体或斜体，二者择一，不可并用。 规则 2：尽可能少用。如果所有内容都强调，就等于没有强调。

衬线字体：轻微强调用斜体，强烈强调用粗体。无衬线字体：只用粗体——无衬线斜体不够醒目。 绝不要将整段文字设为粗体。绝不要用引号来强调。

下划线——绝不使用

文档或 UI 中绝不要使用下划线。这是打字机时代的变通做法。请用粗体或斜体。网页链接应采用低调样式：text-decoration-thickness: 1px; text-underline-offset: 2px。

全大写——始终不超过一行，并增加字距

大写字母较难阅读（形状均匀的矩形，不如小写字母轮廓多变）。适用于简短标题、标签、说明文字。始终增加 5–12% 的字距。始终确保启用字偶距调整。绝不要将整段文字设为大写。CSS 中使用 letter-spacing: 0.06em。

小型大写字母——只用真正的小型大写字母

绝不要伪造（将常规大写字母缩小）。使用具备真正小型大写字母的字体（OpenType smcp），并设置 font-variant-caps: small-caps。系统字体不具备此类字形。请增加字距并启用字偶距调整。

字号

印刷：10–12pt。网页：15–25px。12pt 默认值是打字机时代的遗留。半点字号差异也很重要。强调时使用最小增量。网页流式字号使用 clamp()。

字距

全大写和小型大写字母增加 5–12% 的字距。小写字母不调整。字母之间的间隔绝不要大到能容下其他字母。CSS：letter-spacing: 0.05em 至 0.12em。

字偶距调整——始终启用

没有例外。font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;

连字

仅当 fi/fl 在视觉上相撞时才必须使用。粗体和斜体也要检查。其他情况可选。 CSS：font-feature-settings: "liga" 1。

替代数字样式

数据表使用等宽数字（"tnum"）。正文使用旧式数字（"onum"）。大多数情况下，默认数字样式即可。 数字表格使用 font-variant-numeric: tabular-nums lining-nums。

字体选择

1. 专业作品中不要使用滑稽字体（新奇、手写、书法、马戏风格字体）
2. 正文不要使用等宽字体——等宽字体只用于代码（而 Courier 是最差的等宽字体）
3. 印刷正文：强烈建议使用衬线字体
4. 网页正文：在现代屏幕上，衬线字体和无衬线字体都可以
5. 在 InDesign 中使用度量间距，绝不要使用视觉间距（视觉间距会破坏字偶间距）

字体搭配

最多使用 2 种字体。每种字体都要有固定用途。衬线字体可以与衬线字体搭配，无衬线字体也可以与无衬线字体搭配。段落内很少混用字体。低对比度搭配通常比高对比度搭配更有效。

---

页面布局

优先设置正文

先设置正文，再处理其他内容。四项决定了整体效果：字体、字号、行距、行长。其他元素都应以此为基准进行调整。

行长——45–90 个字符

这是设计师最容易处理错的首要可读性因素，也是响应式网页布局最常见的缺陷。按字符数衡量，而不是按英寸数。字母测试：每行容纳 2–3 个小写字母表。CSS：在文本容器上设置 max-width: 65ch。

行距——字号的 120–145%

line-height: 1.2 到 1.45。单倍行距（约 117%）太紧，双倍行距（约 233%）太松。文字处理软件中的“单倍”和“双倍”行距都不在最佳范围内。

页面边距

对于比例字体，1 英寸的边距不够。印刷：12pt 字号下使用 1.5–2.0″。网页：为文本容器设置 max-width 和 padding。不要害怕留白——宽裕的边距看起来更专业。

文本对齐

网页使用左对齐（默认）。两端对齐需要搭配 hyphens: auto——浏览器引擎的处理还很粗糙。居中：谨慎使用，仅用于较短的标题（不到 1 行）。绝不要将整个文本块居中。

段落分隔——缩进或留白，二选一

首行缩进：字号的 1–4 倍。text-indent: 1.5em。第一段可不缩进。
段间距：字号的 50–100%。margin-bottom: 0.75em。绝不要用两个 <br> 标签来增加间距。

标题——最多 3 个层级

1. 标题不要全部使用大写字母（除非标题非常短且增加了字母间距）
2. 标题不要加下划线
3. 标题不要居中（少数例外情况除外）
4. 使用上下留白来强调——微妙而有效
5. 使用粗体，不用斜体——更醒目
6. 字号增量尽可能小（正文 11pt → 标题 13pt，而不是 18pt）
7. 标题使用 hyphens: none
8. 上方留白 > 下方留白（标题与后续文本相关）
9. 标题与下一段保持在一起（page-break-after: avoid）
10. 优先使用分层编号（1.1、2.1），而不是罗马数字（I.A.1.a.i）

块引用

略微缩小字号和行距。缩进 2–5em。不加引号（缩进已表明引用）。保持行长易读。谨慎使用——长篇块引用显得写作偷懒。

列表

使用语义标记（<ul>、<ol>），绝不要手动输入项目符号。优先使用空心项目符号。星号太小，不适合作为项目符号。不要过度缩进。

表格——移除边框，增加内边距

数据本身会形成隐含网格。边框会增加杂乱感。只保留表头行下方的细线。padding: 0.5em 1em。数字列使用等宽数字。数字右对齐。

分隔线和边框

先尝试在上方和下方留白。边框粗细：0.5–1pt。不使用图案边框。粗线属于图表垃圾。

排版流控制

孤行（页面顶部单独出现的末行）和寡行（页面底部单独出现的首行）。打印 CSS：orphans: 2; widows: 2。标题：page-break-after: avoid。对于会让断字引擎困惑的单词，使用软连字符 ­。

分栏和网格

印刷分栏：信纸大小的纸张使用 2–3 栏，绝不要 4 栏。网页分栏：效果不佳（底边位置不固定）。网格用于引导，而非保证效果——更简单的网格更能确保一致性。即便将难看的内容对齐到网格上，结果仍然难看。

响应式网页排版

规则不会随屏幕尺寸而改变。 行长、行距和层级都保持一致。

1. 同步缩放 font-size 和容器 width
2. 文本容器始终设置 max-width——绝不让文本延伸至屏幕边缘
3. 不要用 ch 单位进行精确测量（它只测量零的宽度）
4. 使用 clamp() 实现流畅缩放：font-size: clamp(16px, 2.5vw, 20px)
5. 移动端最小留白：文本容器设置 padding: 0 1rem
6. 常见问题：图片和导航栏经过精细缩放，正文却被忽略

---

屏幕注意事项

现代屏幕上的文字渲染效果几乎不逊于印刷品。“屏幕上使用无衬线字体”这一说法适用于 72dpi，如今已经过时。衬线字体在现代屏幕上同样表现出色。深色模式下：略微降低字重。在 macOS 和 Windows 上测试（两者的抗锯齿效果不同）。

---

页面布局准则

1. 先处理正文——正文的 4 项属性决定一切
2. 前景与背景——不要让界面元素喧宾夺主，盖过正文
3. 关注最小可见增量——半点大小也很重要
4. 拿不准时，两种都试试——制作样例，不要空谈
5. 保持一致——相同的事物看起来也应相同
6. 关联新旧元素——每个元素都会制约下一个元素
7. 保持简洁——3 种颜色和 5 种字体？再想想
8. 借鉴喜欢的设计——模仿优秀的实际排版设计