Geist Serif 做大标题,Geist Sans 做正文和界面。 可以先从桌面标题 64px、正文 18px 开始;窄屏尝试标题 40px、正文 17px。上方三组原创样板保留同一对字体,用层级和间距表现不同用途,方便比较。
先选用途,再加字体
| 用途 | 标题 | 正文 | 起始行宽 |
|---|---|---|---|
| 编辑与刊物导语 | Serif 64px / 1.05 | Sans 18px / 1.65 | 58 个拉丁字符 |
| 产品公告 | Serif 56px / 1.08 | Sans 18px / 1.6 | 48 个拉丁字符 |
| 工作室项目页 | Serif 72px / 1.02 | Sans 17px / 1.7 | 56 个拉丁字符 |
这些是排版起点,不是阅读效果实验结论。三组都采用同一搭配,比较的是布局。确定方案前,请换成自己的最长标题和完整正文。
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。字体加载时可以回退,但验收时应确认实际字体已加载。
这些是拉丁文本样板,不能据此推断中文覆盖或中文排版效果。中英混排请另外选择支持中文的字体,并使用真实中文段落检查。
五分钟检查
- 换成真实标题、最长按钮和完整段落。
- 比较桌面与 390px 视口,检查换行和横向溢出。
- 在浏览器网络面板确认两个字体文件成功加载。
- 正常缩放阅读最小标签,密集小字不要使用展示衬线。
- 手机标题与正文都合适后,再保存 CSS。
继续阅读字体搭配规则,或对照 Instrument Serif 搭配。