Curvioo

我们把 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 点),因为圆形字母正是偏宽的那些。

本站每个名字页都已经自动应用了这套判断——见任意 名字页顶部的“在花体中的书写特征”板块。

这份数据的局限

如何复现

从 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,是最小值的两倍多,所以同一行高设置对某些字体舒服,对另一些就会显得拥挤。