本文属于“前端设计基础”系列。开始前可以先阅读字体选择与排版，完成字号系统后再用视觉层次检查阅读顺序。

如果每个标题和说明都凭感觉设置字号，页面很快会出现大量相近却不一致的数值。字号阶梯的作用，是用有限的级别建立可预测的层次。

什么是模块化字号阶梯

先选择一个正文字号，再用固定比例向上和向下计算。例如以 16px 为基础、比例为 1.25，可以得到约 16、20、25、31、39px 的序列。

比例越大，层级跳跃越明显，适合营销页；比例越小，信息密度更高，适合后台和工具。常见比例包括 1.125、1.2、1.25 和 1.333。

数学比例不是最终答案

计算结果需要结合字体形态、屏幕尺寸和内容长度校正。中文标题通常比英文占用更多空间，不能机械照搬同一组桌面端数值。

重要的是减少随意值，而不是让每个字号都严格符合公式。为 H1、H2、H3、正文、辅助文字和标签分配固定层级，通常已经足够。

使用响应式字号

大标题可以通过 CSS clamp() 在移动端和桌面端之间平滑变化：

正文一般不需要大幅缩放。优先保证移动端可读性，再让展示型标题随视口增长。

不要只靠大小表达层级

字重、颜色、行高和上下间距都会影响文字的视觉重量。标题变大时可以适当收紧行高；辅助文字除了变小，也可以降低颜色对比。一个成熟的文字系统会组合使用这些信号。

字号阶梯的价值，是让用户在阅读之前就能看懂信息结构，也让团队不必反复争论“这里到底用 22px 还是 24px”。

更多可落地的界面风格，可以访问 StyleKit。