폰트 페어링 가이드: 웹사이트용 12가지 조합
제목과 본문 폰트의 역할을 정리해 읽기 쉽고 의도적인 웹 타이포그래피를 만드는 실전 방법입니다.
폰트 페어링의 네 가지 규칙
폰트 조합은 계층을 만들되 서로 다른 브랜드를 섞은 것처럼 보여서는 안 됩니다. 표현력 있는 세리프 제목과 차분한 산세리프 본문은 역할이 명확해 안정적으로 작동합니다.
먼저 제목, 긴 글, 인터페이스, 폴백의 역할을 정하면 예쁜 폰트 모음이 아닌 실용적인 시스템을 만들 수 있습니다.
- 카테고리, 굵기, 폭, 성격 중 일부만 대비시키세요.
- x-height, 글자 폭, 획의 리듬, 숫자와 문장부호를 비교하세요.
- 예외를 추가하기 전에 제목과 본문 패밀리를 고정하세요.
- 실제 문단, 모바일, 굵게, 기울임, 필요한 언어를 테스트하세요.
시작하기 좋은 12가지 폰트 조합
아래 조합은 출발점입니다. 브랜드 톤, 굵기, 로딩 비용, 언어 지원을 확인하세요.
| 폰트 조합 | 스타일 | 추천 용도 | 잘 맞는 이유 |
|---|---|---|---|
| Playfair Display + Source Sans 3 | 에디토리얼 세리프 + 중립 산세리프 | 매거진, 뷰티, 포트폴리오 | 강한 제목과 차분한 본문. |
| DM Serif Display + Inter | 표현적 세리프 + UI 산세리프 | SaaS 에디토리얼, 랜딩 페이지 | 개성 있는 제목과 UI 친화적 본문. |
| Merriweather + Open Sans | 가독성 세리프 + 휴머니스트 산세리프 | 블로그, 교육, 비영리 | 열린 형태와 명확한 역할. |
| Lora + Roboto | 현대적 세리프 + 범용 산세리프 | 가이드, 제품 스토리 | 따뜻한 제목과 효율적인 문단. |
| Libre Baskerville + Montserrat | 클래식 세리프 + 기하학 산세리프 | 전문 서비스, 문화 | 고전적 신뢰감과 현대적 구조. |
| Cormorant Garamond + Work Sans | 고대비 세리프 + 깔끔한 산세리프 | 럭셔리, 패션, 호텔 | 우아함을 직접적인 본문이 균형 잡음. |
| Bodoni Moda + Manrope | 패션 세리프 + 현대적 산세리프 | 프리미엄 캠페인, 룩북 | 극적인 제목과 깨끗한 디지털 읽기. |
| Fraunces + IBM Plex Sans | 가변 세리프 + 기술적 산세리프 | 크리에이티브 기술, 스튜디오 | 개성과 기능이 모두 분명함. |
| Oswald + Source Sans 3 | 콘덴스드 산세리프 + 중립 산세리프 | 스포츠, 이벤트, 대시보드 | 공간을 절약하는 제목과 편안한 본문. |
| Space Grotesk + Spectral | 모던 그로테스크 + 문학적 세리프 | 스타트업, 연구, 뉴스레터 | 기술적 에너지와 편집적 깊이. |
| Poppins + Lora | 기하학 산세리프 + 따뜻한 세리프 | 라이프스타일, 강의, 크리에이터 | 친근한 제목과 리듬 있는 읽기. |
| Noto Sans + Noto Serif | 동일 슈퍼패밀리 산세리프 + 세리프 | 다국어 콘텐츠 중심 사이트 | 공통 메트릭과 폭넓은 언어 지원. |
5단계 폰트 페어링 과정
유행 목록을 복사하는 것보다 반복 가능한 과정이 더 안전합니다.
- 콘텐츠와 브랜드를 설명하는 형용사 세 개를 정합니다.
- 개성 있는 제목 또는 높은 가독성의 본문 중 어려운 역할부터 고릅니다.
- 같은 시각적 크기에서 x-height, 곡선, 숫자, 굵은 글자를 비교합니다.
- 제목, 문단, 버튼, 라벨, 데이터 행으로 타입 스케일을 만듭니다.
- 데스크톱, 모바일, 느린 로딩, 폴백, 다국어에서 테스트합니다.
웹사이트에 좋은 폰트 조합
웹에서는 모바일 줄바꿈, 부족한 굵기, 다운로드 용량이 중요합니다. 본문은 대략 16~18px와 넉넉한 행간에서 편안해야 합니다.
사용하는 스타일만 로드하고 견고한 폴백을 지정하며 두 패밀리의 문자 지원을 확인하세요.
흔한 실수
대비 부족
비슷한 산세리프 두 개는 우연한 선택처럼 보입니다.
개성이 너무 강함
제목과 본문이 모두 장식적이면 경쟁합니다.
히어로만 테스트
표, 폼, 긴 문단, 모바일도 확인하세요.
언어 지원 무시
없는 문자는 어울리지 않는 폴백으로 바뀝니다.
굵기 과다 로드
Regular, Semibold, Bold부터 시작하세요.
간격 문제를 폰트로 해결
줄 길이와 행간을 먼저 조정하세요.
호환되는 폰트 찾기
한 서체를 알고 비슷한 후보를 찾는다면 폰트 매처. 스크린샷에서 시작한다면 먼저 이미지로 Google Font 찾기 가이드.
자주 묻는 질문
가장 중요한 규칙은 무엇인가요?
통제된 대비를 만들고 비율, 분위기, 리듬 중 하나를 공유하세요.
제목과 본문은 다른 폰트여야 하나요?
필수는 아닙니다. 한 슈퍼패밀리의 굵기 차이로도 충분합니다.
웹사이트에는 몇 개가 적당한가요?
대부분 두 패밀리면 충분합니다.
세리프끼리 또는 산세리프끼리 조합해도 되나요?
폭, 굵기, 구조, 역할이 분명히 다르면 가능합니다.
접근성 좋은 조합은 무엇인가요?
읽기 좋은 크기, 대비, 안정적인 행간, 명확한 강조, 좋은 폴백입니다.
다국어 폰트는 어떻게 고르나요?
공통 문자 지원을 확인하고 실제 번역문으로 테스트하세요.