Geist Serif

# 推出 Geist Serif Source: https://vercel.com/blog/introducing-geist-serif Geist 最初是一款为开发者打造的等宽字体，专为他们日常工作中使用的编辑器和终端而设计。随后它发展为用于产品界面的 Geist Sans，又推出了灵感源自早期计算机屏幕网格的 Geist Pixel。今天，我们为这一家族增添了一位新成员：[Geist Serif](https://vercel.com/font?type=serif)。 Geist Serif 海报 Geist Serif 海报 Geist Serif 海报 Geist Serif 是一款高对比度的展示型衬线字体，与 Geist Sans、Geist Mono 和 Geist Pixel 构建在相同的基础之上。它拥有精细的锯齿状衬线和锐利的细线，专为在物理世界和现代设备的高密度屏幕上都能有力地传达信息而设计。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#same-system,-new-voice) ](#same-system,-new-voice)同一系统，全新声音 在 Vercel，Geist Sans 驱动着产品。但在标题方面，我们希望拥有第二种声音——一种属于同一系统的声音，而不是从下拉菜单中随手挑来的陌生字体。许多科技品牌已经从简洁的无衬线体转向复古，以找回个性，而其中不少灵感来自早期的计算机广告。Geist Serif 则选择了不同的路径：走向时尚、编辑设计和杂志标题。这是我们向 ***Rolling Stone*** 和 ***Harper's Bazaar*** 背后艺术家们的致敬。从一开始，Geist 家族的每个成员就各取自一章字体历史：瑞士设计运动、早期终端和 DOS 计算，如今则是编辑印刷。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#display-first) ](#display-first)展示优先 Geist Serif 最初是一组由 [Evil Rabbit](https://x.com/evilrabbit_/status/1914863580463378628?a=zY4Pm6BNO72yL85AN9U&s=20) 绘制的草图，随后由 Andrés Briganti 进行了扩展。最初的字母已经展现出一种富有表现力的衬线风格，与 Victor Serif 和 Stanley 等字体精神相近。 Geist Serif 初稿 Geist Serif 初稿 Geist Serif 初稿 当 Mark Davis 接手绘制工作后，我们决定将首个版本定位为展示型字体，用于标题、海报及其他大尺寸场景，同时继续推进完整字族的开发。印刷一直难以完美呈现纤细的笔画和锐利的衬线，但今天的屏幕已经可以呈现极高的细节。我们希望新字体能够充分利用现代屏幕，因此将每一笔竖画减细了 50%，并收紧了侧边距，将对比度推向极致。每个衬线的一侧呈楔形、另一侧呈弧形，因此比例经典、在印刷中同样优美，但结构是全新的，专为数字设备而优化。 > 我们创造了一个只为当下而存在的东西。它不会为了十年前的屏幕而过于粗壮，也不会为了物理墨水而充满机械式的妥协。只是恰到好处的衬线。 Mark Davis WORDMARK 创始人兼字体设计师 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#from-the-first-prototype-to-today) ](#from-the-first-prototype-to-today)从第一个原型到今天 Geist Serif 的第一个原型于 2026 年 4 月 1 日分享。以下是同一个单词 "Geist" 在该原型中的样子，与今天发布的展示版绘制稿进行对比。 原始原型以虚线呈现 原始原型以虚线呈现 原始原型以虚线呈现 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#geist-grew-teeth) ](#geist-grew-teeth)Geist 长出了牙齿 目标是忠于最初的意图，让衬线体与无衬线体紧密关联，即使字母叠放在一起也能看出来。Geist Serif 的主干与 Geist Sans 相匹配，两者共享字宽和姿态。锯齿状的衬线和高对比度赋予了 Geist 一种编辑性的声音。在绘制每一个字符的过程中，有一句话反复出现："Geist 长出了牙齿。" ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#four-families,-one-x-height) ](#four-families,-one-x-height)四个字族，同一个 x-height Geist Serif 使用与 Geist Sans 相同的 cap height 和 x-height，因此你可以将它直接放入任何 Geist 布局中，无需调整行距。在同一个句子中混合使用 Sans、Mono、Pixel 和 Serif，每个词看起来都是相同的大小。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#four-variants,-one-axis) ](#four-variants,-one-axis)四种变体，一条轴线 与 Geist Pixel 类似，Geist Serif 也有一条可变轴线，可以切换字体中每一个圆点的形状，包括 *i*、*j* 上的点以及标点符号中的点。这条轴线名为 Element Shape（`ELSH`），提供四种变体：圆点（默认）、方块、三角形（向 Vercel logo 致意）和心形。每种变体也提供独立的静态文件。如果你使用可变字体，可以通过 `font-variation-settings` 选择一种变体： ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#crafted-by-hand) ](#crafted-by-hand)手工打磨 七月时字体包含 **227 个字形**，现在已经达到 **894 个**，覆盖 352 种拉丁字母语言，我们还检查了超过 52,000 组字距对来确保间距正确。其中一些细节非常精细。例如，字母 *g* 的字眼精确倾斜了 7°。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#specs-at-a-glance) ](#specs-at-a-glance)规格速览 Geist Serif 包含： - 1 个字重（Regular） - 4 种变体（Regular、Square、Triangle、Heart） - 894 个字形 - 5 个风格集（`ss01` 至 `ss05`） - 352 种支持的语言 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#getting-started) ](#getting-started)快速上手 Geist Serif 与家族其他成员一同发布在同一个包中： **导出名称与 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`： ```js import { GeistSerifRegular } from 'geist/font/serif/regular'; export default function RootLayout({ children }) { return ( <html lang="en"> <body className={GeistSerifRegular.variable}>{children}</body> </html> ); } ``` 你也可以在 [vercel.com/font](https://vercel.com/font?type=serif) 下载字体文件、测试每个风格集，并逐一查看每个字形。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#what%E2%80%99s-next) ](#whats-next)接下来 Regular 是我们发布的第一个样式，字族的其余部分已在开发中。我们在构建这一版本的同时也在测试未来的版本，所以这次发布只是一个开始。 ### [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#weights-from-thin-to-black) ](#weights-from-thin-to-black)从 Thin 到 Black 的字重 可变字体将从 Thin（100）到 Black（900）。在本周的打样中，Black 字重中的字母 *g* 是我们忍不住反复注视的那个。 ### [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#toward-a-text-face) ](#toward-a-text-face)迈向正文字体 为了探索正文字体版本，我们构建了一款铸造厂工具，可以测量笔画——包括笔画交汇处——并加粗展示型的轮廓。它直接编辑轮廓，因此我们可以排入真实文本，看看哪些笔画需要增加粗度。 ### [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#italics,-built-rule-by-rule) ](#italics,-built-rule-by-rule)逐条规则构建的斜体 我们还在开发一款完全用 Python 生成的斜体。我们将现有的斜体回正后与正体进行比较。去除倾斜角度后，剩余的差异就清晰地显现出来，我们将它们转化为可以测试和修订的规则。这款斜体不会是最终版本，但在代码中拆解字形有助于我们更快地找到极限。 ### [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#more-scripts-and-google-fonts) ](#more-scripts-and-google-fonts)更多文字系统与 Google Fonts 西里尔字母支持计划与 Geist Sans 和 Geist Mono 对齐，Geist Serif 将在发布后上线 Google Fonts。 ## [复制标题链接 (https://vercel.com/blog/introducing-geist-serif#one-family) ](#one-family)一个字族 有了 Geist Sans、Geist Mono、Geist Pixel，以及现在的 Geist Serif，这个家族从 UI 文本和代码一路覆盖到富有表现力的展示型字体，四款字体在一起搭配得天衣无缝。 [下载 Geist Serif](https://vercel.com/font?type=serif)，开始构建吧。 **感谢每一位让 Geist Serif 得以实现的人。** 没有背后这个不可思议的团队，这一切都不可能完成。特别感谢 [Andrés Briganti](https://x.com/ambriganti) 与我一起开启这段旅程，并绘制了第一版——后续一切都由此生长而来；感谢 [Mark Davis](https://x.com/MarkFonts) 以极致的工艺将它带到终点——从扩展字形集和可变轴到每一个字距对。也要感谢 [Patrick McDonald](https://x.com/PatrickAltair) 和 [Marijana Pavlinić](https://x.com/marijanapav) 的海报设计，[Luis Gutierrez Rico](https://x.com/luisgurico) 的动效和令人惊叹的魔法，[Christopher Kindl](https://x.com/kindlaar) 打包发布并将落地页重建到每一个最微小的细节，以及 [Zahra Jabini](https://x.com/ZeeJab) 的协调和技术支持，将一切整合在一起。这是一次真正的团队协作，我很荣幸能与你们共同完成。