폰트 조합 고르기

폰트 조합은 제목과 본문을 같은 화면에서 봐야 합니다. 좋은 폰트 하나보다 조합이 화면 인상을 결정합니다. 32px 제목은 개성이 필요하고 14px 본문은 10분 이상 읽혀야 하며, 600 굵기 버튼·12px 캡션·표 숫자까지 같은 레이아웃에서 어색하지 않아야 합니다. 스냅폰트 Pairs 탭에서 제목·본문·UI 샘플을 한 번에 비교하세요.

폰트 페어링 보기 유사 폰트 탐색

실제로 이렇게 보입니다

아래 샘플은 실제 폰트 파일을 불러와 프로젝트에서 쓰는 문장·크기·굵기로 렌더링한 것입니다. 썸네일이 아니라 화면에서의 리듬을 확인하세요.

SaaS UI · Pretendard 단일 패밀리

700 H1 · 500 서브 · 400 본문

팀 폰트를 한 번에 정리하세요

제목·본문·버튼을 같은 패밀리로

Pairs 탭에서 32px 제목과 14px 본문 2문단, 600 버튼 라벨을 한 카드로 보면 조합이 어색한지 바로 보입니다.

font-family Pretendard + fallback

가장 흔한 B2B 조합. 제목만 Bold를 키우고 본문은 Regular로 두면 대비가 충분합니다.

캠페인 · Gmarket Sans + Noto Sans KR

개성 제목 + 중립 본문

봄맞이 30% OFF

4월 30일까지 전 상품 적용 · 일부 품목 제외 · 자세한 조건은 이벤트 페이지를 확인하세요.

font-family Gmarket Sans + fallback

디스플레이 제목은 28px 이상에서만 쓰고, 본문·각주는 중립 sans로 분리하는 것이 페어링 기본입니다.

[object Object]

영문 섹션 타이틀 · 한글 본문

Billing overview

다음 결제일 2026.06.01 · VAT 포함 ₩12,900 · 영문 API 용어 GET /invoices 와 혼용

Manage plan

UI card Inter · 18px title

Inter + Pretendard는 bilingual SaaS에서 가장 많이 검증된 조합 중 하나입니다.

피해야 할 조합 · Serif 제목 + Serif 본문

한글 긴 문단에서는 가독성이 급격히 떨어짐

권장

Sans 본문 · Noto Sans KR 400

서비스 이용약관은 가입일로부터 효력이 발생하며, 변경 사항은 이메일과 앱 공지로 안내됩니다.

피하기

Serif 본문 · Noto Serif KR 400 (14px 3줄+)

서비스 이용약관은 가입일로부터 효력이 발생하며, 변경 사항은 이메일과 앱 공지로 안내됩니다.

한글 UI·약관 본문은 sans 본문 + (필요 시) serif는 인용·에디토리얼에만 제한하는 편이 안전합니다.

한국어 폰트 페어링 핵심 기준

대비 vs 조화: 제목은 SemiBold·Bold·Display, 본문은 Regular·Medium — 같은 패밀리 내 굵기 대비도 유효한 조합
x-height·cap height: Inter + Pretendard처럼 영문·한글 높이가 맞으면 bilingual 헤드라인이 안정적
자폭: 제목 폰트가 Condensed면 본문은 Neutral sans(Pretendard, Noto Sans KR)로 균형
톤: B2B SaaS는 중립·Geometric, 라이프스타일은 Humanist 제목 + 고딕 본문
굵기 매핑: H1 700, H2 600, body 400, button 600, caption 400/500 — 두 패밀리 합쳐 4단계 이상
매체: 웹에서 OK인 조합이 PPT 28pt 제목에서는 과하거나, 반대로 PPT용 디스플레이가 16px 웹 H1에선 약할 수 있음

자주 쓰는 한글·영문 조합 예시

SaaS UI: Pretendard 400 본문 + Pretendard 600/700 제목 (단일 패밀리), 영문 강조는 Inter 500
글로벌 랜딩: Inter 400/600 + Pretendard 400 — 영문 히어로 + 한글 서브카피
문서·블로그: Noto Sans KR 400 본문 + Noto Sans KR 700 H2 또는 Source Serif 4 영문 인용
PPT 비즈니스: SUIT 600 제목(28–32pt) + SUIT 400 본문(14–16pt) + 표 숫자 tabular
브랜드 캠페인: Gmarket Sans·Jalnan 제목 + Noto Sans KR/Pretendard 본문 — 제목만 개성
에디터·개발자: IBM Plex Sans KR UI + IBM Plex Mono 코드 블록

페어링에서 피해야 할 패턴

디스플레이·손글씨 제목 폰트를 14px 본문·표에 그대로 사용
Serif 제목 + Serif 본문을 한글 긴 문단에 적용해 가독성 저하
영문 Display(Playfair, Clash) + 한글 명조 본문 — 톤과 획 두께 불일치
제목·본문 모두 Geometric sans(Spoka 계열)만 쓰면 CTA·가격 숫자 계층이 약해짐
PPT에서 제목 3종·본문 2종 섞어 슬라이드마다 font-family가 달라지는 경우
웹에서 @font-face 4패밀리 × 4굵기 = 16파일 로드로 페어링 품질 이전에 성능 문제

Pairs 탭으로 조합 검증하는 방법

히어로: 32–48px 제목 + 16–18px 리드 문장 + 14px 본문 2문단을 한 카드로 보기
UI 카드: 18px 카드 제목 + 14px 설명 + 600 14px 버튼 "무료로 시작하기"
가격표: 24px ₩12,900 + 14px/feature list + 12px 캡션 "VAT 별도"
Similar로 "Pretendard + Inter" 대신 "SUIT + Public Sans" 등 변형 3세트 비교
모바일 360px 폭 가정: 제목 2줄 wrap, 버튼 full-width 시 글자 잘림 확인
최종 조합은 Figma text style(H1/H2/Body/Button/Caption) 이름과 CSS 변수로 고정

폰트 페어링 4단계

프로젝트 톤(B2B/커머스/브랜드)과 주요 매체(웹/PPT)를 정하고 기준 본문 폰트(Pretendard 또는 Noto Sans KR)를 하나 고른다.
Pairs 탭에서 본문 + 제목 후보 3–5조합을 샘플 히어로·카드·가격 UI로 비교한다.
Similar로 "너무 흔한 조합"일 때 제목 또는 본문 한쪽만 대체한 변형을 추가 테스트한다.
Licenses 탭에서 두 패밀리 모두 상업·웹 조건을 확인하고 Figma·CSS typography scale에 등록한다.

폰트 조합에 쓰는 기능

Pairs: 제목·본문·UI 샘플 레이아웃 동시 미리보기
Fonts: 후보 폰트 굵기·크기 실시간 전환
Similar: 페어링 한쪽을 비슷한 분위기 다른 폰트로 교체
Licenses: 조합에 쓰는 모든 패밀리 라이선스 일괄 확인