字号阶梯生成
Type Scale Generator
由基准字号和比例生成模块化的字号和间距阶梯，导出成 CSS 或设计变量。
从基础字号和比率构建一个模数字号阶梯，并把每一级按真实大小显示，旁边带着要紧的数字：rem、行高、字距，以及——决定一个字号能否用于正文的那一个——在你的栏宽下一行能放多少个字符。它从同一个比率推导出一个间距刻度，吸附到 4px 网格。
阶梯
比例：1.25
同一比例得出的间距
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
对齐到 4px 的网格——几乎每套设计系统都已经有这张网格，而 12px 旁边放个 13px 只是噪声。
预览
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
天地玄黄 宇宙洪荒 · The quick brown fox jumps over the lazy dog
绿色标的是一行 45–75个字符——Bringhurst 给拉丁文的范围。韩文按词分写，比全角的汉字假名更接近这一边。
导出
想让其中某个尺寸不按档跳、而是跟着视口连续变化？流式尺寸 clamp 计算会把其中两个值合成一个 clamp()。
怎么用
设定基础字号
正文字号，几乎总是 16px。其他一切都是它乘以或除以比率，所以先把它定对，省得之后重选比率。
选比率——这才是决定
大二度（1.125）是稳妥的界面默认值：八级仍然落在合理范围内。纯四度（1.333）是编辑排版用的——从 16px 往上三级已经是 38px。黄金比例很有名，对界面文字来说太陡。每个预设都说明它是干什么用的；按你需要的范围选，不按名字选。
决定多少级，以及是否取整
往下的级给说明文字和标签；往上的级给标题。精确保持几何关系并给你小数像素；1px 或 2px 取整给出人能记在脑子里的数字，并略微破坏比率。取整是通常的选择，精确值仍显示在每个取整值旁边。
设定栏宽并读字符数
输入这段文字实际所在的栏的宽度。每一行最右边的数字是那个宽度下的每行字符数，在 45 到 75 之间变绿——这是连续正文有真实证据支撑的区间。这个区间是拉丁文字的数字，工具按它着色；中文正文每行的字数要少得多，中文排版通常按每行三十到四十个汉字来衡量，所以对中文要按你自己的标准来读这个数。一个单独看着不错、却给出每行 110 个字符的字号，对正文来说就是错的字号。
导出 token
CSS 变量、Tailwind 主题块、SCSS 或 JSON。间距刻度一起输出，所以一次粘贴两者都覆盖。
常见问题
预览显示的是我实际的字体吗？
不是——它用这个页面的字体渲染。字号、行高和字距是真实的，但不同的字体有不同的 x 高度，而 x 高度才真正决定 16px 看起来多大。把预览当作对比例的检查，在你自己的产品里确认基础字号。
我该用整个阶梯吗？
不该，生成了十一级不是用十一级的理由。大多数界面需要四五个字号。多出来的级存在，是为了让你看到比率走向哪里，也让一个很少需要的字号有一个定义好的值，而不是临时发明。
行高和字距是哪来的？
来自一条规则，不是来自你的字体：行高随字号变大而下降，字距在大的级上收紧，在小的级上略微放松。它是约定俗成的起点，正确的次数足够多，因而有用，但窄体字体，或者音节块很高的韩文字体，会想要不同的数字。看过之后再调。
为什么间距刻度吸附到 4px，而字号阶梯不吸附？
因为眼睛读它们的方式不同。17px 的标题挨着 18px 的标题是层级；13px 的间隙挨着 12px 的间隙是噪音，而且是那种能通过评审然后被复制的噪音。几乎每个设计系统都已经有 4px 网格，所以间距刻度在那里和它会合。
可以从这些接进来
流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。
字体搭配推荐
Font Pairing
从系统字体栈里推荐标题和正文的搭配，用你自己输入的文字预览后给出 CSS；字体栈是按韩文和西文选的。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。
CSS 变量提取
CSS Token Extractor
从样式表里把颜色、间距、圆角和字体值抽出来，并提议一套自定义属性。
字体搭配推荐
Font Pairing
从系统字体栈里推荐标题和正文的搭配，用你自己输入的文字预览后给出 CSS；字体栈是按韩文和西文选的。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。