我们把 10 款花体字体全部实测了一遍:真正拉开差距的是什么
测量日期 · 单位均为 em
几乎所有花体生成器——包括本站——介绍自己的字体时都用形容词:优雅、浪漫、随性。形容词并不能帮你做选择。 所以我们解析了 Curvioo 全部 10 款字体的字形轮廓,测量那些真正会改变一个名字在页面上观感的属性: x 高度、大写高度、升部与降部的伸展、字母宽度以及倾斜角。
完整数据见下表。如果你不认同我们的解读,完全可以自己重测一遍:方法记录在
src/data/font-metrics.ts 里,只需要一个开源的 fontTools。
测量结果
按 x 高度与大写高度之比从低到高排序。“跨度”指升部到降部的距离,决定了每款字体所需的最小行高。
| 样式 | 字体 | x/大写 | 跨度 (em) | 倾斜 | "n" 宽度 |
|---|---|---|---|---|---|
| 手写体 | Sacramento | 0.412 | 1.37 | -8.0° | 0.445 em |
| 经典花体 | Great Vibes | 0.442 | 1.18 | +19.7° | 0.338 em |
| 粗体连笔 | Dancing Script | 0.461 | 1.00 | +20.8° | 0.466 em |
| 巴黎风 | Parisienne | 0.474 | 1.23 | +23.2° | 0.501 em |
| 精致花体 | Pinyon Script | 0.486 | 1.16 | +38.5° | 0.509 em |
| 随性手写 | Caveat | 0.507 | 0.95 | +21.7° | 0.450 em |
| 签名体 | Allura | 0.511 | 0.98 | +27.4° | 0.404 em |
| 笔刷签名 | Alex Brush | 0.566 | 0.99 | +22.8° | 0.403 em |
| 真实手写 | Homemade Apple | 0.596 | 1.86 | +8.5° | 0.585 em |
| 笔刷花体 | Kaushan Script | 0.640 | 1.20 | +24.7° | 0.540 em |
这些数字会改变的四件事
1. 比值低的字体里,短名字会显得不匀
x 高度与大写高度之比,从手写体(Sacramento)的 0.412 一直到笔刷花体(Kaushan Script)的 0.640,差距约 55%。 比值低意味着大写字母明显高于小写主体,所以像 “Ian” 这样的短名字会变成一个大字母后面跟三个小字母。 这种戏剧性对比用在字母组合上正合适,但用在表单或小号说明文字里,就会被当成排版错误。
2. 倾斜角的差异比样式名称暗示的更大
实测小写 “l” 的倾斜从手写体(Sacramento)的 -8.0° (向后倾)一直到精致花体(Pinyon Script)的 +38.5°。 向后倾是少见且有意的设计,这正是 Sacramento 在标签上看起来随性的原因。在正式场合使用它之前,值得先知道这一点。
3. 每款样式需要的行高并不相同
升部到降部的跨度,是一行文字在与下一行相撞之前所占的最小垂直高度。 真实手写(Homemade Apple)需要约 1.86 em, 而随性手写(Caveat)只需要约 0.95 em。在练习纸或请柬上,整页统一用同一个行高时, 这个差异就是某些行看起来拥挤、另一些行看起来空旷的原因。如果要打印,请按你用到的最大跨度来设置行高。
4. 不同名字长度,宽度预算也不同
单个小写 “n” 的宽度,从经典花体(Great Vibes)的 0.338 em (最窄)到真实手写(Homemade Apple)的 0.585 em,相差约 73%。 短名字看不出来;长名字放在固定宽度的卡片上时,这就是放得下与换行之间的区别。 在确定版式之前,先用字宽乘以字母数算一遍,而不是排版完再发现。
为什么这对“名字”尤其重要
正是这四个属性,让两个长度相同的名字在同一款字体里表现完全不同。没有降部字母的名字, 永远不会碰到真实手写体所预留的那 0.84 em 降部区间,因此它可以比字体的平均值用更紧的行高。 而主要由圆形字母构成的名字,更多受宽度(第 4 点)影响,而不是跨度(第 3 点),因为圆形字母正是偏宽的那些。
本站每个名字页都已经自动应用了这套判断——见任意 名字页顶部的“在花体中的书写特征”板块。
这份数据的局限
- 倾斜角是根据 “l” 字形轮廓估算的,不是设计者填写的 italic angle。
- 我们只测了拉丁字母的大小写,未采样数字与标点。
- 数值对应具体的字体版本。若 Google 发布了新的字重版本,数字会变化,我们会重新测量。
- “跨度”是几何数值。实际的拥挤感还取决于具体字母的墨迹覆盖,本表没有对此建模。
如何复现
从 Google Fonts CSS API 下载各字体,用 fontTools 解析 WOFF2,用 bounds pen 读取轮廓,
再除以 head.unitsPerEm。本页渲染的准确数值存放在
src/data/font-metrics.ts。
关于这些测量
方法说明,以及如何读懂这张表。
这些数字是怎么测出来的?
每款字体都从 Google Fonts CSS API 下载 WOFF2,再用 fontTools 解析。所有数值都直接来自字形轮廓本身——不是从截图量的,也不是照抄厂商的描述。数值会除以该字体自己的 units-per-em,因此 1000 单位和 2048 单位的字体可以直接对比。
x 高度与大写高度之比有什么用?
它说明小写字母相对于大写字母的高度。比值高,说明小写字母偏高、整词看起来更均匀;比值低,说明大写字母明显高于小写,短名字写出来会有戏剧性的对比。
为什么倾斜角是从轮廓测的,而不是读字体的 italic angle?
这些字体中的大多数把 italic angle 报为 0,即使字形明显倾斜,因为该字段是可选的、常常没有填写。测量小写字母 "l" 的轮廓得到的是你实际看到的角度。
升部到降部的跨度越大,就需要更大的行距吗?
是的。这个跨度决定了每一行在不与下一行相撞之前所占的最小高度。本表中最大的跨度约为 1.86 em,是最小值的两倍多,所以同一行高设置对某些字体舒服,对另一些就会显得拥挤。