用模块化比例（base ×…

在定义字号体系、设计令牌、审查字号选择，或排版看起来不一致/随意时，用单一基准字号加单一比例生成全部字号，并配合可读性、响应式与文本适配规则。

适用场景

解决思路

1. 从单一 base 字号和单一 ratio 比例生成全部字号：size(n) = base × ratio^n，让每个字号都是 base 的有意一步，而不是凭眼或习惯挑出来的。
2. 按用途选比例：1.067 Minor Second（密集数据 UI、仪表盘）、1.125 Major Second（长文阅读、编辑类）、1.200 Minor Third（多数 UI 应用）、1.250 Major Third（营销、落地页）、1.333 Perfect Fourth（展示、hero 区）、1.414 Augmented Fourth（作品集、品牌）、1.500 Perfect Fifth（尽量少用）；默认推荐 1.25。
3. 以 base = 16px、ratio = 1.25 生成 -2 到 +6 档：-2 = 10px（caption/label-xs）、-1 = 13px（label/small）、0 = 16px（body 基准）、+1 = 20px（body-lg/lead）、+2 = 25px（H4）、+3 = 31px（H3）、+4 = 39px（H2）、+5 = 49px（H1）、+6 = 61px（Display），四舍五入到整 px 或 rem 即可，比例只负责意图。
4. 如果品牌线上已有排版，先用 get_typography（dembrandt engine，可选工具）从实时 DOM 取到真实字号、字重、行高，反推其底层比例，再按上述方法规范化，而不是靠猜设计者原本想用哪些字号。
5. 把字号定义成 CSS 自定义属性设计令牌，按角色或档位命名（--text-xs/-sm/-base/-lg/-xl/-2xl/-3xl/-4xl/-5xl），而不是按像素值命名。
6. 在 tailwind.config.js 的 fontSize 里同时给出字号与 lineHeight，例如 xs: ['0.625rem', { lineHeight: '1rem' }] 一直到 5xl: ['3.813rem', { lineHeight: '1' }]。
7. 正文 base 至少 16px；14px 只用于次要 UI 文本（标签、说明、元数据）且少用；任何地方都不要低于 14px，低于 14px 即使高 DPI 也过不了 WCAG 正常文本对比要求。
8. 用 1% 启发式做角色测试：允许低于 16px 的只有固定白名单（时间戳、caption、表格元数据、帮助文本、细则、徽标标签）；正文、主标签、列表项标题、任何为完成任务而读的内容绝不缩小。扫一屏统计低于 16px 的角色种类，2–3 个健康，5 个以上或含阅读内容说明缩过头了——这是布局密度问题，应减少展示内容而不是缩小字号。
9. 字距控制：正文和默认文本保持 tracking 0（给连续文本加字距会拖慢阅读、显得松散）；只有大写和小号标签才考虑字距，上限 0.04em，且只在标签确实需要透气时使用，不要给所有文字一个统一字距值。
10. 深色背景上的浅色文字因光晕效应看起来更细，把字重提高一档补偿：浅色下用 400 的地方，深色下用 medium 或 semibold，保持两种模式下的感知字重一致。
11. 等宽字体只用于需要字符对齐的技术内容（代码、ID、数值表格、diff）；不要把它作为默认 UI 字体，也不要等宽加大写组合使用。
12. 会原地变化的数字（计数器、倒计时、刷新价格、数值列）加 font-variant-numeric: tabular-nums，使数字不左右抖动、列能对齐；正文保持比例数字，等宽数字在正文里会显得有缝隙。
13. 用 text-wrap: balance 让短标题各行长度更均匀、避免末行只剩一个词；用 text-wrap: pretty 只防孤行、更省资源，适合段落。balance 受浏览器行数限制，是标题工具不是正文工具。
14. 在样式表里一次性为所有同类元素设置换行策略：h1–h6、figcaption、blockquote、dt 用 text-wrap: balance；p、li、dd 用 text-wrap: pretty。不要逐组件加 text-balance utility，否则只对当前组件生效、下一个页面就失效。
15. 不要用 <br> 手动修孤字：它只在一个视口宽度正确，其他宽度全错；组件级换行是设计师明确要求的例外，不是默认手段。
16. 用不换行空格把词与其后续内容绑定：10&nbsp;kg、Figure&nbsp;3、人名与头衔，避免单位或编号单独掉到下一行被读成笔误。
17. 文本放不进槽位（孤字、标题旁的说明折成三行）时按顺序做三种修复：① 先缩短文本（槽位本来只要一个标签，不是要一句话）；② 向音阶下移一档（标题旁的辅助文本本就该低一两档）；③ 前两者用尽后改父级布局（减少该断点的网格列数、加宽列、让它独占一行、换位置）。不要留着不管，也不要只把容器调到当前宽度刚好放得下——那会把同样的问题推到下一个断点。
18. 图例不要写成句子：把“柱高是总量，实心部分是已完成数量”这类句子换成两个色块加各一个词（■ completed □ total）；轴标签、表头、chip 文本和任何挨着更大元素的说明同理。真正需要整句的解释放到元素下方，而不是旁边。
19. 一个槽位里堆两行（标签 + 说明）时，用字重和墨色区分而不是字号：semibold 主标签配 medium 弱化色说明。因为两行都已贴近 14px 下限，再降档会掉到最小字号以下，两档之差在这个尺寸也看不出来。弱化色不要配 400 字重——对比度计算只看颜色不管笔画粗细，muted/secondary 文本 token 最低字重设为 500。
20. 不要截断解释性文本：读者无法像认名字一样从首字符认出句子，被切掉的正是承载含义的部分，而 title 属性对触屏、键盘用户和不会悬停的人不可见。只截断标识符；解释要么换行、要么缩短、要么给该列更多空间。
21. 按页面语境取用音阶：落地页和营销面用 +4 到 +6 的大字号制造戏剧性和品牌感；功能页和应用 UI 用 +2 到 +3 的标题、正文留在 0 档，功能界面里过大的标题会分散注意力、让布局失衡。
22. 同一视图、同一语境（面板、浮层、页面区域）最多用 4 档——它对应视图的四个排版角色：标题、正文、标签、元数据。觉得需要第五档，通常说明有一个没被命名的第五角色，命名后往往发现它属于另一个视图或另一组还没画出的分组；超过四档眼睛就不再排序，相邻档会被读成错误而不是层级。
23. 标题不要只靠字号区分层级，组合使用：大写（text-transform: uppercase，用于 H4–H5 小标题）、字距（≤0.04em，仅在大写或粗体标题确实需要透气时）、颜色（品牌主色或略弱化的灰用于次级标题）、样式（斜体或细下划线用于补充/元数据类标题）。
24. 每页标题层级尽量限制在 H1–H3（覆盖页面标题、章节标题、子章节）；需要 H4–H6 时视为结构过于复杂的信号而非排版问题，做结构性决策：拆分（拆成多个页面，或用侧栏、tab、主从结构）、删除（该深层章节可能不值得存在）、简化（扁平化子层级使其落在 H1–H3 内）、把次要内容收进 modal/accordion/panel 等展开折叠元素。
25. 正文行长控制在 45–75 字符（约 500–700px）：太长眼睛找不到下一行开头，太短会破坏阅读节奏、产生难看的参差边缘。
26. 行长、行高、字号是一套联动的系统：窄列（约 45ch）行高 1.4、舒适列（55–66ch）1.5、宽列（约 75ch）1.6–1.7；正文行高 1.4–1.7，多行正文绝不低于 1.4，并为 WCAG SC 1.4.12 要求用户可覆盖到至少 1.5 留出余量；标题随字号增大收紧到 1.1–1.25，否则行会散开、不再读作一个整体；正文难读时加行高或收窄行长，而不是只把字号缩小。
27. 在网格、卡片或长度不可控的列表里用行裁剪保持视觉节奏和行内等高：多行裁剪写 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;（必须保留 -webkit- 旧形式以兼容）；标题和标签等绝不能换行的用单行省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 限制描述为 2–3 行以保证一行卡片等高。
28. 裁剪元素在 flex 或 grid 中要加 min-width: 0（或 min-inline-size: 0），否则它无法收缩到内容宽度以下，截断会静默失效。
29. 裁剪必须留获取全文的路径：给 title 属性（或可访问 tooltip）携带完整文本，或链接到详情页/“Read more”。这个后路只适用于用户不需要据以操作的支持性描述，不适用于被裁掉部分就是含义本身的解释；绝不要裁剪用户必须阅读才能操作的内容（价格、错误、法务文案、主要指示）。
30. 用编辑角色组织内容：pre-title/eyebrow（12–13px，常全大写，字距 ≤0.04em，弱化色，提供分类或上下文）、heading（大而粗，音阶 +3 到 +5，主钩子）、ingress/lead（比正文大一档 +1，略粗或行高更高，概括核心价值、衔接标题与正文）、body（16px、常规字重、行高约 1.5，主要阅读体验）。
31. 文案层面：用主动语态（“Get started” 而不是 “Getting started is easy”）、标签清晰有力并承诺结果、同一动作在整个产品中使用同一术语。
32. 响应式压缩靠收紧比例而不是逐个覆盖字号：桌面用较宽比例（如 1.25–1.333，对比更强）、平板用适中比例（如 1.200）、移动用紧比例（如 1.125，H1 明显变小而正文不变）；base 保持不动，只让顶部让位，绝不从底部压缩（正文 16px 已是下限）。
33. 用 clamp(MIN, PREFERRED, MAX) 让顶部字号在断点之间平滑过渡，例如 --text-h1: clamp(2rem, 1.5rem + 3vw, 3.5rem)：MIN 是移动尺寸、MAX 是桌面尺寸、中间视口相关项负责缩放。只对音阶顶部（标题、display）使用，正文和标签保持固定；preferred 值必须含 rem 项（如 1.5rem + 3vw 而非纯 3vw），否则用户缩放和根字号设置会失效。
34. 相邻小步骤不要流体化：caption 紧挨正文、或两个 label 档相邻时保持固定字号，因为两个独立 clamp() 各自按自己的斜率插值，可能在中途收敛甚至算出相同值，而只看 MIN/MAX 两端看不出问题。若某个小档位必须流体，要在多个中间宽度采样（或画出两个 clamp() 表达式）验证全程不交叉、最小间距不小于几 px；优先给相邻流体档位成比例的共享 vw 系数（由同一模块化比例推导），让曲线保持平行。
35. 交付前逐项过审查清单：所有字号是否来自同一 base + ratio；base 是否 ≥16px；14px 是否只用于次要文本；是否全站无 <14px；低于 16px 的角色是否 ≤3 且都在白名单；正文字距是否为 0、大写标签字距是否 ≤0.04em；深色上的浅色文字是否加了字重；等宽是否只用于技术内容；正文与最大标题之间是否有至少 3–4 档且相邻档可一眼区分；token 是否按角色/档位而非像素命名；比例是否匹配 UI 密度；行长是否 45–75 字符；标题旁说明是否换行或孤字；图例/轴标签/chip 是否写成标签而非句子；两行槽位是否靠字重与墨色区分；截断是否只用于标识符；正文行高是否随行长变化且 ≥1.4；标题行高是否收紧到 1.1–1.25；裁剪是否留了全文路径且未裁剪必读内容；流体的两个相邻档在全视口范围是否都保持可区分；是否用了 eyebrow/lead 等编辑角色；标题是否靠多种手段区分；标题层级是否尽量在 H1–H3 内。
36. 修复常见反模式：14/15/16/17px 并排（步长太小，改用至少 1.125 的比例）；13/18/27/36px 这类无关系的任意字号（重新从单一 base 和 ratio 生成）；组件内硬编码像素值（改为 CSS 自定义属性或设计令牌）；展示标题与密集数据表共用一套比例（数据用 1.125，营销用 1.25–1.333）；给正文加字距（保持 0）；深色背景上常规字重白字（提升一档字重）；等宽作默认 UI 字体或等宽加大写（限定到代码/ID/数值数据）；相邻小档位各自用独立 clamp()（保持固定字号，把 clamp() 留给音阶顶部）。

适用边界 · 注意事项

• 相邻的小号或标签档位不要流体化——正文和标签必须保持固定字号以守可读性下限，clamp() 只留给音阶顶部，否则两条曲线可能在中途收敛到无法区分。
• text-wrap: balance/pretty 不能当关键依赖：balance 受浏览器行数上限限制、Firefox 直接忽略两者，它也只能修换行不好看的标题，修不了本身就过长的文本。
• 当一个视图似乎需要第五档字号或需要 H4–H6 时，这不是排版问题而是信息架构问题，应先拆分/删除/简化/折叠内容，而不是继续加字号档位。