选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS —— 浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
| 级别 | 阶 | px | rem | 行高 | |
|---|---|---|---|---|---|
| text-6xl | +6 | 61.035px | 3.815rem | 1.32 | |
| text-5xl | +5 | 48.828px | 3.052rem | 1.369 | |
| text-4xl | +4 | 39.063px | 2.441rem | 1.408 | |
| text-3xl | +3 | 31.25px | 1.953rem | 1.439 | |
| text-2xl | +2 | 25px | 1.563rem | 1.464 | |
| text-xl | +1 | 20px | 1.25rem | 1.484 | |
| text-base | base | 16px | 1rem | 1.5 | |
| text-sm | -1 | 12.8px | 0.8rem | 1.513 | |
| text-xs | -2 | 10.24px | 0.64rem | 1.523 |
:root {
--text-6xl: 3.815rem;
--leading-6xl: 1.32;
--text-5xl: 3.052rem;
--leading-5xl: 1.369;
--text-4xl: 2.441rem;
--leading-4xl: 1.408;
--text-3xl: 1.953rem;
--leading-3xl: 1.439;
--text-2xl: 1.563rem;
--leading-2xl: 1.464;
--text-xl: 1.25rem;
--leading-xl: 1.484;
--text-base: 1rem;
--leading-base: 1.5;
--text-sm: 0.8rem;
--leading-sm: 1.513;
--text-xs: 0.64rem;
--leading-xs: 1.523;
}这个工具能做什么
给设计师和前端的模块化字号阶(modular type scale)生成器。与其 凭感觉堆一组对不上的字号,不如选一个基准字号(8–48px)和一个 比例,工具用定义模块化阶的唯一公式算出每一级: 字号 = 基准 × 比例^阶。内置八个音程预设,从小二度(1.067)一路 到黄金比例(1.618),再加一个 1.01–3.0 的自定义框。向上几级 (1–8,给超大标题)和向下几级(0–4,给说明文字、版权行、 overline)都能自己定,所以连大多数生成器忽略的"比正文小"的 级别也覆盖到了。
每一级同时给 px 和 rem(按可调的根字号折算,常见的 62.5% / 10px 根字号技巧改一个字段就行)、自动推导的行高,以及在该字号 下渲染的真实文字预览,可切浅色 / 深色,而不是只甩一列数字。 行高可以全阶固定,也可以"随字号收紧"—— 大标题本就该排得比 正文紧。导出支持三种:CSS 自定义属性(--text-* 和 --leading-*)、 带 [字号, 行高] 元组的 Tailwind theme.fontSize 配置、以及附带 现成 @mixin 的 SCSS map。导出格式偏好会被记住,下次打开默认 还是上次那个;基准 / 比例 / 级数都写进 URL,分享一条链接同事 打开就是同一套阶。100% 浏览器本地,不上传任何内容。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
字号比例阶生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给新设计系统定义字号 token
要起一套设计系统,需要一份所有组件都能引用的 `fontSize` 阶。 步骤:(1)基准设成正文字号 —— Web 默认 16px;(2)选大三度 (1.25)拿到平衡的 UI 观感;(3)向上 6 级(覆盖 text-base 到 text-6xl 大标题)、向下 2 级(caption + 小字);(4)行高保持 "随字号收紧",标题自动收紧;(5)导出 Tailwind 配置,把 `theme.fontSize` 块粘进 `tailwind.config.js`。从此团队用 `text-2xl`,而不是各猜各的 `text-[27px]`。
钉死落地页的标题层级
营销落地页要有主标题、两级小节标题和正文,字号清晰递减。 步骤:(1)基准 16px,比例纯四度(1.333)拿明显对比;(2)看 表 —— 主标题(+4)约 50px,小节(+2)约 28px,正文(0)16px; (3)预览切深色,对着深色 hero 条检查主标题;(4)复制需要的 三级的逐行 `font-size`,或导出 CSS 变量引用 `--text-4xl` 等。 就算后面有人说"整体再大一点",比例也锁死 —— 改基准重导即可。
把乱糟糟的样式表重构成一致的阶
接手一个项目,字号 13、15、19、22、29px 散落各处。步骤: (1)定一个基准(最常见的正文值,比如 15px);(2)调比例直到 生成的级数贴近现有字号 —— 1.2 常能拟合手调出来的杂乱集; (3)导出 CSS 变量;(4)把零散 px 值查找替换成最近的 `--text-*` token。页面几乎一模一样,但每个字号都上了系统, 下次新增有明显的位置可放。
用 10px 根字号搭一套无障碍 rem 阶
团队用 `html { font-size: 62.5% }` 让 `1rem = 10px`,rem 算 起来方便。步骤:(1)把工具的根字号设成 10;(2)基准设成 16 (你真正的正文字号);(3)rem 列现在正文读 1.6rem,+1 级读 2.5rem 等 —— 正是你 CSS 期望的;(4)以 rem 导出 CSS 变量。 这套阶既尊重用户缩放和字号偏好,又保持团队习惯的 rem 数字。
给开发一份可逐字落地的规格
设计师想给工程一份没有歧义的排版规格。步骤:(1)调基准、 比例、级数,直到实时预览与设计稿一致;(2)导出切到 SCSS map;(3)复制 `$font-sizes` / `$line-heights` 两个 map 加上 `@mixin type()`;(4)粘进仓库,写 `h1 { @include type('4xl'); }`。 后面不会再为四舍五入扯皮 —— 每一级的 px、rem、行高都出自 一个公式,不是对着 Figma 面板估的。
常见踩坑
比例选太大,然后抱怨阶"炸了"。1.618 从 16px 基准往上 +6 级超过 280px —— 做一次性海报没问题,当 UI 阶就没法用。最大标题离谱时,应该调小比例或减少向上级数,而不是手动改最顶那个值(那样就破坏了模块化阶的意义)。
导出 px,丢掉用户缩放的无障碍。px 阶无视读者的浏览器字号设置,放大文字的用户什么也得不到。除非有明确理由要固定尺寸,否则导 rem;工具默认就是 rem,正是为此。
忘了 rem 依赖根字号。如果你的 CSS 写了 `html { font-size: 62.5% }`(10px 根),却用默认 16px 根生成阶,那每个 rem 值在浏览器里都会小 1.6 倍。复制 rem 之前,把工具的根字号字段设成你实际的根字号。
隐私说明
每一级字号和行高都是浏览器里用纯算术(基准 × 比例^阶)算出来 的 —— 没有字体文件,没有网络请求,不记录你输入了什么。唯一会 离开页面的是分享链接:它把你的设置(基准、比例、自定义比例、 单位、根字号、向上/向下级数、行高)写进 query string,好让 "分享链接"复现同一套阶。导出格式偏好存在本浏览器的 localStorage 里,下次打开默认还是上次用的格式;清除站点数据 即可移除。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。