字号比例生成器（字体大小体系）

用一个基准字号和一个比例生成标题、正文和说明文字的整套字号，使页面上的字号彼此关联。适合在开始做网站、应用界面或文档模板时使用。

使用方法

1. 以 px 输入正文的“基准字号”，再选择“比例”；“自定义”可输入 1.05 到 2 之间的任意值。
2. 在“取整”中选择保留小数、整数 px，或对齐到“4px 网格”。
3. 设置“行高”：“标题更紧凑”会让大字号的倍数变小，“全部相同”则使用同一个值。
4. 在“预览文字”中输入自己的文字，切换“预览字体”，按真实大小查看每一级。
5. 点击“复制 CSS 变量”“复制元素 CSS”或“复制 JSON”。

计算方式与说明

• 第 n 级字号 = 基准 × 比例的 n 次方。级别从 −2 (xs) 到 +6 (5xl)；第 0 级是正文 (p)，第 1 到 6 级对应 h6 到 h1。
• rem 是 px 除以基准字号；pt = px × 0.75（每英寸 96 px）。
• 选择“标题更紧凑”时，倍数从基准字号处的“正文行高”直线下降到基准字号 3 倍处的“标题行高”。“4px 网格”同时把行框取整为 4 px 的倍数。
• 设置保存在此浏览器中，下次打开仍然可用。

常见问题

网站应该用哪个比例？

1.2 和 1.25 生成适合长文的适中标题；1.333 及以上生成海报式的大标题。小屏幕通常用较小的比例更好看。

正文字号应该多大？

16 px 是浏览器默认值，也是常见的起点；长篇阅读文字常用 17 到 18 px。其余级别会跟随你输入的基准字号。

怎样把字号换算成 rem？

表中 px 旁边就有 rem。像复制的元素 CSS 那样把 html 设为基准字号的 px 值，1rem 就等于基准字号。

标题的行高应该是多少？

正文通常在 1.5 左右，大标题在 1.1 到 1.25 左右，这样标题换行时不会留下太大空隙。自动模式会应用这一变化。