🔤
字号比例音阶
由基准字号与比例(如 1.25 大三度)生成一套和谐的字号阶梯,含 CSS。
本地处理 · 不上传
加载工具中…
相关：字号音阶 · type scale · 模块化比例 · 字号系统 · 排版
字号比例音阶按选定的比例系数生成一套递进的字号，形成协调的排版层级。设计系统中的字号规范。用统一的比例系数生成字号，各级之间的关系恒定，视觉上自然协调。
使用步骤
- 设置基准字号与比例系数
- 查看生成的字号阶梯
- 调整级数
- 导出为 CSS 变量
使用场景
- 为设计系统建立字号规范
- 确定标题与正文的层级关系
- 统一项目中的字号使用
- 生成排版的 CSS 变量
小贴士
- 用统一的比例系数生成字号，各级之间的关系是恒定的，视觉上自然协调，比随意取整数值好得多。
- 常用的比例系数在 1.2 到 1.333 之间。比例过大时层级跳跃剧烈，适合有强烈对比的落地页；过小则层级难以区分。
- 正文字号是基准，通常不小于 16 像素——移动端小于 16 像素的输入框还会触发浏览器的自动缩放。
常见问题
比例系数选多少？
网页正文排版常用 1.2 到 1.25，层级平缓易读；宣传页与海报可用 1.333 甚至 1.5，形成强烈的视觉对比。关键是全站统一，而不是每处各选各的。
正文用多大字号？
网页正文建议不小于 16 像素。这既是可读性的下限，也因为移动端浏览器对小于 16 像素的输入框会自动放大页面，破坏布局。
为什么要用比例而不是随便定？
因为固定比例保证了各级字号之间的关系恒定，视觉上自然形成层级。随意取值容易出现两个字号太接近而层级不清，或跳跃太大而突兀。
字号比例音阶是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用字号比例音阶，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。