liminfoFont Pairing Guide
폰트 페어링 가이드 - Google Fonts 기반 추천 조합
6 개 조합
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font Pairing Guide 소개
폰트 페어링 가이드는 제목과 본문 서체 사이의 시각적 조화를 검증한 29가지 구글 폰트 조합을 제시합니다. 미리보기 탭에서는 구글 폰트 CDN에서 직접 불러온 실제 폰트 데이터로 렌더링된 라이브 미리보기를 제공하고, 레퍼런스 탭에서는 제목 폰트, 본문 폰트, 카테고리, 스타일, 사용 사례를 검색하고 필터링할 수 있는 표를 제공합니다.
페어링은 여섯 가지 디자인 카테고리로 구성됩니다. 모던 조합(Space Grotesk + Inter, Sora + DM Sans, Outfit + Source Sans 3, Manrope + Nunito Sans, Poppins + Lato, Montserrat + Lora)은 SaaS 제품과 랜딩 페이지에 적합합니다. 클래식 조합(Playfair Display + Source Sans 3, Merriweather + Open Sans 등 7가지)은 에디토리얼과 포트폴리오에 적합합니다. 플레이풀 조합(Fredoka + Nunito 등 4가지)은 교육과 소비자 브랜드에 이상적입니다. 미니멀 조합(Inter, IBM Plex Sans 등 5가지)은 대시보드와 개발자 도구에 탁월합니다. 테크 조합(Inter + Merriweather, Space Grotesk + Space Mono 등 4가지)은 개발자 도구와 대시보드에 특화됩니다. 비즈니스 조합(Oswald + Quattrocento 등 3가지)은 기업과 금융 맥락에 적합합니다.
폰트 페어링은 시각적으로 서로 보완하는 두 가지 이상의 서체를 선택하는 작업입니다. 이 가이드를 통해 시각적 미리보기 카드와 간결한 레퍼런스 표 중 원하는 방식으로 여러 조합을 비교할 수 있습니다.
주요 기능
- 스타일 설명과 사용 사례가 포함된 29가지 엄선된 제목 + 본문 폰트 페어링
- 미리보기 탭: 편집 가능한 텍스트와 카테고리 필터로 실제 폰트 렌더링 확인
- 레퍼런스 탭: 제목, 본문, 카테고리, 스타일, 사용 사례 열이 있는 검색 가능한 표
- 6가지 카테고리 필터: 모던, 클래식, 플레이풀, 미니멀, 테크, 비즈니스
- 폰트명, 스타일, 사용 사례 키워드로 실시간 검색
- 구글 폰트 CDN에서 폰트 로드 — 근사치가 아닌 실제 렌더링 결과 표시
- 100% 클라이언트 사이드 — 초기 폰트 로드 후 오프라인에서도 작동
- 다크 모드 지원 및 모든 화면 크기에서 디자인 검토가 가능한 반응형 레이아웃
자주 묻는 질문
폰트 페어링이란 무엇이고 왜 중요한가요?
폰트 페어링은 페이지에서 조화롭게 어울리는 두 가지 이상의 서체를 선택하는 작업입니다. 좋은 페어링은 시각적 위계를 만들어 강렬한 제목 폰트가 주의를 끌고 가독성 좋은 본문 폰트가 독서를 지원합니다. 올바른 조합은 디자인의 전문성과 분위기에 큰 영향을 미칩니다.
미리보기 탭은 어떻게 사용하나요?
카테고리 버튼(모던, 클래식, 플레이풀, 미니멀, 테크, 비즈니스 또는 전체)을 클릭하여 페어링을 필터링하세요. 미리보기 텍스트 필드를 직접 편집하면 제목과 본문 행이 모두 실제 폰트로 즉시 업데이트됩니다.
레퍼런스 탭은 어떻게 사용하나요?
레퍼런스 탭으로 전환하면 29가지 페어링을 간결한 표로 볼 수 있습니다. 검색창에 키워드(예: "blog", "SaaS", "dev")를 입력하면 폰트명, 스타일, 사용 사례로 필터링됩니다. 카테고리 버튼으로 결과를 더욱 좁힐 수 있습니다.
이 폰트들을 웹사이트에서 무료로 사용할 수 있나요?
네. 가이드에 소개된 모든 서체는 구글 폰트에서 오픈 소스 라이선스(SIL 오픈 폰트 라이선스 또는 Apache 라이선스)로 제공됩니다. 저작권료 없이 상업적으로 사용할 수 있습니다.
세리프 폰트와 산세리프 폰트의 차이는 무엇인가요?
세리프 폰트(Playfair Display, Merriweather, Lora 등)는 글자 끝에 작은 장식 획인 세리프가 있습니다. 산세리프 폰트(Inter, Open Sans, Source Sans 3 등)는 깔끔하고 장식 없는 획을 가집니다. 세리프는 인쇄물과 권위와 연관되고, 산세리프는 화면과 현대성과 연관됩니다.
SaaS나 테크 제품에 가장 잘 맞는 페어링은?
모던과 테크 카테고리가 테크 제품에 잘 어울립니다. Space Grotesk + Inter는 기하학적 제목과 화면 최적화 본문 폰트를 조합합니다. 테크 카테고리의 Space Grotesk + Space Mono는 개발자 지향 사이트에 모노스페이스 본문을 제공합니다. IBM Plex Sans는 문서화에 탁월한 선택입니다.
블로그나 에디토리얼 사이트에 가장 적합한 페어링은?
클래식 카테고리가 에디토리얼 용도를 위해 설계되었습니다. Playfair Display + Source Sans 3는 가장 널리 신뢰받는 에디토리얼 조합입니다. Merriweather + Open Sans는 따뜻하고 신뢰감 있는 분위기를 전달합니다. PT Serif + PT Sans는 같은 슈퍼패밀리의 매칭 조합입니다.
구글 폰트 페어링을 HTML과 CSS로 구현하는 방법은?
두 폰트를 구글 폰트에서 요청하는 <link> 태그를 <head>에 추가하세요: <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3&display=swap" rel="stylesheet">. 그런 다음 CSS에서 적용하세요: h1 { font-family: "Playfair Display", serif; } body { font-family: "Source Sans 3", sans-serif; }.
레퍼런스에서 "매칭" 스타일은 무엇을 의미하나요?
매칭 스타일은 제목과 본문 폰트가 같은 슈퍼패밀리에서 나왔다는 의미입니다. 예를 들어 PT Serif + PT Sans는 같은 타입 디자이너가 함께 어울리도록 설계한 매칭 쌍으로, 동일한 비율과 간격 리듬을 공유하여 시각적 일관성을 보장합니다.