폰트를 여러 개 얹는다고 화면이 풍성해지지 않습니다. 오히려 두 벌 안에서 역할을 나누고 굵기와 크기로 위계를 줄 때 글이 정돈됩니다. 페어링을 코드로 짜 봅니다. 아래 예제는 그대로 확인할 수 있습니다.
54.1 제목용과 본문용 두 벌
가장 안전한 조합은 제목 하나, 본문 하나입니다. 변수로 나눠 두면 어디에 무엇을 쓸지 코드가 스스로 말합니다.
:root {
--font-heading: "Poppins", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
}
h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-body); }
제목은 조금 개성 있는 얼굴, 본문은 오래 읽어도 편한 얼굴을 맡습니다. 폰트를 바꾸고 싶으면 변수 두 줄만 손대면 됩니다.
54.2 대비 있는 페어링
서로 성격이 다른 두 폰트를 붙이면 제목과 본문이 뚜렷이 갈립니다. 세리프 제목에 산세리프 본문이 고전적인 짝입니다.
:root {
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
}
h1 { font-family: var(--font-heading); font-weight: 700; }
p { font-family: var(--font-body); font-weight: 400; }
장식적인 세리프 제목이 눈을 끌고 담백한 산세리프 본문이 읽기를 받칩니다. 성격이 확실히 다르니 섞여도 헷갈리지 않습니다.
54.3 애매한 페어링은 피한다
가장 나쁜 조합은 비슷한데 미묘하게 다른 두 산세리프입니다. 다른 폰트인지 실수인지 눈이 헷갈립니다.
/* 나쁜 예: 비슷한 둘 */
h1 { font-family: "Helvetica", sans-serif; }
p { font-family: "Arial", sans-serif; }
둘은 닮아서 대비도 안 나고 통일감도 깨집니다. 이럴 바엔 한 폰트로 가는 편이 낫습니다.
/* 좋은 예: 하나로 통일 */
h1, p { font-family: "Inter", system-ui, sans-serif; }
h1 { font-weight: 700; }
p { font-weight: 400; }
한 폰트라도 굵기 차이만으로 제목과 본문이 갈립니다. 확신이 없으면 이 방향이 실패가 적습니다.
54.4 한 가문 안에서 굵기로 페어링
제목과 본문을 같은 폰트로 두되 굵기 폭을 크게 벌리면, 폰트 하나로도 층이 생깁니다. 슈퍼패밀리는 이 폭이 넓습니다.
body { font-family: "Inter", sans-serif; }
.display { font-weight: 800; font-size: 2.5rem; }
.title { font-weight: 600; font-size: 1.25rem; }
.text { font-weight: 400; font-size: 1rem; }
.caption { font-weight: 400; font-size: 0.8rem; color: #6b7280; }
800과 400은 같은 폰트라도 인상이 확 다릅니다. 굵기와 크기, 색을 겹쳐 주면 폰트 목록을 늘리지 않고도 위계가 풍부해집니다.
54.5 위계는 세 축으로
제목이 도드라지는 힘은 폰트가 아니라 크기, 굵기, 색에서 나옵니다. 세 축을 함께 움직이면 자연스럽게 순서가 읽힙니다.
.article-title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
}
.article-meta {
font-size: 0.85rem;
font-weight: 400;
color: #6b7280;
}
제목은 크고 진하고 검게, 메타 정보는 작고 옅게 물러섭니다. 읽는 순서를 코드가 정해 준 셈입니다.
54.6 코드에는 monospace 따로
본문 폰트가 무엇이든 코드 조각과 숫자 표는 고정폭이 편합니다. 별도 변수로 떼어 둡니다.
:root {
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
code, pre, .num {
font-family: var(--font-mono);
}
글자마다 폭이 같아서 코드가 세로로 줄을 맞추고 숫자가 자릿수대로 정렬됩니다. 본문 폰트와 역할이 다르니 함께 써도 자연스럽습니다.
54.7 폰트는 둘로 제한
제목, 본문, 코드까지 하면 이미 충분합니다. 여기에 장식체를 하나 더 얹고 싶어도 참는 편이 화면을 지킵니다.
:root {
--font-heading: "Poppins", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: ui-monospace, monospace;
/* 여기서 멈춘다. 네 번째 폰트는 대개 사족 */
}
폰트가 많아질수록 로딩도 무거워지고 인상도 흩어집니다. 두 벌에 코드용 하나가 실무의 안전한 상한선입니다.
54.8 폴백을 촘촘히
고른 폰트가 아직 안 받아졌거나 없는 기기가 있습니다. 성격이 비슷한 대체 폰트를 폴백 체인에 미리 깔아 둡니다.
:root {
--font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", -apple-system, system-ui, sans-serif;
--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
웹폰트가 늦게 오는 동안에도 비슷한 산세리프가 자리를 지키니 글자가 엉뚱한 세리프로 튀지 않습니다. 마지막의 제네릭 패밀리는 최후의 안전망입니다.
54.9 페어링을 컴포넌트에 적용
정한 두 벌을 실제 카드에 얹으면 페어링이 눈에 들어옵니다. 제목과 본문, 메타가 각자 역할대로 자리를 잡습니다.
.post-card { font-family: var(--font-body); }
.post-card h3 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.3rem;
}
.post-card .body { font-weight: 400; line-height: 1.7; }
.post-card .meta {
font-weight: 400;
font-size: 0.8rem;
color: #6b7280;
}
제목만 heading 폰트를 쓰고 본문과 메타는 body 폰트로 통일했습니다. 두 폰트가 각자 맡은 자리에서만 나타나니 인상이 흩어지지 않습니다.
54.10 정리
페어링은 폰트를 모으는 취미가 아니라 역할을 나누는 설계입니다. 제목과 본문 두 벌을 변수로 잡고, 붙일 거면 성격이 확실히 다른 둘을 붙이고, 자신 없으면 한 폰트에서 굵기와 크기로 위계를 주면 됩니다. 코드용 monospace 하나까지가 넉넉한 한 벌이고, 그 이상은 대개 화면을 어지럽힐 뿐입니다.