Introducing Geist Serif

介绍 Geist Serif - Vercel

Geist 最初是为开发者设计的等宽字体，专为他们日常工作的编辑器和终端界面打造。随后它扩展为用于产品界面的 Geist Sans，再进一步发展为受早期计算机屏幕网格启发的 Geist Pixel。

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

Geist Serif 海报

Geist Serif 是一款基于与 Geist Sans、Geist Mono 和 Geist Pixel 相同基础构建的高对比度显示衬线体。它拥有精细的锯齿状衬线和锐利的发丝线，设计目的是在物理世界和现代设备的高密度屏幕上都能强有力地传递信息。

复制链接到标题：同一系统，新的声音

在 Vercel，Geist Sans 是产品界面的核心字体。但为了标题，我们希望拥有第二种声音——一种属于同一系统的声音，而不是从下拉菜单中随机挑选的陌生字体。

许多科技品牌已逐渐远离干净的无衬线字体，以重新找回个性，而其中很多品牌借鉴了复古计算机广告的风格。Geist Serif 选择了另一条道路：走向时尚、编辑设计和杂志标题。这是我们对《滚石》和《哈珀的芭莎》等杂志背后艺术家的致敬。

从一开始，每个 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

大写字母高度

710

x 高度

530

升部

750

降部

-150

-200

复制链接到标题 四种变体，一个轴

与 Geist Pixel 类似，Geist Serif 也拥有一个可变轴，可以切换字体中每个点的形状，包括字母 i 和 j 以及标点符号中的点。该轴称为 Element Shape（ELSH），可提供四种变体：默认的圆点（Regular）、方点（Square）、三角点（Triangle，致敬 Vercel 标志）和心形点（Heart）。

每种变体也以独立的静态文件形式提供。如果使用可变字体，请通过 font-variation-settings 选择变体：

$?

/$

复制链接到标题 手工打造

7 月份该字体包含 227 个字形，目前已扩展至 894 个，覆盖 352 种拉丁文字语言。我们通过调整超过 52,000 对字距对来优化间距。一些细节非常微妙，例如字母 g 的眼睛倾斜角度精确为 7°。

复制链接到标题 一目了然的规格

Geist Serif 包含：

• 1 种字重（Regular）
• 4 种变体（Regular、Square、Triangle、Heart）
• 894 个字形
• 5 套样式集（ss01 至 ss05）
• 支持 352 种语言

复制链接到标题 入门指南

Geist Serif 与家族中其他字体一起打包提供：

terminal

1
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：

1
import
{
GeistSerifRegular
}
from
'geist/font/serif/regular'
;
2
3
export
default
function
RootLayout
(
{
children
}
)
{
4
return
(
5
<
html
lang
=
"
en
"
className
=
{
GeistSerifRegular
.
variable
}
>
6
<
body
>
{
children
}
</
body
>
7
</
html
>
8
)
;
9
}

您也可以从 vercel.com/font 下载字体文件，测试所有样式集，并检查每个字形。

复制链接到标题 后续计划

Regular 是我们首先发布的样式，家族中其他字体的开发工作已经展开。在开发此版本的同时，我们也在测试未来的版本，因此此次发布只是一个开端。

复制链接到标题 从纤细到粗黑的字重

可变字体的字重范围将从纤细（100）到粗黑（900）。在本周的样稿中，Black 字重中的字母 g 是我们反复关注的焦点。

复制链接到标题 探索文本字形

为了探索文本版本，我们开发了一款铸造工具，用于测量笔画（包括笔画交汇处），并加粗显示轮廓。该工具直接编辑轮廓，使我们能够设置真实文字并观察哪些笔画需要增加粗细。

复制链接到标题 按规则构建斜体

我们还在使用 Python 开发完全生成的斜体。我们将现有斜体还原为直立状态，并与它们的罗马体进行比较。去除角度后，剩余的差异变得清晰可见，我们将其转化为可测试和修改的规则。此斜体不会是最终版本，但通过代码拆分字形有助于我们更快找到极限。

复制链接到标题 更多脚本和 Google Fonts

西里尔文支持计划与 Geist Sans 和 Geist Mono 保持一致，Geist Serif 在发布后将加入 Google Fonts。

复制链接到标题 一个字体家族

凭借 Geist Sans、Geist Mono、Geist Pixel 和如今的 Geist Serif，这个字体家族从用户界面文本和代码延伸到富有表现力的展示字体，四种字体风格和谐共存。

立即下载 Geist Serif 开始构建。

感谢所有让 Geist Serif 成为可能的人。

没有幕后这群杰出的人，这一切都不可能实现。

特别感谢 Andrés Briganti 与我共同开启这段旅程，并绘制了最初版本，所有后续设计都由此发源；感谢 Mark Davis 以执着的匠心将项目推向终点，从扩展的字形集合和可变轴到每一个最后的字距对都倾注了心血。感谢 Patrick McDonald 和 Marijana Pavlinić 的海报设计，感谢 Luis Gutierrez Rico 的动画制作和非凡创意，感谢 Christopher Kindl 从最小细节重新构建落地页并完成打包发布，感谢 Zahra Jabini 的协调工作和技术支持，将所有元素完美整合。这是一次真正的团队合作，我很感激能与各位共同完成这个项目。

贡献者

Eric Dodds