返回文章 apply CMS 文章

Vercel 发布 Geist Serif：为标题而生的高对比度展示衬线体

Geist Serif 是 Geist 家族中面向展示场景的衬线体，与 Sans、Mono、Pixel 共享同一系统。

VERCEL

Geist SerifVercel字体设计衬线体

成长分 / 100 72 综合收获、行动、留存与影响

为什么值得读了解 Vercel 设计团队如何从零构建一款与现有字体系统无缝协作的展示衬线体。

获取 Geist Serif 的技术规格、变体轴和安装使用方式，便于在项目中快速集成。

关键洞察

Geist Serif 与 Geist Sans 共享相同的 cap height 和 x-height，可混排而不改变行高。
字体具有高对比度、细锯齿衬线和锐利发丝线，专为现代高密度屏幕优化。
通过 Element Shape (ELSH) 可变轴提供四种变体：Regular（圆点）、Square、Triangle、Heart。

转成行动

深入阅读

正文与原文对照

原文保真覆盖：全文原文字符：8867

Geist 最初是一款为开发者打造等宽字体，专为他们日常工作中使用的编辑器和终端而设计。此后，它发展出用于产品界面的 Geist Sans，接着又推出了受早期计算机屏幕网格启发的 Geist Pixel。

今天，我们为这个家族增添了一位新成员：Geist Serif。

Geist Serif 海报

Geist Serif 是一款高对比度的展示衬线字体，与 Geist Sans、Geist Mono 和 Geist Pixel 建立在相同的基础之上。它拥有精细的锯齿状衬线和锐利的细线，旨在在物理世界和现代设备的高密度屏幕上都能有力地传达信息。

同一系统，全新声音

在 Vercel，Geist Sans 驱动着产品。然而对于标题，我们想要第二种声音，一种属于同一系统的声音，而不是从下拉菜单中随便挑选的陌生字体。

许多科技品牌已经不再使用简洁的无衬线字体，以找回一些个性，其中不少借鉴了复古电脑广告。Geist Serif 走了一条不同的路：朝向时尚、编辑设计和杂志标题。这是我们向 Rolling Stone 和 Harper's Bazaar 背后的艺术家们致敬。

从一开始，每个 Geist 家族都源自字体历史的一个篇章：瑞士设计运动、早期终端和 DOS 计算，以及现在的编辑印刷。

展示优先

Geist Serif 始于 Evil Rabbit 的一组草图，随后由 Andrés Briganti 扩展。最初的字母已经展现出富有表现力的衬线，其精神类似于 Victor Serif 和 Stanley 等字体。

Geist Serif 原始绘图

当 Mark Davis 接手绘图工作时，我们将首个版本做成了用于标题、海报和其他大尺寸的展示字体，同时继续开发完整的家族。印刷一直难以承载精细的细线和锐利的衬线，但今天的显示器能够处理高水平的细节。我们希望新字体能充分利用现代屏幕，因此我们将每个下笔画的粗细减少了 50%，并收紧了侧边距，以将对比度推到极致。

每个衬线一侧是楔形，另一侧是曲线，因此比例古典，在印刷中看起来很美，但构造是全新的，并针对数字设备进行了优化。

我们创造了一些只能为今天而生的东西。不过分厚重以适应十年前的屏幕，也不为物理墨水而充满机械妥协。只是完美点位的衬线。

Mark Davis，WORDMARK 创始人 & 字体设计师

从第一个原型到今天

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 种拉丁文字语言，我们处理了超过 52,000 个字距对以调整好间距。有些细节非常微小。例如，g 的眼睛正好倾斜 7°。

规格一览

Geist Serif 附带：

1 个字重（常规）
4 个变体（常规、方形、三角形、心形）
894 个字形
5 个样式集（ss01 到 ss05）
支持 352 种语言

开始使用

Geist Serif 与家族其他成员在同一个包中发布：

终端

npm i geist

导出和 CSS 变量：

GeistSerif（可变，所有形状）：--font-geist-serif
GeistSerifRegular：--font-geist-serif-regular
GeistSerifSquare：--font-geist-serif-square
GeistSerifTriangle：--font-geist-serif-triangle
GeistSerifHeart：--font-geist-serif-heart

每个都有自己的入口点，因此你只需发布使用的字体文件。例如，在 layout.tsx 中使用 GeistSerifRegular：

import { GeistSerifRegular } from 'geist/font/serif/regular'; 

export default function RootLayout({ children }) { 
  return ( 
      <html lang="en" className={GeistSerifRegular.variable}> 
           <body>{children}</body> 
     </html>
 ); 
}

你也可以在 vercel.com/font 下载字体文件、测试每个样式集并检查每个字形。

下一步

Regular 是我们发布的第一种样式，该字体家族的其余部分已在开发中。我们在构建这一版本的同时也在测试未来的版本，因此本次发布只是开始。

从 Thin 到 Black 的字重

可变字体将覆盖从 Thin（100）到 Black（900）的范围。在本周的样张中，Black 字重里的字母 g 是我们忍不住反复端详的那个字母。

迈向正文字体

为了探索正文版本，我们构建了一个字体铸造工具，用于测量笔画（包括笔画相交之处），并加粗展示字体的轮廓。它直接编辑轮廓，因此我们可以排布真实单词，并查看哪些笔画需要增加字重。

斜体，逐条规则构建

我们还在开发一款完全用 Python 生成的斜体。我们将现有斜体回正，并与对应的正体进行比较。去除倾斜角度后，剩余的差异便清晰显现，我们将其转化为可测试和修订的规则。这款斜体不会是最终版本，但在代码中拆解字形能帮助我们更快地找到边界。

一个家族

凭借 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 的协调与技术支持，将这一切汇聚在一起。这是一次真正的团队努力，我很感激能与你们所有人共同打造它。

贡献者

Eric Dodds