排版参数

默认以 16px 为基准，按 1.25 倍生成 6 个层级。

字号层级

12.8–39.06px
6 个层级 · 根字号假设 16px
中英混排样张
辅助信息 · 12.80px / 0.8000rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

正文 · 16.00px / 1.0000rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

小标题 · 20.00px / 1.2500rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

小标题 · 25.00px / 1.5625rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

展示文字 · 31.25px / 1.9531rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

展示文字 · 39.06px / 2.4414rem

让每一行文字，都有清晰的层次。 Design starts with a clear rhythm.

层级pxrem建议用途
-112.800.8000辅助信息
016.001.0000正文
+120.001.2500小标题
+225.001.5625小标题
+331.251.9531展示文字
+439.062.4414展示文字
/* 按根字号 16px 换算；仅声明变量，不改变页面根字号。 */
:root {
  --text-step-minus-1: 0.8rem;
  --text-step-0: 1rem;
  --text-step-1: 1.25rem;
  --text-step-2: 1.5625rem;
  --text-step-3: 1.9531rem;
  --text-step-4: 2.4414rem;
  --text-line-height: 1.6;
}

字号表显示 px 两位、rem 四位小数；CSS 采用四位 rem。样张按这一精度和指定根字号预览，不改变当前页面的标题大小。

字号比例生成器

设置基准字号、比例和层级数量，生成中英文排版样张与 px、rem 字号对照，可调整行高并导出 CSS 变量和 JSON，方便统一网页文字层级。

整理：喜爱工具箱 · 更新于 。字号采用等比数列：基准字号 × 比例ⁿ；rem = px ÷ 根字号。建议用途和示例文案用于排版参考，字体回退可能改变实际换行。

继续使用：字体预览与配对 · 颜色对比度检查

使用说明

三步完成操作

  1. 01 · 确定基准

    填写正文字号和比例，选择向上、向下生成的级数。

  2. 02 · 比较样张

    查看中英文字号层级，调整行高和根字号假设，检查长文效果。

  3. 03 · 导出字号表

    复制 CSS 变量，或下载包含参数、精确字号和样张的 JSON。

常见问题

使用前先了解这些

字号是怎么计算的？

第 n 级 = 基准字号 × 比例的 n 次方。以 16px、1.25 为例，向上一、二级是 20px、25px，向下一级是 12.8px。每级从原始基准计算，不逐级累积舍入误差。

rem 为什么会随根字号变化？

rem 表示相对页面根字号的倍数。20px 在根字号 16px 的假设下等于 1.25rem；工具不会替你修改目标页面的根字号。

与字体配对有什么区别？

字体配对选择字体组合；这里建立字号层级。预览使用系统字体，不同设备的字体和字符宽度可能不同。

建议字号适合所有中文内容吗？

不是。建议用途只是排版起点，请结合中文密度、阅读距离和目标设备核对。小字号不宜直接用于长篇正文。