出色的网站字体搭配，能让标题拥有清晰的声音，同时让段落、按钮、价格和导航都易于阅读。先从你要搭建的网站类型出发，再把一种字体分配给展示性文字（display text），另一种分配给辅助性文案。下面这 20 组组合按常见网站风格分类，是切实可用的起点。
先选搭配，再谈个性
字体搭配应当解决版式问题，而不只是营造氛围。标题字体需要足够的辨识度来建立层级（hierarchy）；正文字体则需要在长段落和小型界面标签中都保持沉稳。
在最终确定前，先做一遍快速评估：
- 把这组搭配放进一个真实页面：包含 H1、两个小标题、一个段落、一个按钮、一个表单标签和一条说明文字。
- 以你预期访客会使用的最小字号阅读正文。
- 检查数字、标点、全大写标签，以及网站需要的所有非英语文字。
- 在窄屏幕上查看页面。在大首屏里显得精致的搭配，到了手机上可能变得局促。
想获得更完整的决策框架，可以将下面的组合与这份字体搭配规则结合使用。
在从清单里挑选之前，不妨先了解自己的眼力有多敏锐：这份免费字体排印测验包含 12 道关于字体、字偶间距（kerning）和字体结构的题目，即时反馈，还会标出你容易漏看的对比。
四个可以并排比较的指标
争论品味毫无结果。把两组候选搭配放在同一个页面、用同样的文案比较，几分钟通常就能分出高下。值得做的四项比较：
| 比较项 | 怎么做 | 你要看什么 |
|---|---|---|
| 字号级差 | 用 H2 的像素字号除以正文的像素字号 | 一个肉眼可见的跳跃。许多网页版式落在 1.5 倍到 2 倍之间，但真正重要的不是数字，而是读者会不会先看到标题 |
| 渲染后的字重 | 按真实尺寸截图标题和正文，比较笔画粗细 | 不同字体家族对同一个数字字重的绘制并不相同，所以要相信渲染结果，而不是数字。一个家族的 Semibold 可能看起来比另一个家族的 Medium 还轻 |
| x 字高（x-height） | 把两种字体设为相同像素字号，比较小写字母的高度 | 相近的 x 字高会让两种字体像同一个系统。差距过大时，正文字体在标题旁边会显得缩水，通常需要调整字号 |
| 正文行高 | 用行框高度除以字号 | 网页上舒适的段落设置通常在 1.5 到 1.7 附近；较短的行长可以接受下限值 |
这些都不是及格线式的硬性规则。它们是"读起来顺"和"读起来不顺"的搭配之间变化最大的四个变量，所以当感觉不对劲时，这里是最快的排查入口。
SaaS 网站的字体搭配
SaaS 网站通常需要让密集信息可以快速扫读。克制的无衬线（sans-serif）正文字体，是功能文案、表单和产品界面的可靠选择。
| # | 标题字体 | 正文字体 | 最佳用途 |
|---|---|---|---|
| 1 | Space Grotesk | Inter | 产品大标题配简洁辅助文案 |
| 2 | Sora | Source Sans 3 | 精确又亲切的落地页 |
| 3 | Manrope | IBM Plex Sans | 技术型产品和 B2B 服务 |
| 4 | Archivo | Lato | 紧凑的功能区块和定价页 |
当品牌需要比单一中性无衬线字体更多的个性时，Space Grotesk 配 Inter 是一个实用的默认选择。把 Inter 用在导航、正文、表单和按钮上；Space Grotesk 只留给大标题和简短的功能标题。
Manrope 配 IBM Plex Sans 是这里最不起眼、却对文档密集型产品最有用的一组。Manrope 的圆润笔画末端让技术类标题不显冰冷，而 IBM Plex Sans 能承载 API 表格、代码注释和长篇参考页面，却不会喧宾夺主。可以试试：Manrope SemiBold 30px 的标题，配 IBM Plex Sans Regular 17px、行高 28px 的正文。
SaaS 首页要避免把标题字体用在每一个标签上。大标题与界面文案之间的视觉差异，本身就是层级的一部分。
作品集网站的字体搭配
作品集可以使用更有表现力的展示字体（display face），因为图片和项目标题承担了页面的大部分内容。但项目描述仍然需要一个中性的搭档。
| # | 标题字体 | 正文字体 | 最佳用途 |
|---|---|---|---|
| 5 | Playfair Display | Manrope | 艺术指导和个人品牌 |
| 6 | Cormorant Garamond | DM Sans | 摄影、时尚和创意工作室 |
| 7 | Fraunces | Work Sans | 插画师和温暖、个性主导的作品集 |
| 8 | Syne | Inter | 实验性数字与设计作品 |
Cormorant Garamond 配 DM Sans 会形成强烈对比：衬线字体（serif）让项目标题带有编辑气质，无衬线字体则让说明文字保持实用。衬线字体只用于短文本。整篇项目案例都用高对比度展示衬线字体排版，读起来会很疲劳。
试试这组设置：项目标题用 Cormorant Garamond SemiBold 44px、行高 50px；描述用 DM Sans Regular 16px、行高 26px；说明文字和图片来源用 DM Sans Medium 13px。
如果这款衬线字体已经是你视觉识别的一部分，可以查看更多 Cormorant Garamond 的搭配方案。
博客网站的字体搭配
博客读者与段落相处的时间远多于首屏区域。正文字体、行长、行高和对比度，比花哨的标题处理更重要。
| # | 标题字体 | 正文字体 | 最佳用途 |
|---|---|---|---|
| 9 | Lora | Source Sans 3 | 指南、解释型内容和个人随笔 |
| 10 | Merriweather | Open Sans | 实用型刊物和新闻邮件 |
| 11 | Libre Baskerville | Montserrat | 观点、分析和专家内容 |
| 12 | Spectral | Inter | 现代编辑类文章 |
Montserrat 特别适合文章元信息、导航和紧凑的段落标题。与更安静的衬线正文字体搭配时，它也可以充当大标题字体。想了解围绕这个家族的更多选项，可以比较这些 Montserrat 字体搭配。
文章栏宽保持舒适即可，不要过宽。读者应当不必横扫整个屏幕就能找到下一行。
电商网站的字体搭配
电商排版的任务很实际：让商品名称、价格、尺码、选项和配送信息一目了然。让摄影和留白去制造气氛；购买相关的细节保持直白。
| # | 标题字体 | 正文字体 | 最佳用途 |
|---|---|---|---|
| 13 | Poppins | Lato | 亲切的生活方式和家居用品店 |
| 14 | Cormorant Garamond | Montserrat | 时尚、美妆和高端零售 |
| 15 | Bebas Neue | Roboto | 运动、促销和活动主导的店铺 |
| 16 | DM Serif Display | Karla | 精选类专门店 |
Bebas Neue 最好节制使用，只用于活动大标题或促销横幅。把它用在尺码选择器、结算信息或商品规格上并不明智。Roboto 能为这些功能区域提供易读的基准。
试试这组设置：活动大标题用 Bebas Neue 56px、行高 58px；商品名称和价格用 Roboto Medium 16px；规格、配送说明和尺码表用 Roboto Regular 14px、行高 22px。
编辑风格网站的字体搭配
编辑类网站需要让大标题与文章"周边元素"（署名、日期、说明文字、导航）之间有明显差异。展示衬线字体加低调无衬线字体，是一个可靠的模式。
| # | 标题字体 | 正文字体 | 最佳用途 |
|---|---|---|---|
| 17 | Bodoni Moda | Public Sans | 时尚、文化和视觉杂志 |
| 18 | Newsreader | Figtree | 随笔和现代数字刊物 |
| 19 | DM Serif Display | IBM Plex Sans | 评论和分析类网站 |
| 20 | Libre Caslon Display | IBM Plex Sans | 特稿页面的"古典遇上现代"氛围 |
Newsreader 配 Figtree 是这份清单里最安静、也最容易长期相处的一组。Newsreader 是为屏幕阅读设计的，因此它可以同时承担大标题和文章正文，而不会像高对比度展示衬线字体那样在段落字号下引起疲劳；Figtree 则负责署名、日期、标签和导航。可以试试：大标题用 Newsreader Medium 34px，文章用 Newsreader Regular 19px、行高 32px，周边元素用 Figtree 14px。
Libre Caslon Display 这组搭配在大标题简短、周围界面保持简单时效果最好。不要把长长的归档标题、筛选器和卡片描述放进展示衬线字体。IBM Plex Sans 能处理这些元素而不争夺注意力。
用字号和字重建立层级，而不是增加字体
对大多数网站来说，两个字体家族就够了。很多情况下，一个家族的多个字重就足够。
标题字重要明显强于正文，但不必自动选择可用的最重字重。Black 或 ExtraBold 的 H1 可能适合简短的 SaaS 大标题；在编辑类版式中，Medium 或 SemiBold 往往看起来更平衡。
一套简单的层级可以是这样：
- H1：标题字体，大字号，足够有力的字重，行高紧凑但仍可读
- H2：同一标题字体，明显小于 H1
- 正文：正文字体，常规字重，行高宽裕
- 按钮和导航：正文字体，通常用 Medium 或 SemiBold
- 说明文字和元信息：正文字体，较小字号，保留足够对比度以保证可辨认
想看更多并排比较，可以使用这些字体搭配示例，再用真实内容测试你偏好的组合。
一套即取即用的 CSS 配置
这套配置用 Space Grotesk 做展示文字，用 Inter 做辅助文字。如果你选了别的组合，替换字体名称即可。
在 CSS 里声明字体家族并不会去下载它。如果没有发出字体请求，浏览器会沿着你声明的字体栈往下找，使用访客设备上已安装的第一个家族——如果一个都没有，就用平台的通用无衬线字体——于是页面渲染出来的不是你选的搭配，而且每台设备都不一样。先加载文件——对 Google Fonts 家族来说，最短的路径是在样式表最顶部、任何其他规则之前写一条 @import：
```css @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;600&display=swap");
:root { --font-heading: "Space Grotesk", "Segoe UI", Arial, sans-serif; --font-body: Inter, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.12; }
h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
nav a, button, .label { font-family: var(--font-body); font-weight: 600; } ```
@import 是最快捷的选项，但它会把字体请求推迟到样式表本身解析完成之后。在对性能敏感的网站上，应改为在文档 head 里放置样式表引用和 preconnect 预连接提示，或者用自己的 @font-face 规则自托管字体文件。无论选哪条路，display=swap 参数（或自托管规则中的 font-display: swap）都能在文件下载期间保持文字可见。
让请求与规则保持同步。上面的 import 恰好请求了样式表用到的四个字重：H1 用的 Space Grotesk 700 和 H2、H3 用的 600，正文用的 Inter 400 和导航、按钮、标签用的 600。真正有害的不匹配只有一个方向：CSS 里应用了某个字重、请求里却没有它，浏览器就只能近似模拟，通常是把最接近的可用字重合成加粗，效果比设计师绘制的轮廓粗糙。相反的情况危害较小，因为浏览器只在渲染文本需要时才会拉取字体文件，请求里多余的字重大多只是给样式表多加几条记录，而不是多下载字节。每次修改 font-weight，都要同步修改 import。
确定之前，先检查授权、字重和语言覆盖
本文点名的每个字体家族都通过 Google Fonts 发布，因此全部可以免费用于商业网站。上线前请在各家族自己的页面确认具体授权条款，尤其当你打算把字体文件再分发到出售的应用或模板里时。
三项实际检查，往往比审美更能决定一组搭配的取舍：
- 可用字重。 Inter、Manrope、Fraunces、Work Sans 这类可变字体（variable font）家族提供连续的字重范围，便于对层级做精细调整。Bebas Neue 这类只有单一字重的展示字体只给你一个选项，所有层级都必须靠字号和间距来实现。
- 语言覆盖。 上面表格中的每个家族都以拉丁字母为核心构建，但覆盖范围仍会在两个不同层面上变化。在拉丁字母内部，Latin Extended、越南语等子集（subset）补充了这些语言需要的重音字符，缺少它们的家族会在单词中途换用后备字体的字形。跨书写系统时，覆盖范围因家族而异，必须逐个字体核查：上面的若干家族（包括 Inter 和 IBM Plex Sans）自带希腊语和西里尔语子集，所以希腊语或俄语页面可以留在同一套设计里。中文、日文、韩文通常是断点，因为这些文字需要成千上万个字形，很少与拉丁字体家族捆绑发布——请准备在字体栈后追加一个配套家族，例如 Noto CJK 系列之一。确定搭配前先检查各家族提供的子集，永远不要假设一组拉丁搭配在第二种文字加入页面后依然成立。
- 数字和界面文字。 价格、时间戳、表格列和表单校验，正是正文字体证明自身价值的地方。在把一个家族用于任何需要按列对齐的内容之前，先确认它是否提供表格数字（tabular figures）。
准备好测试你对层级与对比的眼力了吗？做一做这份交互式字体排印测验——12 道关于字体、字偶间距和字体结构的题目——然后回到你的页面，指出哪种字体在承担展示工作，哪种在承担阅读负荷。
常见问题
一个网站应该用几种字体？
对大多数网站来说，两个家族就够了：一个用于标题，一个用于正文。一个家族的多个字重也能构成连贯的系统。
可以搭配两种无衬线字体吗？
可以。给它们分配不同的角色：标题用更有表现力或更几何化的无衬线字体，段落和界面文字用更安静、可读性极高的无衬线字体。
网站标题必须用衬线字体吗？
不必。衬线标题适合编辑类、奢侈品和有表现力的作品集；无衬线标题往往更适合软件产品、技术服务和以界面为主的页面。
什么样的字体搭配才算易读？
易读的搭配使用沉稳的正文字体、层级之间明确的字号差异、充足的行高，以及足够强的文字对比度。字体选择有帮助，但版式设置决定了大部分阅读体验。
结语
选择一组符合网站用途的搭配，然后在完整界面中测试它，而不是只看字体样张。有辨识度的标题吸引注意力；易读的正文让访客顺畅地读完页面。