다람쥐 헌 쳇바퀴에 타고파
타이포그래피는 문자를 배열하여 쓰여진 언어를 가독성 있고 읽기 쉽고 보기 좋게 표시하는 기술이자 예술입니다. 서체 선택, 포인트 크기, 줄 길이, 줄 간격 및 자간 조정을 포함합니다.
타이포그래피의 예술 탐구
타이포그래피는 문자를 배열하여 쓰여진 언어를 가독성 있고 읽기 쉽고 보기 좋게 표시하는 기술이자 예술입니다. 서체 선택, 포인트 크기, 줄 길이, 줄 간격 및 자간 조정을 포함합니다.
폰트 페어링 찾기 - Google Fonts 조합 도구 온라인
다양한 레이아웃에서 실시간 미리보기로 완벽한 Google Fonts 조합을 찾아보세요. 바로 사용 가능한 CSS 코드 생성 — 100% 클라이언트 사이드, 서버 전송 없음.
자주 묻는 질문
폰트 페어링 찾기란 무엇인가요?
폰트 페어링 찾기는 두 가지 폰트(일반적으로 헤딩용과 본문용)의 조화로운 조합을 찾아주는 온라인 도구입니다. Google Fonts 라이브러리에서 폰트를 탐색하고, 실제 레이아웃에서 미리보기하며, 웹사이트에서 사용할 수 있는 CSS 코드를 생성합니다.
이 도구를 어떻게 사용하나요?
1. 드롭다운에서 헤딩 폰트를 선택합니다 (카테고리 필터로 범위를 좁힐 수 있습니다). 2. 본문 폰트를 선택합니다. 3. 타이포그래피 설정(크기, 굵기, 줄 높이, 자간)을 조절합니다. 4. 미리보기 레이아웃(기사, 카드, 프로필)을 전환하여 다양한 컨텍스트에서 확인합니다. 5. 큐레이션 페어링으로 빠르게 영감을 얻을 수 있습니다. 6. 생성된 CSS 코드를 복사하여 프로젝트에 사용합니다.
데이터가 안전한가요? 서버로 전송되는 것이 있나요?
타이포그래피 선택은 100% 비공개이며 어떤 서버로도 전송되지 않습니다. 이 도구는 전적으로 브라우저에서 실행됩니다. 유일한 외부 요청은 폰트 파일을 로드하기 위한 Google Fonts CDN 요청뿐이며, 이는 수백만 웹사이트에서 사용하는 동일한 공개 CDN입니다.
좋은 폰트 페어링이란 무엇인가요?
좋은 폰트 페어링은 다음 원칙을 따릅니다: 대비 — 다른 분류의 폰트를 조합합니다 (예: 세리프 헤딩 + 산세리프 본문). 공유 특성 — 비슷한 x-높이, 비율, 기하학적 특성을 찾습니다. 계층 — 헤딩 폰트가 본문과 시각적으로 구별되어야 합니다. 가독성 — 본문 폰트는 작은 크기에서도 읽기 쉬워야 합니다.
세리프, 산세리프, 디스플레이, 손글씨, 고정폭 폰트의 차이점은 무엇인가요?
세리프 폰트는 글자 끝에 작은 장식 획이 있습니다 (예: Merriweather). 산세리프는 장식이 없는 깔끔한 폰트입니다 (예: Inter, Roboto). 디스플레이 폰트는 큰 크기용 장식 폰트입니다 (예: Lobster). 손글씨 폰트는 손으로 쓴 것 같은 폰트입니다 (예: Caveat). 고정폭 폰트는 모든 문자 너비가 같습니다 (예: Fira Code).
생성된 CSS를 프로젝트에 바로 사용할 수 있나요?
네. 내보내기 패널에서 프로덕션에 바로 사용할 수 있는 코드를 생성합니다. HTML <head>에 추가할 <link> 태그, CSS @import 문, 시스템 폰트 폴백이 포함된 font-family 선언을 모두 제공합니다.
코드 예제
// Font Pair Finder - Dynamic Google Font Loading
function loadGoogleFont(family, weights = [400, 700]) {
const weightsStr = weights.join(";");
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weightsStr}&display=swap`;
if (document.querySelector(`link[href="${url}"]`)) return;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
document.head.appendChild(link);
}
function generatePairingCSS(headingFont, bodyFont, options = {}) {
const { headingSize = 36, bodySize = 16, headingWeight = 700, bodyWeight = 400, lineHeight = 1.5 } = options;
return `h1, h2, h3 {
font-family: '${headingFont}', system-ui, sans-serif;
font-weight: ${headingWeight};
font-size: ${headingSize}px;
}
body, p {
font-family: '${bodyFont}', system-ui, sans-serif;
font-weight: ${bodyWeight};
font-size: ${bodySize}px;
line-height: ${lineHeight};
}`;
}
loadGoogleFont("Montserrat", [400, 700]);
loadGoogleFont("Open Sans", [400, 600]);
console.log(generatePairingCSS("Montserrat", "Open Sans"));