좋은 폰트 조합의 기준은 무엇인가요?

대비와 조화가 핵심입니다. 제목에 세리프 또는 디스플레이 폰트를, 본문에 산세리프 폰트를 사용하는 것이 일반적으로 좋은 조합입니다.

추천된 폰트는 무료로 사용할 수 있나요?

네, 모든 추천 폰트는 Google Fonts에서 제공하는 무료 오픈소스 폰트입니다. 개인 및 상업 프로젝트 모두에 자유롭게 사용할 수 있습니다.

웹폰트를 여러 개 쓰면 페이지가 느려지지 않나요?

글꼴 자체보다 굵기 종류가 늘어나는 것이 부담입니다. 한 서체의 파일 하나가 보통 20~40KB이므로, 제목용과 본문용 두 가지에 각각 두 굵기만 쓰면 100KB 안팎으로 충분합니다. 문제는 한 서체에서 굵기를 여섯 개씩 불러오는 경우입니다. 가변 폰트를 쓰면 파일 하나로 모든 굵기를 감당할 수 있고, font-display: swap을 지정해 두면 글꼴이 늦게 도착해도 글이 먼저 보입니다.

본문 글꼴은 어떤 기준으로 고르나요?

본문은 개성보다 읽기 편함이 먼저입니다. 16px 크기에서 소문자 높이가 넉넉하고, 글자 사이가 답답하지 않으며, 1과 l과 I, 0과 O가 서로 구분되는 서체를 고르세요. 실제 원고 한 문단을 붙여 놓고 노트북과 휴대폰에서 각각 읽어 보는 것이 견본 문구를 보는 것보다 훨씬 정확합니다. 제목에 개성 있는 서체를 쓰더라도 본문은 무난한 쪽이 결국 오래 읽힙니다.

폰트 조합

폰트 조합 추천 무료 온라인 도구. 제목·본문에 어울리는 Google Fonts 조합을 추천하고 실시간 미리보기 제공. 브라우저 처리.

Classic Elegant

다람쥐 헌 쳇바퀴에 타고파

빠른 갈색 여우가 게으른 개를 뛰어넘었습니다. 좋은 폰트 조합은 디자인의 핵심입니다.

제목: Playfair Display본문: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;700&display=swap');

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

body, p {
  font-family: 'Source Sans 3', sans-serif;
}

lock파일이 서버로 전송되지 않습니다

임베드

내 사이트에 이 도구 임베드하기

<iframe src="https://tools.patrache.studio/font-pair-suggester/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="폰트 조합 — Patrache Studio Tools"></iframe>
<p><a href="https://tools.patrache.studio/font-pair-suggester/">폰트 조합</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

폰트 조합 도구는 어울리는 폰트 페어링을 추천하는 무료 온라인 도구입니다. 제목과 본문 폰트의 조합을 미리보기하고 Google Fonts에서 바로 사용할 수 있는 코드를 제공합니다. 브라우저에서 직접 처리되어 서버 전송 없이 무료입니다.

폰트 조합

다람쥐 헌 쳇바퀴에 타고파

폰트 조합 어떻게 사용하나요?

폰트 조합 자주 묻는 질문

폰트 조합 잘 활용하는 방법은?

광고 차단을 해제해 주세요

폰트 조합

다람쥐 헌 쳇바퀴에 타고파

폰트 조합 어떻게 사용하나요?

폰트 조합 자주 묻는 질문

폰트 조합 잘 활용하는 방법은?

관련 도구

그림자 생성기

모서리 둥글기

CSS 그리드 생성기