字号阶梯生成
UpBox优盒工具箱，免费在线字号阶梯生成：选一个模块化比例和基准字号，立刻得到整套 px 与 rem 字号、对应行高和可直接粘贴的 CSS 变量，排版不再靠手调。
无需注册 · 数据不上传No sign-up · nothing uploaded
阶梯参数Scale settings
已生成
每级字号 = 基准 × 比例ⁿ；行高按字号自动收紧，大标题更紧、小字更松；输出的 CSS 用 rem，跟随浏览器根字号缩放，px 值仅作参考
阶梯预览Preview
左列是变量名、中间按实际字号渲染、右列给出 px、rem 与行高；基准字号的对应行永远在内
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
排版里最难说清的是「标题到底该多大」；随手写 18、22、28、36，级差忽大忽小，读起来就不稳。 The hardest thing to justify in typography is how large a heading should be; ad-hoc 18, 22, 28, 36 give uneven jumps and the page reads unsteady.
用一个固定比例乘出来，每级都有依据，标题、正文、注释之间的节奏自然就有秩序。 Multiplying by one fixed ratio gives every step a reason, and the rhythm between headings, body and captions falls into place.
- 八种比例Eight ratios
- px 与 rempx and rem
- 自动行高Auto line height
- 可复制 CSSCopyable CSS
使用说明
- 填基准字号。Set the base size.
- 选比例与级数。Pick the ratio and steps.
- 看实时预览。Check the live preview.
- 复制 CSS 变量。Copy the CSS variables.
常见问题
该选哪个比例？Which ratio should I use?
正文为主的页面 1.2 到 1.25 比较稳；标题需要强对比的海报或落地页可用 1.333 甚至 1.5；1.618 只适合字很少的大标题页面。Pages that are mostly body text sit well at 1.2 to 1.25; posters or landing pages that need strong hierarchy can use 1.333 or 1.5; 1.618 only suits pages with very few, very large headings.
为什么用 rem 不用 px？Why rem instead of px?
rem 跟随浏览器根字号，用户在系统里放大字体时整页一起缩放；px 写死的页面放大后会挤在一起。rem follows the browser root size, so when a user enlarges text everything scales together; pages locked to px crowd up.
行高是固定值吗？Are the line heights fixed?
按字号分档：14px 以下 1.75、16px 1.7、20px 1.6、28px 1.45、40px 1.3，再大 1.15，可以直接在项目里改。They step by size: 1.75 below 14px, 1.7 at 16px, 1.6 at 20px, 1.45 at 28px, 1.3 at 40px and 1.15 beyond, all editable in your project.
变量名怎么定的？How are the variable names chosen?
-3 到 -1 依次是 xs 和 sm，0 是 base，往上 lg / xl / 2xl / 3xl，超出范围的用 +n 表示。From -3 to -1 gives xs and sm, 0 is base, above that lg, xl, 2xl, 3xl, and anything further out is written as +n.