폰트 조합 추천

Font Pairing

시스템 글꼴 스택으로 제목용·본문용 글꼴 조합을 제안하고 직접 입력한 한글·영문으로 미리 본 뒤 CSS를 줍니다.

제목과 본문 글꼴 조합 열 가지를 왜 어울리는지와 함께 정리해 두고, 자기 문구를 넣어 바로 볼 수 있게 그려 줍니다. 외부에서 불러오는 것은 없습니다. 기기에 이미 있는 글꼴로 그리고, 조합에 필요한 글꼴이 설치돼 있지 않으면 비슷한 계열로 대신 보여 주고 있다고 알려 줍니다. 엉뚱한 것을 보고 판단하지 않도록.

🔒 브라우저 안에서만 처리fonttypographypairing

미리보기 언어

한글 지원 조합만

조합 10개

미리보기

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

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

제목 문구본문 문구

이 조합의 글꼴은 기기에 없을 수 있어, 비슷한 계열의 시스템 글꼴로 대신 보여 줍니다. 실제 모습과 다를 수 있습니다.

왜 어울리는지

가장 한국적인 "산세리프 제목 + 명조 본문" 조합입니다. 프리텐다드의 넓은 자폭과 낮은 대비가 제목에서 단단하게 서고, 본명조의 부드러운 획이 긴 본문에서 눈을 덜 피로하게 합니다. 둘 다 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`는 직접 써야 합니다.