better-typography

排版

此技能用于设置和审查文本的呈现效果，涵盖字体比例与间距、字体加载、换行和标点。所有修正都写入项目的样式系统中，速查表则将每项声明对应到 Tailwind 工具类。

措辞由 better-writing 负责，语义化标题结构由 better-accessibility 负责，空间布局的 RTL 方向由 better-layout 负责。使用 better-colors 测量对比度；是否达标由 better-accessibility 判断。

以测量为准，而非偏好

此处有些数值是精确要求。无单位的行高、18px 以下使用 400 或更粗的字重、60–75 个字符的行宽、iOS 上 16px 的输入框，以及变化数值使用 tabular-nums，如果未做到，都属于需要指出的问题。

字距、字体搭配和比例尺度属于经验法则。仅当它们偏离项目自身的比例尺度时才报告。除非任务要求更改字体，否则绝不建议使用新的字体，无论收费还是免费。

减少字体、字号和字重

字体通常不应超过三种；营销页面可以比应用使用更多字体。字重和字号承载层级，因此每增加一种都会削弱其效果。字体搭配应形成对比。无衬线正文字体搭配衬线标题字体，看起来是刻意设计；两种几乎相同的无衬线字体，则像是失误。

18px 以下使用 400 或更粗的字重。100–300 的字重适用于 28px 及以上的字号，即便如此也要对照背景检查。choosing-fonts.md介绍了分类、Display 和 Text 字体样式、格式及回退字体栈。

加载设计实际使用的字形

如果浏览器合成字体系列中不存在的字重或样式，就会扭曲字形。应加载设计实际使用的每种字形。只有在验证回退字体栈后，才禁用合成，并且只禁用不需要的模式。合成相关的长属性说明了具体方法。

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

如果存在 CSS 属性，就使用该属性。使用 font-weight: 650，而不是 font-variation-settings: "wght" 650。使用 font-variant-numeric: tabular-nums，而不是 font-feature-settings: "tnum" 1。即使渲染时使用的是非可变字体回退方案，属性也能继续生效。

让 font-optical-sizing 保持默认值 auto。只有当设计刻意将光学字号与字体大小分开时，才将 "opsz" 硬编码。原始标签仅用于 "GRAD" 80 这类自定义轴，以及 "ss01" 1 这类没有对应属性的功能。轴、功能以及可变字体与静态字体文件见 variable-fonts-and-opentype.md。

使用具有语义名称的字体比例尺度

定义一组精简字号，并尽可能少地偏离它。每种字号都应搭配行高和字重，这样一个角色只需做出一次决策，而不是三次。

个人项目中，只要用法规则明确，text-sm 这类默认名称就够用。团队项目中，应按用途命名字号（如 text-body-sm），让规则能在其他人接手后继续沿用。参考资料中提供了一个按角色划分的起始比例尺度。

标题字号随层级递减

将标题层级映射到逐级递减的比例尺度字号，确保下级标题不会盖过上级标题。当比例尺度没有足够的级别时，较深层级可以共用字号，只要通过字重或字距保持区分即可。除非是刻意设计的眉题，否则标题字号绝不能小于正文字号。参见层级映射。

按角色设置行高

展示文字使用 1.1，标题使用 1.2–1.3，正文使用 1.5–1.6。使用无单位数值，让行高随字号缩放；固定的 24px 则不会。

紧凑行高仅适用于较短文本。任何会换行到三行或更多行的文本，行高至少需要 1.4，即使所在行的高度受限也不例外。参见卡片描述示例。

按字号设置字距

24px 及以上的标题使用 -0.01em 到 -0.02em 的字距。14px 或更小的全大写标签使用 0.05em。正文字距保持为 0。使用 em，让字距随字号缩放。

字偶距内置于字体中，默认启用。font-kerning: none 永远不是修复方法。

限制行宽

将长篇文本的每行限制在 60–75 个字符。单位不限，只要设定上限且行长落在此范围内即可。请参阅单位选择及其对应的像素值。

有意换行

• text-wrap: balance 可让标题和简短描述的行长更均匀。切勿用于段落；Chromium 对超过六行的文本会忽略此属性。
• text-wrap: pretty 可避免最后一行只剩一个词。适用于任何段落，包括长篇文本。
• 如果长词、链接或 ID 可能溢出容器，请使用 overflow-wrap: break-word。
• 对于换行会显得不协调的标签和徽章，请使用 white-space: nowrap。

界面文本保持 text-align: start。justify 仅用于特定的编辑式布局。

数值变化时使用等宽数字

对计时器、计数器、价格和数字表格列应用 font-variant-numeric: tabular-nums，让每个数字的宽度一致，避免内容移位。正文中的数字则保持比例宽度。

截断内容，并提供返回方式

单行文本使用 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap；Tailwind 的 truncate 会一并设置这些属性。多行文本使用 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3 和 overflow: hidden；Tailwind 的 line-clamp-3 会生成这些属性。

截断的值必须提供查看完整文本的方式，这由 better-layout 负责。

使用自然大小写和印刷体标点

以自然大小写存储文本，并通过 text-transform 设置大小写，这样重新设计时就不必重写文案。

渲染后的文本应使用印刷体字符，而不是键盘上的替代字符。弯引号、短破折号、省略号字符和不换行空格列于替换表中。代码中使用直引号。

使用字体自带的下划线设置

设置 text-underline-position: from-font 和 text-decoration-thickness: from-font，或手动调整 text-underline-offset 和粗细。点状的 text-decoration-style 可提示某个词包含额外信息，例如缩写或已定义术语。请参阅下划线方案。

真实下划线中只有颜色可以可靠地设置动画。其他下划线动画都需要单独的元素，其动效由 better-ui 负责。

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

如果输入框文本小于 16px，iOS Safari 会缩放整个页面。有两种方案都能保持 16px，但视觉效果不同，因此请先确认设计需要哪一种：

• 在移动端增大输入框字号（text-base sm:text-sm）。小屏幕上的外观会有所变化。
• 保持 font-size: 16px，并用 transform: scale() 呈现预期字号。所有视口下外观一致，但需要维护更多代码。

两种方案以及占位符和插入符样式，都列于 details-and-accessibility.md 中。

字号下限

长篇正文从 16px 开始，这是浏览器默认值。只有在有明确理由时才调整，例如字体显得偏小、行宽较窄或工具面向专业人士且信息密集。

界面文字可以更小。输入框和菜单从 14px 开始，说明文字从 13px 开始，并尽量不低于 12px。使用 rem 设置 font-size，以便继续采用读者浏览器的字号设置。

在根元素上平滑字体

仅在根元素上设置一次 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale，不要逐个组件设置。Tailwind 的 antialiased 会同时设置这两项。

语言和双向文本行为

设置 lang，以便浏览器和辅助技术采用正确的引号、断词和发音规则。在文档以及方向发生变化的地方设置 dir。将方向混合的值包在 <bdi> 中，切勿手动调整数字顺序。长段落和数字的显示方式见 wrapping-and-punctuation.md。

在紧凑容器中修整文本框

在按钮和徽章中，字体在字母上下预留的空间会让文本显得偏低。text-box: trim-both cap alphabetic 可作为渐进增强来修整文本框。请参阅边缘、关键字和支持情况。

用 CSS 而非图像装饰文本

用 CSS 实现首字下沉、渐变文本、描边和文本阴影，这样文本仍可选择和搜索。参考文档中列出了相关属性及其支持情况。

保持有用文本可选

默认情况下保持文本可选。::selection 可以将品牌元素融入阅读体验，但前提是选中状态下的配色组合仍清晰易读。参考文档中介绍了其他范围的样式设置，例如搜索匹配项。

user-select: none 适用于可拖动或由手势驱动的界面区域，避免意外选择造成干扰。切勿将其用于整个界面，也不要仅仅因为按钮标签可以被高亮就使用它。

完成前检查

模式	修复方法
font-weight 的值与已加载的 @font-face 文件中的任何字重都不匹配	加载对应字重，或使用该字体系列提供的字重
在正文或界面文本上设置 font-synthesis: none	移除它；检查回退字体栈后，仅设置不需要的长属性
font-variation-settings: "wght" 或 "opsz"	使用 font-weight；移除 "opsz"，以便应用 font-optical-sizing: auto
font-feature-settings: "tnum" 或 "zero"	使用 font-variant-numeric: tabular-nums 或 slashed-zero
line-height 使用 px 或 rem	改用无单位的值
描述、卡片正文或任何可能换行的内容使用 leading-none 或 leading-tight	改为 1.4 或更大
letter-spacing 使用 px	将相同的值改为 em
正文 font-size 使用 px	改用 rem
文本小于 18px 时使用字重 100–300，或使用 font-thin、font-light	改为 400 或更粗
段落使用 text-wrap: balance	改为 text-wrap: pretty
应用界面中使用 text-align: justify	改为 text-align: start
使用 -webkit-line-clamp，但没有 display: -webkit-box	添加 display: -webkit-box 和 -webkit-box-orient: vertical
计时器、计数器、价格或数字列未使用 tabular-nums	使用 font-variant-numeric: tabular-nums
渲染的字符串中使用 ...、-- 或带连字符的范围	改用 …、长破折号或短破折号
使用 text-decoration-skip-ink: none	移除它；改为设置 text-underline-offset 或 from-font
<input> 使用 text-sm 或 14px，且没有移动端覆盖样式	使用 移动端 16px 输入框 的修复方法之一
在组件内部使用 -webkit-font-smoothing 或 antialiased	将其移至根元素
名称、数字或 URL 等混合方向的值未使用 <bdi> 或 dir	用 <bdi> 包裹
在布局根元素或文本容器上使用 user-select: none 或 select-none	移除它；仅在拖动或手势区域保留

报告

严重性。 HIGH 表示文本无法阅读、内容被截断且无法恢复，或文本在 320px 宽度或 200% 缩放时被裁切。后两种情况会触发 better-interface 升级，因此无论影响范围多小，严重性都保持为 HIGH。MEDIUM 表示破坏类型系统或视觉标题层级。LOW 表示孤立的润饰问题。

验证。 没有浏览器时，检查每个标题层级声明的字号和字重，并确认它们在每个语义区块内逐级递减。检查声明的行高、单位和字数限制。根据实际字符串长度检查截断规则。有浏览器时，先比较计算后的值，再使用实际内容调整视口大小，以发现换行、末行仅有一个词和截断问题。将所有无法执行的检查报告为 Not verified。

格式。 按违反的原则归类发现，并按严重性排序；每个根本原因单独占一行，并列出其出现的所有位置：

严重性	位置	修改前	修改后	原因

位置采用 path/to/file:line 格式。原因应指出相关原则及对用户的影响。

若仍有任何 HIGH，结尾写上 Block；否则写上 Approve，其余待处理事项保留在表格中。对于未检查的范围，绝不要给出 Approve。若没有可报告的问题，请写明「No actionable typography findings」，并报告验证情况。