폰트 조합 생성기

제목·본문 폰트 짝꿍 찾기

웹사이트 디자인할 때 헤더랑 본문 폰트를 다르게 쓰는 게 일반적이에요. 제목엔 세리프, 본문엔 산세리프 이런 식으로요. 근데 어떤 조합이 진짜 잘 어울리는지는 경험이 없으면 감이 안 오잖아요.

여기선 디자이너들이 검증한 Google Fonts 조합 20가지를 모아뒀어요. 내가 쓸 제목 문구랑 본문 문장을 입력하면 모든 조합에서 실시간으로 미리 볼 수 있고, 다크·라이트 배경으로 토글해서 어느 쪽에서도 잘 읽히는지 확인한 다음 CSS 코드를 그대로 복사해서 프로젝트에 붙여 넣으면 됩니다.

이런 분들한테 유용해요

웹사이트 타이포그래피 고르는 웹 디자이너, 발표자료 폰트 조합 찾는 기획자, Google Fonts 처음 써보는 분들에게 도움이 돼요.

폰트 조합 찾는 법

1. 내 텍스트 입력 - 실제로 쓸 제목이랑 본문 문구를 입력창에.
2. 크기 조정 - 슬라이더로 제목·본문 글꼴 크기 맞추기.
3. 조합 둘러보기 - 20가지 조합을 스크롤하면서 훑어보기.
4. 배경 전환 - 다크·라이트 모드 둘 다에서 어떻게 보이는지 확인.
5. 조합 선택 - 마음에 드는 조합 클릭해서 CSS 코드 보기.
6. CSS 복사 - @import랑 font-family 규칙이 들어간 코드 복사.

실제 사용 예시

제목: Playfair Display (세리프, 고급스러움)
본문: Source Sans Pro (산세리프, 가독성 좋음)
→ 실시간 미리보기로 확인
→ CSS 복사:
@import url('fonts.googleapis.com/css2?...');
h1 { font-family: 'Playfair Display', serif; }
body { font-family: 'Source Sans Pro', sans-serif; }

이 폰트 조합 도구의 특징

• 검증된 20가지 - 세리프+산세리프 대비 같은 디자인 원칙 기반으로 엄선한 조합.
• 실시간 미리보기 - Google Fonts CDN에서 폰트를 바로 불러와 내 텍스트로 렌더링.
• 크기 조정 - 제목·본문 크기 비율을 바꿔가며 어떤 리듬이 좋은지 확인.
• 다크·라이트 - 배경 바꿔서 양쪽 모드에서 다 잘 어울리는지 체크.
• CSS 코드 바로 - @import URL이랑 font-family 규칙까지 한 세트로 복사.
• 가입 안 함 - 무료, 가입 없음, 브라우저에서 바로.
• 한계점 - 영문 Google Fonts 기준이라 한글 폰트 조합은 별도 확인이 필요해요. 20개 프리셋 외 다른 폰트 조합은 직접 입력할 수 없습니다.

다른 폰트 페어링 도구랑 비교

참고 자료

• Google Fonts - 무료 웹폰트 라이브러리

자주 묻는 질문