검증된 제목 + 본문 폰트 조합 12종을 한 화면에서 비교합니다. 모던·클래식·뉴스·블로그·브랜드 등 분위기별로 큐레이션 — 어울리는 조합을 골라 CSS 코드 바로 복사하세요.
폰트 페어링 사용법
- 제목·부제·본문에 미리보기할 텍스트를 입력합니다.
- 12개 폰트 조합 카드에서 실시간으로 어울림을 비교합니다.
- 마음에 드는 조합을 클릭해 HTML link · CSS 코드를 확인합니다.
- 복사 버튼으로 코드를 가져와 본인 사이트에 적용합니다.
- 웹사이트·발표 자료·브랜드 가이드의 타이포 시스템 구축에 활용합니다.
주요 기능
- 모던·클래식·뉴스·블로그·브랜드 등 12가지 검증된 페어링
- 한글 + 영문, 산세리프 + 세리프 등 다양한 조합
- 제목 + 부제 + 본문 3단 구조 미리보기
- Google Fonts CDN 즉시 로드 코드 복사
- 모든 폰트 상업 이용 가능 (SIL OFL · Apache 2.0 등)
활용 예시
- 스타트업 랜딩페이지 — Pretendard + Inter 같은 모던 조합으로 신뢰감
- 매거진·뉴스 사이트 — Noto Serif KR + Playfair Display 클래식 무드
- 개인 블로그 — Gowun Dodum + Lato 부드러운 페어링
- 브랜드 가이드 문서 — 제목·본문 폰트 표준 결정
- PPT·발표 슬라이드 — 일관된 타이포 시스템 구축
폰트 페어링의 원칙
좋은 폰트 페어링의 핵심은 "대비는 있되 조화가 깨지지 않는 것"입니다. 제목은 본문보다 두껍거나 형태가 달라야 위계가 살고, 두 폰트의 x-height(소문자 높이)와 비율이 비슷해야 어색하지 않습니다. 일반적인 규칙은 세리프 + 산세리프(전통+모던 대비), 두꺼운 디스플레이 + 가벼운 본문(강약), 같은 슈퍼패밀리(예: Noto Sans + Noto Serif)에서 고르기. 셋 이상의 폰트를 쓰는 것은 거의 항상 부조화로 이어집니다.
자주 묻는 질문
왜 같은 폰트 하나만 쓰면 안 되나요?
가능하지만 위계(hierarchy)가 약해 정보의 중요도가 잘 드러나지 않습니다. 제목·본문에 다른 폰트를 쓰면 시각적 대비로 독자가 페이지 구조를 빠르게 파악할 수 있습니다. 단 하나의 슈퍼패밀리(Noto Sans + Noto Serif 등)는 안전한 선택입니다.
한글·영문이 섞인 페이지에선 어떻게 해야 하나요?
font-family에 영문 폰트를 먼저, 한글 폰트를 뒤에 적으면 영문은 영문 폰트로, 한글은 자동으로 한글 폰트로 표시됩니다. 예: font-family: 'Inter', 'Pretendard', sans-serif;
폰트를 너무 많이 로드하면 페이지가 느려지지 않나요?
맞습니다. 일반적으로 2개 이하, 굵기 2~3개씩만 로드하는 것이 좋습니다. 폰트 페어링은 항상 "2개"로 끝내고, 다양성은 굵기·크기로 표현하세요.
안 어울리는 조합은 어떤 것이 있나요?
강한 디스플레이 + 디스플레이(Black Han Sans + Bebas Neue), 형태가 너무 비슷한 두 산세리프(Nanum Gothic + Open Sans), 또는 x-height 차이가 큰 두 본문 폰트는 부조화를 일으킵니다.