排版比例生成器
选择一个基准字号和一个模块化比例系数(例如黄金比例或大三度),该工具会生成一整套成比例的字号——从小号说明文字到大号标题——让你的文本大小显得协调统一,而不是随意选取。将结果复制为可直接使用的CSS自定义属性代码块。
基准字号(px)
比例系数
示例文字 步长
-2 · 10.24px
示例文字 步长
-1 · 12.8px
示例文字 步长
0 · 16px
示例文字 步长
1 · 20px
示例文字 步长
2 · 25px
示例文字 步长
3 · 31.25px
示例文字 步长
4 · 39.06px
示例文字 步长
5 · 48.83px
--step--2: 10.24px;
--step--1: 12.8px;
--step-0: 16px;
--step-1: 20px;
--step-2: 25px;
--step-3: 31.25px;
--step-4: 39.06px;
--step-5: 48.83px;工作原理
模块化比例会以固定的比例系数,逐级对基准字号进行乘法运算,并向两个方向展开——负数步长向说明文字和小字号方向缩小,正数步长向标题和大号展示文字方向放大。最终得到的一整套字号都遵循同一比例关系,通常比随意选取的字号看起来更有设计感。
如何选择比例
较小的比例(如小二度或大二度)会生成细腻、间距紧凑的字号,适合信息密集的界面;较大的比例(如纯四度或黄金比例)会带来更鲜明的对比,适合只有少数几个醒目标题的编辑类或营销类页面。