폰트 페어링의 세 가지 규칙
규칙 1 — 대비, 충돌이 아닌
독자가 구별할 수 있을 만큼 다르지만, 시각적으로 싸우지 않을 만큼 너무 다르지 않은 폰트를 페어링하세요. 날카로운 모던 세리프(Playfair Display)와 깔끔한 휴머니스트 산세리프(Inter)의 페어링은 잘 대비됩니다. 두 개의 비슷한 기하학적 산세리프(Montserrat + Poppins)는 실수처럼 보입니다.
규칙 2 — 하나의 목소리, 하나의 역할
각 폰트에 명확한 역할을 할당하세요. 일반적으로: 헤딩용 디스플레이 폰트 하나(표현력 있고 톤을 설정), 본문용 본문 폰트 하나(중립적이고 읽기 최적화). 둘 다에 둘 다를 사용하지 마세요.
규칙 3 — 두 개로 충분
잡지를 디자인하지 않는 한 페이지에 두 개 이상의 서체는 거의 항상 실수입니다. 시각적 다양성이 필요하면 두 폰트 내의 굵기와 크기(Display 700, Display 400 italic, Body 400, Body 600)를 사용하세요.
검증된 12개 Google Fonts 페어링
1. Playfair Display + Inter
높은 대비 모던 세리프와 중립 휴머니스트 산세리프. 편집 사이트, 에이전시, 개인 브랜딩의 가장 흔한 페어링.
h1, h2, h3 { font-family: 'Playfair Display', serif; }
body { font-family: 'Inter', sans-serif; }2. Space Grotesk + Inter
미묘한 특징이 있는 기하학적 디스플레이 산세리프와 작업용 휴머니스트의 페어링. 모던, 기술 지향적, 약간 장난스러운. 개발자 도구, SaaS, 제품 페이지에 좋습니다.
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
body { font-family: 'Inter', sans-serif; }3. DM Serif Display + DM Sans
매칭된 패밀리 페어링 — 같은 주조소에서 함께 디자인됨. 세리프는 우아한 대비를 가지고 있고; 산세리프는 깔끔하고 중립적입니다.
h1, h2, h3 { font-family: 'DM Serif Display', serif; }
body { font-family: 'DM Sans', sans-serif; }4. Fraunces + Inter
Fraunces는 디스플레이 크기에서 독특한 매력을 가진 "부드러운 세리프" 가변 폰트. 가독성을 위해 Inter와 페어링.
h1, h2, h3 { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 50, 'WONK' 1; }
body { font-family: 'Inter', sans-serif; }5. Bebas Neue + Work Sans
응축된 굵은 디스플레이와 깔끔한 산세리프 페어링. 펀치 있고, 모던, 잡지 스타일.
h1, h2, h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; }
body { font-family: 'Work Sans', sans-serif; }6. Archivo Black + Archivo
매우 굵은 디스플레이와 형제 보통 굵기 페어링. 매우 자신감 있고, 약간 산업적인.
7. Lora + Open Sans
Lora는 화면 읽기를 위해 디자인된 균형 잡힌 세리프; Open Sans는 좋은 이유로 웹에서 가장 많이 사용되는 본문 폰트. 클래식, 안전, 매우 읽기 쉬움.
8. Poppins + Roboto
두 개의 매우 인기 있는 산세리프가 함께 작동하는 이유는 그들의 개성이 다르기 때문 — Poppins는 기하학적이고 둥글며, Roboto는 중립적이고 약간 휴머니스트.
9. Cormorant Garamond + Proza Libre
우아한 클래식 세리프와 현대 산세리프. 답답하지 않고 럭셔리.
10. JetBrains Mono + Inter
개발자 중심 페어링. 헤드라인의 모노가 즉각적인 기술적 맥락을 제공; 본문의 Inter가 텍스트 가독성을 유지.
h1, h2, h3 { font-family: 'JetBrains Mono', monospace; }
body { font-family: 'Inter', sans-serif; }
code { font-family: 'JetBrains Mono', monospace; }11. Libre Baskerville + Source Sans 3
Adobe의 Source Sans와 함께 Baskerville의 웹 최적화된 부활. 화면에서 현대적인 인쇄된 책 같은 느낌.
12. Unbounded + Inter
Unbounded는 플레어 스트로크가 있는 모던 디스플레이 산세리프 — 굵고, 표현력 있고, 독특한. 개성이 위에 머무르도록 중립 Inter 본문과 페어링.
한국어 폰트 고려사항
한국어 본문에는 Noto Sans KR 또는 Pretendard가 가장 널리 사용됩니다. 영어 디스플레이 폰트와 한국어 본문을 결합하는 경우, 두 언어 모두 잘 처리되는 폰트 폴백 체인을 설정하세요:
h1, h2, h3 {
font-family: 'Space Grotesk', 'Pretendard', 'Noto Sans KR', sans-serif;
}
body {
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}성능: 폰트 2개, 굵기 4개 이하 유지
각 폰트 파일은 일반적으로 30-80KB(woff2)입니다. 두 폰트의 8개 굵기를 로드하면 타이포그래피만 ~500KB가 됩니다 — 고품질 히어로 이미지보다 더 큼. 실제로 필요한 것:
- 디스플레이 폰트: 굵기 1-2개 (보통 700 + 선택적 400)
- 본문 폰트: 굵기 2-3개 (400 보통, 600 세미볼드, 선택적 700 볼드)
- 보이지 않는 텍스트 깜박임을 피하기 위해 항상 Google Fonts URL에
display=swap포함 - 가능한 경우 가변 폰트 사용 (Inter, Fraunces, Source Sans 3)
자주 묻는 질문
- 두 개의 세리프 폰트를 함께 사용할 수 있나요?
- 네, 하지만 더 신중해야 합니다. 세리프들이 눈에 띄게 다른 개성을 가져야 합니다(예: Playfair 같은 모던 고대비 세리프와 Lora 같은 클래식 트랜지셔널 세리프).
- 두 폰트가 함께 작동하지 않는지 어떻게 알 수 있나요?
- 빠른 테스트: 두 폰트를 흰색 배경에 검은색으로 같은 크기로 설정합니다. 어느 것이 어느 것인지 즉시 알 수 없다면 너무 비슷합니다. 하나가 다른 것 옆에서 답답하거나 어색하게 느껴진다면 비율이 맞지 않습니다.
- 시스템 폰트는 어떤가요?
- 시스템 폰트(애플의 San Francisco, 윈도우의 Segoe UI, 안드로이드의 Roboto)는 무료, 빠르고, 네이티브로 보입니다. 트레이드오프: 사이트가 모든 OS에서 다르게 보입니다. 가장 빠른 로딩 본문 텍스트에
font-family: system-ui, sans-serif;를 사용하고 디스플레이 헤딩에 로드된 Google Font 하나와 페어링하세요. - 이탤릭과 볼드를 사용해야 하나요, 아니면 별도 이탤릭 폰트를 로드해야 하나요?
- 실제로 사용하는 특정 이탤릭과 볼드 굵기를 항상 로드하세요. 브라우저의 "가짜 이탤릭"(기울어진 보통)에 의존하지 마세요 — 저렴해 보이고 힌팅을 깨뜨립니다.
- 본문 폰트의 커닝이 얼마나 중요한가요?
- 매우. 대부분의 Google Fonts에는 합리적인 커닝 페어가 내장되어 있습니다.
font-kerning: normal;과font-feature-settings: 'kern' 1, 'liga' 1;로 활성화하세요 — 가독성 차이는 미묘하지만 실재합니다.