KITSolo / TYPE SCALE WORKBENCH

字体层级比例尺

从正文基准字号开始,按比例生成清楚的标题层级,预览像素与 rem 尺寸,并导出可直接使用的 CSS 变量。

OFFLINE · PRIVATE

01 / 参数

基准 16 px · 比例 1.25
阶梯参数
16 px

12 – 24 px:0 级正文的实际字号,其余级别由它推导。

相邻级别 ×1.250 · -2 → +6 跨度 ×5.960

1.7

1.2 – 2.2,会同时写入导出 CSS 的 body 行高。

预览样本

只使用本机字体,不加载任何网络字体。

样本区与每一级阶梯都会显示它;留空时用「Aa 字」占位。

02 / 字阶预览

9 级 · -2 … +6

样本与每一级阶梯都按真实字号渲染;超过 96 px 的级别以 96 px 上限显示,准确数值见「px / rem」标签。

TYPE SPECIMEN / 01

让阅读有自己的节奏。

排版让阅读有了节奏。把字号、行高与内容密度一起考虑,页面便会自然形成层次。Good typography gives every word room to breathe.

    03 / CSS 变量

    9 个变量 · -2 … +6

    rem 以 16 px 根字体换算,数字与导出值一致;body 直接引用 var(--text-0) 与所选行高,复制即可粘进样式表。

    
            
    纯本地处理 · 调整参数即时更新 · Ctrl / Cmd + Enter 复制 CSS