폰트 조합 도구이란?

잘 어울리는 제목 + 본문 글꼴 조합을 찾아보세요. 조합을 선택하고 직접 텍스트로 미리 보고, CSS 코드나 Google Fonts 링크를 프로젝트에 복사하세요.

각 조합은 시각적 대비와 가독성을 미리 검증한 제목용·본문용 글꼴을 묶어 둡니다. 세리프 제목과 휴머니스트 산세리프 본문, 기하학적 산세리프와 모노스페이스 포인트, 압축된 디스플레이체와 안정적인 본문체 같은 식입니다. 스타일로 필터링하고, 직접 작성한 제목을 미리보기에 넣은 뒤 Google Fonts 가져오기 코드와 CSS를 통째로 복사할 수 있습니다.

사용 방법

1. 1단계 — 글꼴 조합을 둘러보거나 스타일(세리프, 산세리프, 디스플레이, 모노스페이스, 손글씨)로 필터링해 보세요.
2. 2단계 — 조합을 클릭하여 샘플 텍스트 또는 직접 입력한 텍스트로 미리 봅니다.
3. 3단계 — 선택한 조합의 Google Fonts 가져오기 링크 또는 CSS 코드를 복사합니다.

사용 시기

• 블로그·랜딩 페이지의 제목과 본문 글꼴을 CSS 작성 전에 먼저 정할 때.
• 슬라이드 자료나 포트폴리오의 레이아웃은 그대로 두고 타이포만 새로 단장할 때.
• 이미 쓰고 있는 두 글꼴이 실제로 잘 어울리는지 검토하고 싶을 때.

결과

블로그 제작 시: 'Playfair Display + Source Sans 3' 조합을 선택하고, 제목을 미리 본 후, CSS를 복사하여 스타일시트에 붙여넣습니다.

자주 묻는 질문

여기 있는 글꼴은 모두 무료이고 상업적으로 써도 되나요?

네. 모든 페어링은 SIL Open Font License나 유사한 오픈 라이선스를 사용하는 Google Fonts에서 옵니다. 상업 사이트에 임베드하고, 앱에 포함시키고, 클라이언트 작업에도 별도 라이선스 구매 없이 사용할 수 있습니다.

두 글꼴이 «잘 어울린다»는 기준은 무엇인가요?

대비와 조화입니다. 제목은 세리프, 디스플레이체, 묵직한 기하학 산세리프처럼 개성이 살아야 하고, 본문은 가독성 뒤로 사라지는 편이 좋습니다. 여기 페어링은 일부러 다른 카테고리를 섞어 개성 있는 세리프 제목과 중성적인 산세리프 본문을 짝지어 둡니다.

제목과 본문에 같은 글꼴을 써도 괜찮나요?

괜찮습니다. Inter, Source Sans, Roboto 같은 다양한 굵기를 제공하는 슈퍼 패밀리라면 Regular와 Bold만으로도 문서 사이트나 대시보드에서 충분히 정돈돼 보입니다. 두 글꼴을 섞으면 시각적 리듬은 더 잘 살아납니다.

Google Fonts를 두 개 부르면 페이지가 느려지나요?

두 패밀리에 각각 한 굵기씩이면 합쳐서 30~50KB, HTTP 요청 하나가 더 늘어나는 정도입니다. 생성된 CSS를 셀프 호스팅하고, `font-display: swap`을 켜고, 실제 쓰는 굵기만 남기면 비용은 사실상 느끼기 어렵습니다.

조합을 정한 뒤 타이포그래피를 일관되게 유지하려면 어떻게 해야 하나요?

CSS에서 `font-family` 변수로 기본값을 설정하고, 1.25 배율 같은 글자 크기 단계를 미리 정해 두며, 컴포넌트 안에 새로운 글꼴을 함부로 추가하지 마세요. 잘 고른 두 글꼴이면 거의 모든 문서를 처음부터 끝까지 책임집니다.

관련 도구