Geist 衬线体

Geist 最初是一款专为开发者设计的等宽字体,旨在满足他们在编辑器和终端中日常工作时的需求。随后,它扩展为适用于产品界面的 Geist Sans,并进一步发展出受早期计算机屏幕网格启发的 Geist Pixel。
今天,我们又为这个家族增添了一位新成员:《Geist Serif》。
Geist Serif 是一款高对比度的显示衬线体,其设计基础与 Geist Sans、Geist Mono 和 Geist Pixel 一脉相承。它拥有纤细的锯齿状衬线和锐利的细笔画,专为在实体世界以及现代设备的高密度屏幕上强有力地传达信息而打造。
同一系统,全新声音
在 Vercel,Geist Sans 负责产品的整体视觉呈现。但对于标题,我们希望有一种与之同属一个系统的第二声音,而不是从下拉菜单中随意挑选的陌生字体。
许多科技品牌已逐渐摒弃纯粹的无衬线字体,以重新注入个性,其中不少还借鉴了复古的电脑广告风格。而 Geist Serif 则选择了另一条路径:走向时尚、编辑设计与杂志标题。
这是我们向《滚石》和《哈珀斯·巴azaar》背后那些设计师们的致敬。
自始至终,每一个 Geist 字体家族都从字体历史的某个篇章中汲取灵感:瑞士设计运动、早期的终端与 DOS 计算,如今则是编辑印刷领域。
优先用于显示
Geist Serif 最初由 Evil Rabbit 绘制了一系列草图,随后由 Andrés Briganti 进一步完善。最初的几个字母便展现出富有表现力的衬线风格,颇具 Victor Serif 和 Stanley 等字体的神韵。
当 Mark Davis 接手这些设计稿后,我们首先将其定位于一款用于标题、海报及其他大尺寸场景的显示字体,同时继续推进完整家族的开发工作。
传统印刷一直难以清晰呈现纤细的笔画与锐利的衬线,但如今的数字显示屏却能轻松驾驭高度精细的设计。我们希望这款新字体充分利用现代屏幕的优势,因此将所有竖笔画的粗细减半,并收紧字距,以将对比度推至极致。
每个衬线的一侧呈楔形,另一侧为弧线,既保证了经典的版式比例,在印刷品上同样美观;同时其结构经过全新优化,更适合数字设备的呈现。
从首个原型到今日
Geist Serif 的首个原型于 2026 年 4 月 1 日发布。以下是该原型中“Geist”一词的样貌,与当前正式发布的显示版本进行对比。
Geist 长出了牙齿
我们的目标是忠实于最初的设计初衷,即使字母相互叠加,也能保持衬线与无衬线之间的紧密联系。Geist Serif 的笔画宽度与 Geist Sans 完全一致,两者共享相同的字宽与字形姿态。
锯齿状的衬线与高对比度赋予了 Geist 编辑风格的独特气质。在绘制每一个字形的过程中,总有一个说法不断浮现:“Geist 长出了牙齿。”
四个家族,同一 x 高
Geist Serif 采用与 Geist Sans 相同的大写高度和 x 高,因此你可以直接将其融入任何使用 Geist 的排版中,无需调整行距。在同一句子里混用 Sans、Mono、Pixel 和 Serif,每个单词看起来都大小一致。
指标 | Geist Sans | Geist Serif |
|---|---|---|
UPM | 1000 | 1000 |
大写高度 | 710 | 710 |
x 高 | 530 | 530 |
升部 | 710 | 750 |
降部 | -150 | -200 |
四个变体,一个轴
与 Geist Pixel 类似,Geist Serif 也配备了一个可变轴,用于切换字体中每个点的形状,包括 i 和 j 上的点以及标点符号中的点。该轴名为“元素形状”(ELSH),提供四种变体:常规圆点(默认)、方形、三角形(向 Vercel 标志致敬)以及心形。
每种变体也都作为独立的静态文件提供。若使用可变字体,请通过 font-variation-settings 选择相应变体:
手工精制
七月份时,这款字体仅有 227 个字形。如今已增至 894 个,覆盖 352 种拉丁文字语言,并且我们处理了超过 5.2 万个字距调整对,以确保间距恰到好处。
有些细节极其微小,例如 g 的眼圈就精确倾斜了 7°。
规格速览
Geist Serif 包含:
- 1 个字重(常规)
- 4 个变体(常规、方形、三角形、心形)
- 894 个字形
- 5 个样式集(
ss01至ss05) - 352 种支持的语言
开始使用
Geist Serif 与该家族的其他成员一同打包发布:
导出与 CSS 变量:
GeistSerif(可变,所有形状):--font-geist-serifGeistSerifRegular:--font-geist-serif-regularGeistSerifSquare:--font-geist-serif-squareGeistSerifTriangle:--font-geist-serif-triangleGeistSerifHeart:--font-geist-serif-heart
每个变体都有各自的入口,因此你只需加载实际使用的字体文件。例如,在 layout.tsx 中使用 GeistSerifRegular:
你也可以下载字体文件、测试每一种样式集,并在 vercel.com/font 上逐字检视每个字形。
接下来是什么
本次发布的只是常规样式,其余家族成员也在紧锣密鼓地开发中。我们在构建当前版本的同时,也在测试未来的各个版本,因此这仅仅是个开始。
从细体到黑体的各字重
可变字体的字重范围将涵盖从细体(100)到黑体(900)。在本周的校样中,黑体中的 g 成为了我们反复端详的焦点。
迈向正文字体
为了探索正文版本,我们开发了一款铸造工具,能够测量笔画及其交汇处,并对显示字体的轮廓进行加粗处理。该工具直接编辑轮廓,使我们可以排布真实文本,从而判断哪些笔画需要加强力度。
斜体,逐条规则生成
我们还在开发一款完全基于 Python 的斜体。我们将现有的斜体重新调正为直立,并与对应的正体进行比对。去除倾斜角度后,两者之间的差异便清晰显现,我们据此提炼出可供测试与修订的规则。
这款斜体并非最终版本,但通过代码拆解字形,有助于我们更快地找到设计的边界。
更多字符集与 Google Fonts
西里尔字母的支持计划与 Geist Sans 和 Geist Mono 保持一致,Geist Serif 将在发布后上线 Google Fonts。
一个家族
凭借 Geist Sans、Geist Mono、Geist Pixel,以及如今的 Geist Serif,这个家族的覆盖范围从 UI 文本与代码延伸至富有表现力的显示字体,四者相得益彰,浑然一体。
下载 Geist Serif,立即开始创作吧。
感谢每一位让 Geist Serif 成为现实的人。
没有幕后这群杰出的伙伴,这一切都不可能实现。
特别感谢 Andrés Briganti,他与我共同开启了这段旅程,并绘制了最初的版本,成为后续一切的基础;也感谢 Mark Davis,他以近乎偏执的匠心将项目推向终点,从扩充的字形集、可变轴到每一个字距调整对,无不倾注心血。
此外还要感谢 Patrick McDonald 和 Marijana Pavlinić 提供的海报设计,感谢 Luis Gutierrez Rico 带来的动态效果与神奇创意,感谢 Christopher Kindl 整合并交付整个软件包,以及细致入微地重建着陆页,还有 Zahra Jabini 在协调与技术支持方面所做的贡献,让这一切得以完美呈现。
这是一次真正的团队协作,我很庆幸能与你们一起完成它。