字阶（Type Scale）生成器

字阶是一组字号，它们都来自同一个基础字号，并反复乘以同一个比例，就像音程把音符联系起来一样。这样标题、正文和图注看起来相互关联，而不是随意拼凑。这个生成器根据你的基础字号和经典比例——从含蓄的小二度到夸张的黄金比例——构建字阶，把每一级以 px 和 rem 列出并给出建议用途，写出 CSS 自定义属性和标题规则，还可以用 clamp() 让每一级在小屏幕与大屏幕之间流式变化。

使用方法

1. 输入基础（正文）字号，通常是 16 px。
2. 选择比例：文字较多的页面和应用用 1.125–1.25，大胆的编辑或营销页面用 1.333–1.618。
3. 选择向上和向下需要几级，以及如何取整。
4. 需要时勾选“流式”，为手机设置更小的基础字号和比例，然后复制 CSS 变量和标题规则。

计算公式

size(n) = base × ratioⁿ · rem = px ÷ root size · fluid: clamp(small, intercept + slope × 100vw, large)

n 是级数：0 是基础字号，正数更大，负数更小。开启流式后，每一级都有一个由小屏幕基础字号和比例得出的小屏幕字号，以及一个由主设置得出的大屏幕字号，斜率 = (大值 − 小值) ÷ (大屏幕宽度 − 小屏幕宽度)。

示例

基础字号 16 px、比例为大三度（1.25）时，各级为 12.8、16、20、25 和 31.25 px，即 0.8、1、1.25、1.5625 和 1.9531 rem，所以 h1 取向上三级的 31.25 px。黄金比例增长快得多：16、25.89 和 41.89 px，取整到整像素则是 26 px 和 42 px。