字体搭配推荐

Font Pairing

从系统字体栈里推荐标题和正文的搭配，用你自己输入的文字预览后给出 CSS；字体栈是按韩文和西文选的。

十组精选的标题与正文字体搭配，每组附带它成立的理由，实时绘制，你可以把自己的文字放进去。什么都不抓取：预览用机器上已有的字体，当一组搭配需要一个没安装的字体时，页面会说明它正在被回退字体近似，而不是让你评判错的东西。

🔒 完全在你的浏览器里运行fonttypographypairing

预览语言

只看支持韩文的搭配

10组搭配

预览

읽기 쉬운 화면은 글꼴 두 개면 충분합니다

제목은 시선을 붙잡고 본문은 시선을 흘려보냅니다. 두 글꼴이 같은 x-높이를 가지면 같은 줄에 섞여도 크기가 튀지 않고, 획의 대비가 다르면 위계가 저절로 생깁니다. 웹폰트를 하나 줄일 때마다 첫 화면이 빨라진다는 것도 잊지 마세요.

标题文字正文文字

这一组里的某个字体这台机器上可能没有，于是用同类的系统字体顶上。真正的字体看起来会不一样。

为什么搭得上

在“无衬线做标题、衬线做正文”的各种搭法里，这一组最有韩国味。Pretendard 字身宽、笔画对比低，放大到标题也稳得住；Noto Serif 的笔画更软，长篇正文读下来眼睛不那么累。两者 x 高度接近，混在同一行里也不会出现大小落差。

标题: Pretendard Boldgithub.com/orioncactus/pretendard (OFL)
正文: Noto Serif KRfonts.google.com/noto (OFL)

CSS

h1, h2, h3 {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body {
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Apple Myungjo", "Batang", serif;
  line-height: 1.8;
}

不会去取任何外部字体。列表里的字体如果这台机器上装了，预览就用它；没装就用同类的系统字体顶上，并且在页面上说明。真要用的话，从搭配下面写的来源拿到字体，再用 @font-face 加载。担心体积的话，字体子集化可以把它裁小。字号体系可以用字号阶梯生成来搭。

怎么用

先设预览语言
在拉丁文里成立的搭配在韩文里可能散架，因为两种文字既不共享比例，也不共享基线习惯。如果产品是韩文的，就用韩文看。“仅韩文”筛选把列表缩到两个字体确实都覆盖韩文的搭配。
放进你自己的标题和正文
示例句子是刻意通用的。你真实的标题通常更短，字母也不同，两者都会改变一组搭配读起来的样子。
读理由，不只看图
每组搭配说明是什么让它站得住——共享的骨架加上字重的反差，或者刻意的类别冲突。这是能迁移到你自己发明的搭配上的部分。
取 CSS，然后去拿字体
CSS 给出字体族、标题字重、字距和正文行高。字体本身来自每组搭配下面注明的来源，需要你自己写 `@font-face`。