better-typography

出色的排版

出色的排版大多在于克制。合理的字号比例、舒适的间距和足够的对比度，胜过任何巧妙的效果。标签、表格单元格、营销标题和文章段落不应共用一套规则。构建或审查任何包含文本的内容时，都应遵循这些原则。

审查时，请阅读页面，而不是浏览代码：眯起眼睛检查层级是否清晰，完整读一段文字，感受阅读是否舒适，并调整视口大小，检查实际长度的内容是否出现不当换行、孤行和截断。

文字内容本身（按钮标签、错误消息、空状态）由 better-writing 技能负责；语义标题结构由 better-accessibility 负责；空间布局中的 RTL 和逻辑 CSS 属性由 better-layout 负责；渲染后文本组合的对比度测量和颜色修正由 better-colors 负责。本技能负责文本的渲染、换行，以及在混合方向内容中的表现。

所有修复都应遵循项目自身的惯用方式：沿用已有的样式系统，切勿另起炉灶。速查表列出了每条声明对应的 Tailwind 写法。

快速参考

类别	适用场景	参考
选择字体	字体类别、字体搭配、格式、字体结构	choosing-fonts.md
可变字体与 OpenType	轴、字重、等宽数字、样式集	variable-fonts-and-opentype.md
间距与尺寸	字号比例、标题层级、行高、字间距、文本修剪	spacing-and-sizing.md
换行与标点	文本长度、换行、截断、智能标点、RTL	wrapping-and-punctuation.md
细节与无障碍	下划线、选中状态、表单、装饰性文本、对比度	details-and-accessibility.md
CSS 速查表	快速查找涵盖的所有属性及其 Tailwind 对应写法	css-cheat-sheet.md
审查输出格式	严重程度等级、问题表、验证、结论	review-output.md

核心原则

1. 选择合适的格式

在 Web 上使用 .woff2（采用 Brotli 压缩，兼容性广）。.woff 仅用于非常老旧的浏览器，作为后备格式；.ttf 和 .otf 是未经 Web 压缩的桌面原始格式。文件如何加载由项目自行决定，本技能不对此作规定。

2. 优先使用属性，而非原始标签

如果存在对应的 CSS 属性，就使用它。用 font-weight: 650 代替 font-variation-settings: "wght" 650，用 font-optical-sizing: auto 代替 "opsz"，用 font-variant-numeric: tabular-nums 代替 font-feature-settings: "tnum" 1。使用属性时，即使渲染时采用了非可变字体作为后备，样式也能继续生效。只有对于没有对应属性的自定义轴（"GRAD" 80）和少见特性（"ss01" 1），才使用原始标签属性。

3. 加载设计所需的字重和样式

当前字体系列不支持所请求的字重或样式时，浏览器可能会合成相应效果。最好加载设计实际用到的字形。在确认完整的后备字体栈中，所有必需的粗体、斜体、小型大写字母、上标和下标字形都仍有明显区别后，再设置 font-synthesis: none；禁用合成不是诊断手段，也不能抹去强调效果。

4. 减少字体、字号和字重

字体通常不应超过三种。字重和字号可以体现层级，但过度使用会迅速损害可读性。搭配时应追求对比，而非相似：衬线标题搭配无衬线正文，会显得经过精心设计；两种几乎相同的无衬线字体，则像是个错误。在 18px 以下，字重应保持在 400 或以上；低于 300 的字重只适用于展示性大字号（28px 及以上），用于正文大小时会难以辨认。

5. 使用语义化名称定义字号体系

定义一小组字号，并尽可能少地偏离它们。没有体系的硬编码字号难以扩展。对于个人项目，只要使用规则明确，text-sm 这样的默认名称就可以。在团队中，按用途命名字号（text-body-sm），而不是按大小命名，这样规则才能保持一致。

6. 标题字号随层级递减

在连贯的页面层级中，将标题级别映射到字号体系中逐级递减的字号：视觉上次要的标题不应意外压过其上级标题。较小字号范围内，相邻层级可以共用字号，只要通过字重或间距将它们区分开即可。根据 better-accessibility 选择语义化标题元素；此技能只控制它们的视觉样式。

7. 按用途设置行高

标题使用更紧凑的行高，约为 1.1。正文使用 1.5 到 1.6。优先使用无单位值，让行高随字号缩放；24px 这样的固定值则不会。紧凑行高适用于短文本：任何换行后达到三行或更多的文本，行高都至少需要 1.4，即使在高度受限的行中也是如此。

8. 根据字号设置字间距

较大的标题通常适合略微减小字间距。小号大写标签需要略微增加字间距，避免字母显得拥挤。阅读字号的正文则两者都不需要。

9. 限制行宽

长行会让视线难以找到下一行。长篇文本每行限制在约 60–75 个字符。单位不限；重要的是设置上限，并确保最终行长处于这个范围内。单位选项及其像素等值。

10. 有意控制换行

text-wrap: balance 会让文字在各行间均匀分布：用于标题。text-wrap: pretty 可避免最后一行只剩一个短词：用于描述。长篇文本不要使用这两者。如果长单词、链接或 ID 可能溢出容器，则使用 overflow-wrap: break-word。对于标签和徽章，如果换行会显得不妥，则使用 white-space: nowrap。

11. 对动态变化的数值使用等宽数字

默认情况下，数字的宽度各不相同，因此计时器、计数器和价格会在更新时导致布局偏移。对任何会变化的数值应用 font-variant-numeric: tabular-nums。

12. 截断内容时不丢失信息

单行：使用 text-overflow: ellipsis，并搭配 overflow: hidden 和 white-space: nowrap。多行：使用 line-clamp。截断会隐藏内容，因此如果缺失的文本很重要，应通过工具提示或展开视图让用户访问完整内容。

13. 自然撰写文案，用 CSS 控制样式

以自然大小写存储文本，并使用 text-transform 控制呈现方式，这样重新设计时就无需重写文案。使用智能标点：散文中使用弯引号（代码中使用直引号），范围如 2010–2020 使用短破折号，用长破折号引出补充说明，使用单个省略号字符，并用   将 16 px 这样的数值组合在一起，用 ­ 控制长单词可换行的位置。

14. 根据字体设置下划线

默认下划线的位置由浏览器决定。使用 text-underline-position: from-font 和 text-decoration-thickness: from-font，从字体自身的度量数据获取位置和粗细；也可以手动调整 text-decoration-thickness、text-underline-offset 和 text-decoration-skip-ink。text-decoration-style 可绘制点线、虚线或波浪线；点状下划线常用于提示某个词带有额外信息，例如缩写或定义术语。除非动画效果只涉及颜色变化，否则应将下划线构建为独立元素，而不是使用 text-decoration：真正的下划线中，只有颜色能够可靠地实现动画。

15. 移动端输入框使用 16px 字号

当输入框文字小于 16px 时，iOS Safari 会缩放整个页面。有两种不同方式可以将字号保持在 16px，因此应先确认设计想采用哪种方式，而不是擅自选择：在移动端增大输入框字号（text-base sm:text-sm），这会改变它在小屏幕上的外观；或者保留 font-size: 16px，并使用 transform: scale() 渲染预期字号，同时调整宽度和 line-height，确保设计在所有视口下保持一致。两种方案。

16. 字号和对比度下限

长篇正文的字号可从接近浏览器默认值的 16px 开始，再结合实际字体、版面宽度、平台和产品信息密度进行判断。UI 文字可以更小：输入框和菜单可从 14px 开始（移动端输入框仍需使用 16px，见原则 15），说明文字可使用 13px，通常不要低于 12px。如果文字看起来对比度偏低，使用 better-colors 测量渲染后的颜色组合，并使用 better-accessibility 判断适用的要求；除非对方要求，否则不要更改颜色。

17. 在根元素上设置字体平滑

在 macOS 上，文字渲染效果会比预期更粗。只需在根布局上设置一次 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale（Tailwind 的 antialiased 已包含这两项），不要在单个组件上设置。

18. 语言和双向文本行为

设置 lang，让浏览器和辅助技术选择正确的发音、引号和断字方式。在方向发生变化的文档或内容边界处设置 dir，保留数字顺序，并在需要时对独立的混合方向值使用 <bdi>。空间布局的镜像处理和 CSS 逻辑属性属于 better-layout。

19. 保持有用文本可选中

当选中文字组合仍清晰易读时，::selection 可以将品牌风格融入阅读体验。默认情况下应允许选择文本。只有在特定的可拖动或由手势驱动的界面区域中，且意外选择确实会干扰交互时，才使用 user-select: none；不要在整个界面禁用选择，也不要仅仅因为按钮标签可以被高亮就禁用选择。

常见错误

错误	修正方法
在 Web 上提供 .ttf/.otf 文件	转换为 .woff2
使用 font-variation-settings: "wght" 设置字重	使用 font-weight（也适用于非可变字体回退）
使用 font-feature-settings: "tnum" 1	使用 font-variant-numeric: tabular-nums
合成字体样式与预期设计不符	加载所需字体样式；仅禁用经过验证的合成模式，且不要抹去强调效果
字体大小随意硬编码	使用字号比例尺
子标题在视觉上比父标题更突出	将该部分的层级映射到逐级递减的比例尺档位
因默认字号而选择标题元素	使用 better-accessibility 选择语义，再在 CSS 中设置视觉字号
在可缩放文本上使用 line-height: 24px	使用无单位值（1.5）
段落宽度铺满整行	将每行限制在约 60–75 个字符
段落末行出现孤行	使用 text-wrap: pretty
两行标题左右不均衡	使用 text-wrap: balance
数字导致布局偏移	使用 tabular-nums
文本被截断且无法查看完整内容	使用工具提示或展开视图显示完整值
在文案中直接输入 UPPERCASE	使用自然大小写 + text-transform
在界面中使用两端对齐文本	使用 text-align: start；仅在特定编辑式布局中使用两端对齐
下划线穿过字母下伸部	使用 text-decoration-skip-ink: auto 和 from-font 度量值
iOS 上低于 16px 的输入框会缩放	先考虑使用 text-base sm:text-sm；或者使用 transform 将 16px 缩小，以保持设计字号
根布局未设置字体平滑	在根元素上应用一次 antialiased
混合方向的值渲染顺序错误	设置正确的 lang/dir；必要时使用 <bdi> 隔离该值
整个应用界面禁用了文本选择	恢复文本选择；仅在与拖动或手势冲突的特定交互中禁用
额外信息提示没有视觉提示	使用 text-decoration-style: dotted 添加点状下划线
14px UI 文本使用 Thin/Light 字重	18px 以下使用 400+ 字重；Thin 字重仅用于展示文本
三行卡片描述使用 leading-none	对所有换行后达到 3 行或更多的文本，行高至少为 1.4

报告

独立的排版审查只有在按照 review-output.md 中的格式报告所有已确认的问题，并附上验证过程和结论后，才算完成。在 better-interface 下，应遵循其规定的格式。