跳到主要内容

在线字体搭配生成器:50+ 套精选 Google Fonts 标题正文组合

字体搭配生成器,50+ 套精选 Google Fonts 标题 + 正文搭配,实时预览,分类筛选,导出 CSS。

  • 本地处理
  • 分类 颜色设计
  • 适合 把视觉想法转成可复用的颜色值。
风格
用途
共 56 套

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Playfair Display
正文字: Source Sans 3
Medium 早期同款 —— 高对比衬线标题 + 温暖人文无衬线正文。
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Lora
正文字: Open Sans
长阅读经典款 —— Lora 标题像报纸社论,Open Sans 正文耐看。
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Open+Sans:wght@400&display=swap');

body {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Merriweather
正文字: Montserrat
个人博客最常见的 Google Fonts 搭配之一,对比强、暖色调。
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Montserrat:wght@400&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Cormorant Garamond
正文字: Montserrat
婚礼 / 时尚 / 高端品牌常用,Cormorant 有 Garamond 的舒展感。
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Montserrat:wght@400&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Libre Baskerville
正文字: Source Sans 3
现代开源版 Baskerville,有"杂志品质"的可信感。
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Crimson Text
正文字: Work Sans
Crimson Text 模仿旧式书籍排版,适合长文。
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@700&family=Work+Sans:wght@400&display=swap');

body {
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: EB Garamond
正文字: Lato
EB Garamond 是 Wikipedia 优先采用的衬线,配 Lato 的人文无衬线很自然。
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@700&family=Lato:wght@400&display=swap');

body {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Spectral
正文字: Inter
Spectral 是 Production Type 给 Google Docs 设计的阅读衬线,正文很顺。
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@600&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Bitter
正文字: Rubik
板状衬线标题 + 几何人文正文,温和略带复古。
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700&family=Rubik:wght@400&display=swap');

body {
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: PT Serif
正文字: PT Sans
ParaType 同设计师出品,字间距和比例天然和谐。
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&family=PT+Sans:wght@400&display=swap');

body {
  font-family: 'PT Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Inter
正文字: Inter
Stripe / Linear / 无数 SaaS 后台同款,Inter 是 2024 年的安全默认。
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Manrope
正文字: Manrope
更几何感的 Inter,字腔更开、收笔更圆,2023 年创业公司落地页风。
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');

body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: DM Sans
正文字: DM Sans
DeepMind 委托设计的无衬线,比 Inter 暖,边角略带手写感。
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');

body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Plus Jakarta Sans
正文字: Plus Jakarta Sans
2023 年的新宠,比 Inter 个性强一点,但依然中性。
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Space Grotesk
正文字: Inter
科技杂志感 —— Space Grotesk 略带等宽的标题 + Inter 中性正文。
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Archivo
正文字: Archivo
阿根廷无衬线,标题宽阔自信,正文同款保持系统统一。
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800&display=swap');

body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Oswald
正文字: Source Sans 3
压缩体标题 + 中性正文,网页版的杂志报头感。
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Bebas Neue
正文字: Montserrat
全大写高瘦展示标题 + 干净几何正文,潮牌 / 服饰常用。
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&family=Montserrat:wght@400&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Poppins
正文字: Roboto
Poppins 几何圆润标题 + Roboto 实用主义正文,亲切现代。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Raleway
正文字: Roboto
Raleway 标志性纤细 "W" 字母,优雅标题 + 中性 Roboto 正文。
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Nunito
正文字: Nunito Sans
圆角收笔 —— 亲切友好,常见于亲子 / 教育 / 健康类 App。
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Nunito+Sans:wght@400&display=swap');

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Abril Fatface
正文字: Lato
Abril 超粗衬线像杂志封面 —— 配 Lato 中性正文。
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400&family=Lato:wght@400&display=swap');

body {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Fraunces
正文字: Inter
Fraunces 是带光学字号的"软衬线",现代刊物感。
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Big Shoulders Display
正文字: Roboto
芝加哥设计系统展示字 —— 醒目压缩,带公共感。
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Big Shoulders Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Unbounded
正文字: Inter
加宽展示标题 —— 2024 年 Web3 / AI 创业公司标配。
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Syne
正文字: Inter
酷感可变展示字,创意工作室 / 设计师作品集常用。
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Archivo Black
正文字: Roboto
超粗单字重标题 + 中性正文,体育 / 新闻 / SaaS 落地页。
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo Black', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Anton
正文字: Roboto
超压缩展示字,广告牌 / 海报风。
@import url('https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Rozha One
正文字: Poppins
受天城文启发的拉丁展示字,大字号下尤其漂亮。
@import url('https://fonts.googleapis.com/css2?family=Rozha+One:wght@400&family=Poppins:wght@400&display=swap');

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rozha One', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Old Standard TT
正文字: Lato
Old Standard TT 模仿 1910 年代学术排版,学院风克制。
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:wght@700&family=Lato:wght@400&display=swap');

body {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Cinzel
正文字: Lato
罗马碑文风展示字,高端 / 水疗 / 婚礼。
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Lato:wght@400&display=swap');

body {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Caveat
正文字: Nunito
Caveat 手写感标题 + Nunito 圆角正文,有温度。
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Nunito:wght@400&display=swap');

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Caveat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Pacifico
正文字: Quicksand
复古笔刷草书 + 柔和几何正文,烘焙 / 亲子 / 生活方式。
@import url('https://fonts.googleapis.com/css2?family=Pacifico:wght@400&family=Quicksand:wght@400&display=swap');

body {
  font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Pacifico', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Fredoka
正文字: Nunito
圆胖标题,亲子产品 / 亲切感 SaaS。
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600&family=Nunito:wght@400&display=swap');

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: JetBrains Mono
正文字: Inter
开发者工具落地页常见,JetBrains Mono 作为"我们写代码"的信号。
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Space Mono
正文字: Space Grotesk
同超字族 —— Space Mono 标题 + Space Grotesk 正文,天然和谐。
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&family=Space+Grotesk:wght@400&display=swap');

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: IBM Plex Mono
正文字: IBM Plex Sans
IBM 自家超字族,等宽 / 无衬线 / 衬线天然成套。
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=IBM+Plex+Sans:wght@400&display=swap');

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Fira Code
正文字: Fira Sans
Mozilla 的 Fira 字族 —— Code 标题展示连字,Sans 正文耐用。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@600&family=Fira+Sans:wght@400&display=swap');

body {
  font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Roboto Mono
正文字: Roboto
Google Roboto 超字族,库里最稳的 mono + sans 搭配。
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Libre Caslon Text
正文字: Libre Franklin
Caslon 与 Franklin Gothic 的开源复刻,经典美式排版。
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@700&family=Libre+Franklin:wght@400&display=swap');

body {
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Cardo
正文字: Source Sans 3
Cardo 为古典 / 圣经研究设计的学术衬线,配 Source Sans 干净。
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@700&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cardo', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Gentium Plus
正文字: Source Sans 3
Gentium 覆盖广泛拉丁字符,适合多语言刊物站。
@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:wght@700&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gentium Plus', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Noto Serif
正文字: Noto Sans
Google "no tofu" 项目,网络上最齐全的多文字系统覆盖。
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Noto+Sans:wght@400&display=swap');

body {
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Tenor Sans
正文字: Source Sans 3
加宽优雅大写做产品名 + 干净正文做描述。
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans:wght@400&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Tenor Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Josefin Sans
正文字: Montserrat
1930 年代几何感,复古精品 / 咖啡馆 / 健康。
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Montserrat:wght@400&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Amiri
正文字: Source Sans 3
Amiri 覆盖拉丁 + 阿拉伯,适合中东双语站。
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Source+Sans+3:wght@400&display=swap');

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Amiri', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Alegreya
正文字: Alegreya Sans
同设计师设计的超字族 —— Alegreya 衬线 + Sans 比例同源。
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@700&family=Alegreya+Sans:wght@400&display=swap');

body {
  font-family: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Karla
正文字: Karla
Karla 的小刺收笔有性格不喧闹,低调独特。
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@700&display=swap');

body {
  font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Public Sans
正文字: Public Sans
美国政府网页设计系统默认字,中性 / 无障碍 / 公共感。
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@700&display=swap');

body {
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Lexend
正文字: Lexend
专为阅读流畅性设计,实测提升阅读速度。
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@700&display=swap');

body {
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Urbanist
正文字: Urbanist
几何人文风,免费的 Futura 替代品。
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@700&display=swap');

body {
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Epilogue
正文字: Inter
Epilogue 宽大写标题 + Inter 正文,2024 年创业落地页风。
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@700&family=Inter:wght@400&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Noto Serif SC
正文字: Noto Sans SC
思源宋体 + 思源黑体 (Noto 发布版),CJK 刊物事实标准。
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Noto+Sans+SC:wght@400&display=swap');

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif;
  font-weight: 700;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Ma Shan Zheng
正文字: Noto Sans SC
毛笔书法风中文标题 + 思源黑正文,有书写温度。
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng:wght@400&family=Noto+Sans+SC:wght@400&display=swap');

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ma Shan Zheng', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: ZCOOL KuaiLe
正文字: Noto Sans SC
站酷快乐体活泼标题 + 思源黑正文,常用于营销页。
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe:wght@400&family=Noto+Sans+SC:wght@400&display=swap');

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif;
  font-weight: 400;
}

排版是文字看得见的声音

挑一对在同一个房间里听起来对劲的标题字和正文字,网页读起来才会像被认真排过版的样子,而不是堆在一起的纯文本。

标题字: Long Cang
正文字: Noto Serif SC
龙藏书法展示字 + 思源宋正文,有传统感且可读。
@import url('https://fonts.googleapis.com/css2?family=Long+Cang:wght@400&family=Noto+Serif+SC:wght@400&display=swap');

body {
  font-family: 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Long Cang', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Georgia, serif;
  font-weight: 400;
}

这个工具能做什么

一个精挑细选的字体搭配库,收录 50+ 套经过真实项目验证的"标题字 + 正文字"组合,来源全部为公开可查的成熟设计系统:Medium、Stripe、 Vercel、Apple Newsroom、纽约时报、GitHub、Notion,以及 Typewolf、 Fonts In Use、Google Fonts 团队推荐的经典搭配。每套搭配都通过 Google Fonts 实时加载真字体渲染,不是截图占位,可以直接换样张文字、 切换标题字号、切换深色模式预览。支持按风格筛选:现代 (modern)、 经典 (classic)、优雅 (elegant)、活泼 (playful)、编辑刊物 (editorial)、等宽 (mono)、中日韩 (CJK),也支持按用途筛选:博客、 作品集、电商、品牌、刊物。专门收录 4 套中文搭配,包括思源宋 + 思源 黑 (双语站标配)、站酷快乐体 + 思源黑 (营销页常用),适合做中文或中 英双语站。每套搭配一键导出 CSS:包含 Google Fonts 的 @import 链接 和 body / h1 两条样式规则,贴进样式表即可用。不要注册、不要追踪, 所有搭配都是人手筛选,不是 LLM 现编的"截图好看但上线丑"的组合。 适合落地页选字、被 system-ui 卡住的程序员、想让博客读起来有人味 的内容创作者。

工具细节

输入
文本
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
免账号使用
打开页面即可使用；刷新后是否保留结果取决于具体工具。
性能预算
首屏 JS ≤ 25 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
颜色设计 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

字体搭配生成器 适合怎么用

适合在真实界面工作中选色、查色、转色值或整理配色。

适合颜色任务

  • 把视觉想法转成可复用的颜色值。
  • 界面上线前检查对比度和可访问性。
  • 让品牌、设计和前端实现的颜色决策对齐。

颜色检查项

  • 对比度要按真实背景检查,不要只看色块。
  • 有深浅主题时,两套都要单独看。
  • 复制设计系统或代码库真正需要的格式。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 HTML 颜色代码表 HTML 颜色代码表:147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。 打开
  2. 2 CSS 渐变生成器 可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。 打开
  3. 3 颜色格式转换 HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转:实时色板 + 对比度,浏览器本地 打开

真实使用场景

  • 落地页上线前,把 system-ui 占位字换成真排版

    为了赶 deadline,你的营销页一直挂着 `font-family: system-ui`, 读起来像没做完的后台。筛到现代 + 品牌那组,挑 Inter Display 标题配 Inter 正文,或者 Geist 配 Geist Mono,把两条 CSS 规则连同 `@import` 复制走,五分钟内整页就有了被人art-directed过的样子,你一本字体目录 都不用翻。

  • 给长文博客挑一套衬线标题配无衬线正文

    你写动辄 1500 字的文章,想读起来像 Substack 而不是 wiki。把样张文字 换成你自己的一段真内容,在刊物风那几套里翻 (Lora + Open Sans、 Source Serif + Source Sans),按你实际上线的 16px 正文字号逐一看。 一次性定下赢家,而不是把五种字体丢到读者面前做 A/B。

  • 做中英双语站,让三个系统下渲染一致

    你的产品页英文标题配中文正文,在 Windows 上回退到难看的系统中文字。 打开那 4 套 CJK 搭配,选思源宋体 + 思源黑体,生成的 CSS 自带显式 中文 stack,知乎级别的排版在 Mac、Windows、Linux 上长得一模一样, 不会一台机器一个样。

  • 给开发交一份能直接粘的规格,而不是一张 Figma 截图

    你是设计,工程师要的是准确字体名,不是 PNG。把选好的搭配锁定, 复制那段 CSS (`@import` 链接、`h1` 规则、`body` 规则,字重已经收成 `wght@400;700`),贴进工单。不用再来回确认 Playfair 用哪个字重、 Montserrat 到底是 500 还是 600。

常见踩坑

  • 在 `@import` 链接里把全字重都拉下来,实际只用两个字重;收成 `wght@400;700`,否则页面会下载 8 个用不到的字重,把 LCP 拖垮。

  • 在中文站用了非 CJK 搭配还以为能用;拉丁字体没有中文字形,得显式补 `'Inter', 'PingFang SC', sans-serif` 这样的兜底,不然正文会悄悄掉字。

  • 配了两个性格几乎一样的字 (比如 Roboto 标题 + Open Sans 正文) 糊成一片;要么靠字族性格、要么靠字重拉开对比,例如 Playfair 标题 + Source Sans 正文。

隐私说明

所有操作都在你浏览器里完成。你输入的样张文字、选中的搭配、复制走的 CSS 都不会离开页面,也不上传服务器。字体直接从 Google Fonts 加载 (这个请求 会发到 Google,和任何用它 CDN 的站点一样),但你的输入不被记录、不被存储、 也不进 URL。不用注册,也不追踪你看了哪些搭配。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-13