设计 / 排版
字号比例生成器（CSS和Tailwind模块化比例）
根据基础字号和比例（例如1.25或黄金比例）生成模块化字号比例，使用自定义文本预览每个级别，并以rem或px格式复制CSS自定义属性或Tailwind fontSize配置。
字号比例生成器（CSS和Tailwind模块化比例）: 每个字号都是基础字号乘以比例，乘数取决于级数：以16 px和大三度1.25为例，上方级别为20、25、31.25、39.06和48.83 px，下方级别为12.8和10.24 px。字号会以px和rem列出，并采用类似Tailwind的文本字号命名，从xs到4xl。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}每一级都是下一级乘以该比例：以16 px为基准、比例为1.25时，上方大小为20、25和31.25 px，下方大小为12.8和10.24 px。1.125这样较小的比例适合紧凑型界面；1.5这样较大的比例能让标题形成更强的对比。rem值假定浏览器的默认根大小为16 px。
比例名称从何而来
这些名称来自音乐音程：纯五度的频率比为3 : 2，因此，以1.5为基础构建的字号比例，其增长比例与相隔五度的音符相同。Tim Brown的模块化比例让这一理念在网络上广为流行。
黄金比例1.618会带来非常大的跳跃；黄金比例计算器对此有详细说明。
四舍五入
浏览器会渲染小数像素尺寸，因此31.25 px可以直接使用。如果设计系统需要整数像素，请将每个步骤四舍五入，并像本工具一样将rem值保留四位小数；其他值可使用px转rem转换器进行换算。
使用方法
- 输入基础字号并选择比例。
- 设置向上和向下的级数，然后使用你的文本预览效果。
- 复制CSS变量或Tailwind配置。
隐私与限制
所有操作都在你的浏览器中运行。
相关工具
常见问题
应该使用哪个比例？
文本较多且屏幕较小的界面适合使用1.125或1.2等柔和比例；编辑页面和落地页可以使用1.333到1.618，让标题更醒目。
为什么使用rem？
rem字号会遵循读者浏览器的字号设置，因此需要更大字号的用户可以看到更大的文本。换算以默认的16 px根字号为基础。
可以让字号具有流动性吗？
可以：取某一级别所需的最小和最大字号，然后使用CSS clamp生成器将它们转换为clamp()表达式。
免费工具·使用在浏览器中次·无需账户