CodeKitHub이 도구는 무엇인가요?
폰트 페어링이란 한 페이지에서 함께 사용할 두 가지(때로는 세 가지) 서체를 선택하는 것을 말합니다. 보통 하나는 제목용, 하나는 본문용으로 사용하여 페이지가 어울리지 않거나 단조로워 보이지 않으면서도 시각적 위계를 갖도록 합니다.
아래의 각 조합은 실시간으로 렌더링된 샘플을 보여줍니다. 위쪽은 제목 폰트, 아래쪽은 본문 폰트이며, 실제 구글 폰트 파일을 사용하므로 보이는 그대로 사이트에 적용됩니다.
각 조합에는 바로 사용할 수 있는 구글 폰트 `<link>` 삽입 태그와, 제목 및 본문에 대한 `font-family` 선언이 포함된 CSS 코드 조각이 함께 제공됩니다. 둘 다 복사하면 끝입니다.
왜 사용해야 할까요?
- 자동 생성된 목록이 아닌 28가지 엄선된 조합 — 각 조합은 두 서체가 실제로 서로를 보완하기 때문에 선택되었습니다.
- 실시간 미리보기: 각 조합은 정적 이미지나 폰트 이름 기반 추측이 아니라 구글 폰트에서 불러온 실제 폰트로 렌더링됩니다.
- 모던, 엘레강트, 볼드, 미니멀, 클래식 등 분위기별로 필터링하여 프로젝트에 맞는 느낌을 빠르게 좁혀보세요.
- `<link>` 삽입 태그와 CSS `font-family` 규칙 모두 클릭 한 번으로 복사할 수 있습니다.
- 무료, 브라우저에서 실행, 계정이나 로그인 불필요.
사용 방법
- 원하는 경우 분위기 필터(모던, 엘레강트, 볼드, 미니멀, 클래식)를 클릭해 목록을 좁히거나, "전체"를 선택된 상태로 두고 전체를 살펴보세요.
- 실시간 미리보기 카드를 확인하세요 — 위쪽 줄은 제목 폰트, 아래쪽 줄은 본문 폰트를 보여줍니다.
- 마음에 드는 조합을 열고 클릭하여 삽입 코드 섹션을 펼치세요.
- `<link>` 태그를 HTML의 `<head>`에 복사하고, CSS 코드 조각을 스타일시트에 복사하여 제목과 본문에 폰트를 적용하세요.
예시
입력
우아한 블로그결과
Playfair Display(제목) + Source Sans Pro(본문)"엘레강트"로 필터링하면 대비가 강한 세리프 제목과 깔끔하고 가독성이 높은 산세리프 본문이 결합된 조합이 나타납니다. 에디토리얼 및 블로그 레이아웃에서 흔히 쓰이는 조합입니다.
좋은 폰트 조합의 원칙
- 유사성보다 대비: 거의 똑같아 보이는 두 폰트(예: 비슷한 기하학적 산세리프 두 개)는 의도된 선택이라기보다 실수처럼 보이기 쉽습니다. 세리프체와 산세리프체를 조합하거나, 굵은 디스플레이 폰트와 가벼운 텍스트 폰트를 조합하여 차이가 의도적으로 보이도록 하세요.
- x-높이와 비율 맞추기: 소문자의 시각적 높이가 비슷한 폰트들은 스타일이 다르더라도 같은 페이지에 속한 것처럼 느껴지는 경향이 있습니다. x-높이가 맞지 않는 것은 조합이 "뭔가 어색해" 보이는 가장 흔한 이유 중 하나입니다.
- 두 가지 패밀리(때로는 세 가지)로 제한하기: 제목용 하나, 본문용 하나, 그리고 많아야 버튼이나 라벨 같은 강조용으로 세 번째 하나. 그 이상이 되면 페이지가 계획 없이 만들어진 것처럼 보이기 시작합니다.
- 형태뿐 아니라 분위기도 고려하기: 둥글고 친근한 산세리프체와 격식 있는 세리프체를 조합하면 글자 형태가 기술적으로는 맞더라도 상반된 신호를 전달합니다. 구조뿐 아니라 톤까지 일치하는 폰트를 선택하세요.
- 실제 크기로 테스트하기: 큰 미리보기에서는 멋져 보이는 조합도 본문 텍스트 크기에서는 대비가 사라질 수 있고, 디스플레이 폰트는 작은 크기에서 읽기 어려워질 수 있습니다. 항상 양쪽 극단을 모두 확인하세요.
용도별 조합 선택하기
랜딩 페이지와 마케팅 사이트는 대개 "볼드" 또는 "모던" 필터의 도움을 받습니다. 강렬하고 대비가 뚜렷한 제목 폰트가 화면 상단에서 시선을 끌고, 깔끔하고 중립적인 본문 폰트가 긴 텍스트를 빠르게 훑어보기 쉽게 만들어 줍니다.
블로그와 에디토리얼 콘텐츠는 "엘레강트" 또는 "클래식" 조합에서 가장 잘 읽히는 경우가 많습니다. 세련된 세리프 제목은 정성 들여 편집된 목소리를 전달하고, 편안한 세리프 또는 산세리프 본문은 긴 기사를 오래 읽어도 가독성을 유지시켜 줍니다.
이커머스와 제품 사이트는 대개 "미니멀" 조합을 선호합니다. 절제되고 중립적인 폰트는 타이포그래피 자체보다 제품 사진과 가격에 시선이 집중되도록 하는데, 이는 한 페이지에 수십 개의 제품 카드가 표시될 때 특히 중요합니다.
포트폴리오와 크리에이티브 사이트는 실험할 여지가 가장 큽니다. 개성이 강한 "볼드" 또는 "엘레강트" 조합이 잘 어울리는 경우가 많은데, 방문자들이 부분적으로는 시각적 취향을 평가하기 위해 방문하기 때문입니다.
성능 및 라이선스 관련 참고 사항
삽입 `<link>` 태그는 구글 CDN에서 폰트를 불러오는데, 이는 빠르고 방문자가 이미 방문했을 가능성이 높은 많은 사이트에서 이미 캐시되어 있습니다. 다만 외부 요청이 하나 추가된다는 점은 변함없습니다. 1밀리초까지 중요한 사이트라면, 폰트 파일을 다운로드하여 직접 호스팅하고(수동으로 `font-display: swap`을 설정) 이 외부 의존성을 제거할 수 있지만, 그만큼 설정 작업이 늘어납니다.
구글 폰트의 모든 폰트는 오픈소스이며 출처 표기 없이도 상업적으로 무료 사용이 가능합니다. 다만 어렵지 않은 경우라면 폰트 디자이너에게 크레딧을 표기하는 것도 좋은 예의입니다.
자주 묻는 질문
두 폰트가 "잘 어울린다"는 것은 무엇을 의미하나요?
좋은 조합은 대비와 조화의 균형을 이룹니다. 대비 — 세리프체와 산세리프체를 결합하거나, 굵은 디스플레이 폰트와 담백한 본문 폰트를 결합하는 것 — 는 시각적 위계를 만들어 제목과 본문이 뚜렷하게 구분되도록 합니다. 조화 — 비슷한 x-높이, 유사한 획 굵기, 공통된 격식이나 경쾌함의 정도 — 는 두 폰트가 서로 충돌하지 않도록 합니다. 여기 소개된 조합들은 이 두 가지를 모두 고려해 선정되었습니다.
제목과 본문은 항상 다른 폰트를 사용해야 하나요?
아니요. 이 도구의 "Rubik + Rubik" 조합처럼 하나의 폰트 패밀리를 제목과 본문 모두에 사용하는 것도 좋은 방법입니다. 다만 제목과 본문을 구분할 수 있을 만큼 충분한 굵기 변화가 있어야 합니다. 이는 실수가 아니라 유효한 미니멀한 선택입니다.
조합을 실제로 제 사이트에 어떻게 적용하나요?
구글 CDN에서 폰트를 불러오려면 `<link>` 삽입 태그를 페이지의 `<head>`에 복사하고, 그다음 CSS 코드 조각을 스타일시트에 복사하세요. 이는 제목(h1, h2, h3)과 본문(body, p)에 대한 `font-family`를 설정합니다. 마크업이 다르다면 CSS 선택자를 조정하세요.
구글 폰트를 불러오면 사이트 속도가 느려지나요?
추가되는 폰트 파일 하나마다 네트워크 요청이 하나씩 늘어나고 렌더링을 다소 지연시킬 위험이 있습니다. 제목용 굵기 하나, 본문용 굵기 한두 개로 제한하고, 웹폰트가 로드되는 동안 텍스트가 대체 폰트로 표시되도록 `display=swap`(삽입 코드에 이미 포함됨)을 사용하세요. 로딩 속도가 최우선인 프로덕션 사이트라면 폰트 파일을 직접 호스팅하는 것도 고려해보세요.
이 폰트들은 상업적으로 무료로 사용할 수 있나요?
네. 여기에 표시된 모든 조합을 포함하여 구글 폰트의 모든 폰트는 SIL Open Font License 또는 Apache License로 라이선스가 부여되어 있으며, 두 라이선스 모두 로열티 없이 무료 상업적 사용, 수정, 재배포를 허용합니다.