字号阶梯
Type Scale
别名:字号阶梯标题比例字级字体大小层级字号系统type scalemodular scale
这是什么
用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 页面存在标题、正文、辅助文字等多级文本层级
- 多人协作需要统一字号，避免各自随手写 13px、15px
- 响应式排版希望字号随视口连续或按断点有节制地变化
✕ 不适用场景
- 单一字号就够的极简控件条、图标工具栏
- 像素级还原设计稿且不允许任何取整合并
- 比例档位过多（超过 8 档），层级反而失去可辨识度
常见形式
模数比例
Modular scale
基准字号乘固定比例逐级放大，档位离散、节奏稳定
流式字号
Fluid type
clamp(最小, 视口插值, 最大)，小屏大屏连续过渡
尺码档位
T-shirt sizes
sm / md / lg / xl 语义命名，工程侧好引用
实现要点
clamp()remcalc()font-size: var(--text-lg)用 rem 定义 6～8 档字号变量（--text-xs 到 --text-3xl），比例写进注释；标题跳档而非连续堆砌，相邻档位差异不小于 1.15 倍才可感知。流式档位写成 clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem)，两端封顶防止 4K 失控。中文正文基准 15～17px，英文 16px 起。字号变更必须同步检查行高与行长。
平台 API
font-sizeclamp()remcalc()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | clamp() 流体字号的首选写法 |
| CSS | font-size |
| Tailwind CSS | text-sm / text-base / text-lg |
横向对比
查看完整对比 →相关概念
按优先级排列的字体回退链：首选字体缺席时依次落到下一个，最后由通用族兜底。系统栈零下载、即时渲染，网络字体保品牌气质但要配 font-display 控制闪烁，本地优先则两者之间取平衡。栈的顺序就是渲染的决策顺序。
基础搭配使用一行文字占的垂直空间，决定段落的松紧与呼吸。标题收紧（1.1～1.3）显得挺拔，正文放宽（1.5～1.8）利于逐行阅读，引文可以更松。优先用无单位倍数，让行高随字号缩放，而不是写死像素值。
基础搭配使用一段文字每行容纳的字符数，决定眼睛回行是否省力。舒适区大约 45～75 个拉丁字符（中文 28～40 字），最常用 65ch 左右。行太窄回行太频繁，太宽则跟丢行；用 max-width 以 ch 为单位控制，比按像素猜更可靠。
基础搭配使用把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格搭配使用