Geist Serif 字体搭配:与 Geist Sans 的三种排版

更新于 2026-11-02

三组真实排版:Geist Serif + Geist Sans

原创拉丁文本设计样板,不是真实产品截图。同一对字体展示三种层级。使用官方本地文件:Serif Regular 400,Sans 400 与 500。中文说明沿用站点字体。

编辑与刊物导语 · 64px / 40px · Sans 18px

THE READING ROOM / ISSUE 01

Make room for a different perspective.

A good introduction gives one idea enough room to become clear. Begin with the question, explain why it matters, and invite the reader to keep going.

CSS 配方
/* Load the official files with @font-face first. Keep OFL.txt. */
.title { font-family: "Geist Serif", serif; font-weight: 400; font-synthesis: none; font-size: 64px; line-height: 1.05; letter-spacing: -.015em; overflow-wrap: anywhere; }
.body { font-family: "Geist Sans", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.65; max-width: 58ch; }
@media (max-width: 600px) { .title { font-size: 40px; } .body { font-size: 17px; } }
产品公告 · 56px / 38px · Sans 18px

INTRODUCING / THE NOTEBOOK

A calmer place to build your next idea.

Collect your notes, choose the next useful step, and keep the details close. One clear workspace helps the project move forward.

Explore the notebook →
CSS 配方
/* Load the official files with @font-face first. Keep OFL.txt. */
.title { font-family: "Geist Serif", serif; font-weight: 400; font-synthesis: none; font-size: 56px; line-height: 1.08; letter-spacing: -.015em; overflow-wrap: anywhere; }
.body { font-family: "Geist Sans", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; max-width: 48ch; }
@media (max-width: 600px) { .title { font-size: 38px; } .body { font-size: 17px; } }
工作室项目页 · 72px / 44px · Sans 17px

PROJECT 03 / BRAND & EDITORIAL

Small spaces. Lasting impressions.

A visual identity for a neighborhood reading room. The project brings a quiet palette, thoughtful signage, and an open invitation to spend a little more time with a book.

CSS 配方
/* Load the official files with @font-face first. Keep OFL.txt. */
.title { font-family: "Geist Serif", serif; font-weight: 400; font-synthesis: none; font-size: 72px; line-height: 1.02; letter-spacing: -.015em; overflow-wrap: anywhere; }
.body { font-family: "Geist Sans", sans-serif; font-weight: 400; font-size: 17px; line-height: 1.7; max-width: 56ch; }
@media (max-width: 600px) { .title { font-size: 44px; } .body { font-size: 17px; } }

官方字体来源 · OFL 1.1

Geist Serif 做大标题,Geist Sans 做正文和界面。 可以先从桌面标题 64px、正文 18px 开始;窄屏尝试标题 40px、正文 17px。上方三组原创样板保留同一对字体,用层级和间距表现不同用途,方便比较。

先选用途,再加字体

用途标题正文起始行宽
编辑与刊物导语Serif 64px / 1.05Sans 18px / 1.6558 个拉丁字符
产品公告Serif 56px / 1.08Sans 18px / 1.648 个拉丁字符
工作室项目页Serif 72px / 1.02Sans 17px / 1.756 个拉丁字符

这些是排版起点,不是阅读效果实验结论。三组都采用同一搭配,比较的是布局。确定方案前,请换成自己的最长标题和完整正文。

1. 编辑排版:给标题留空间

第一组适合刊物首页或简报导语。Serif 负责表达主题,Sans 承担摘要和阅读。控制标题长度,避免为了塞进一行而把整个版面缩小。

在 390px 窄屏可从 40px 标题开始,保留左右留白。换行不好时先改措辞或略减字号,不要把桌面的强制换行带到所有手机上。正文左对齐,用完整段落判断密度。

2. 产品公告:让表达和操作各司其职

第二组用 Serif 表达一句主张,说明与按钮使用 Sans。导航、表单、价格和小标签也交给 Sans,确保读者能快速找到下一步。

只放一个简短行动按钮,再测试较长文字和翻译后的宽度。不要给当前 Regular 衬线字体合成粗体;用字号、间距或 Sans 标签建立强调。

3. 工作室项目:用尺度建立层级

第三组让项目名称成为焦点,编号、分类和较长说明保持克制。桌面可从 72px、手机从 44px 开始。项目元信息用 Sans,方便扫读。

每节都使用巨大 Serif 会削弱节奏。将它留给项目主标题,过程和规格使用较小 Sans 小标题。内容变密时需要重新调整。

当前版本支持什么

Vercel 2026 年 10 月 30 日公告将它定位为展示字体。首发只有 Regular 字重和四种圆点形状变体,4 月 1 日已有原型。更多字重、斜体和正文版本仍是后续计划,本页样板不依赖这些功能。

官方仓库提供 OFL 1.1 许可,且说明 Serif 尚未加入 Google Fonts。样板使用官方本地文件,不把回退字体当作预览。分发字体时保留许可文件。

把 CSS 用到自己的页面

从官方来源取得字体并保留许可,按每组配方修改本地路径。标题使用实际 Regular,不合成粗体或斜体;正文使用 Geist Sans。字体加载时可以回退,但验收时应确认实际字体已加载。

这些是拉丁文本样板,不能据此推断中文覆盖或中文排版效果。中英混排请另外选择支持中文的字体,并使用真实中文段落检查。

五分钟检查

  1. 换成真实标题、最长按钮和完整段落。
  2. 比较桌面与 390px 视口,检查换行和横向溢出。
  3. 在浏览器网络面板确认两个字体文件成功加载。
  4. 正常缩放阅读最小标签,密集小字不要使用展示衬线。
  5. 手机标题与正文都合适后,再保存 CSS。

继续阅读字体搭配规则,或对照 Instrument Serif 搭配。

配套互动测验

喵学堂的免费互动测验把这些概念变成随手小测,每题都有人话解析。

看看所有测验

想边学边练,不只是读?

注册后可以用互动课程边学边练,成绩、错题本和学习进度都会自动保存。

免费注册