글자 크기를 그때그때 눈대중으로 정하면 화면마다 제목이 제각각이 됩니다. 기준 크기 하나와 비율 하나를 정해 두면 나머지 크기가 계산으로 줄줄이 따라 나옵니다. 아래 예제는 그대로 확인할 수 있습니다.
55.1 기준 크기부터 정하기
모든 크기의 출발점은 본문 한 줄입니다. 본문을 16px로 잡고 이걸 1rem으로 삼으면 나머지가 이 값에 매입니다.
:root {
font-size: 100%; /* 대개 16px */
}
body {
font-size: 1rem; /* 16px */
line-height: 1.6;
}
rem은 뿌리 글자 크기의 배수라, 사용자가 브라우저 기본 크기를 키우면 화면 전체가 함께 커집니다. px로 못박으면 이 배려가 사라집니다.
55.2 비율로 계단 만들기
크기 단계는 기준값에 같은 비율을 거듭 곱해 만듭니다. 1.25 같은 비율을 정하면 단계가 규칙적으로 벌어집니다.
:root {
--ratio: 1.25;
--step-0: 1rem; /* 16px */
--step-1: calc(var(--step-0) * var(--ratio)); /* 20px */
--step-2: calc(var(--step-1) * var(--ratio)); /* 25px */
--step-3: calc(var(--step-2) * var(--ratio)); /* 31px */
}
한 칸 오를 때마다 1.25배씩 커집니다. 비율이 일정하니 제목들이 서로 어울리고, 어느 크기를 쓸지 고민이 줄어듭니다.
55.3 아래쪽 단계도 필요하다
캡션이나 각주는 본문보다 작아야 합니다. 기준값을 비율로 나누면 아래 방향 단계가 나옵니다.
:root {
--step--1: calc(var(--step-0) / var(--ratio)); /* 약 13px */
--step--2: calc(var(--step--1) / var(--ratio)); /* 약 10px */
}
.caption { font-size: var(--step--1); }
본문 위로는 곱하고 아래로는 나눕니다. 같은 비율 위에 놓이니 작은 글씨도 큰 제목과 한 가족처럼 보입니다.
55.4 단계에 역할 붙이기
step 번호만으로는 어디에 쓸지 헷갈립니다. 자리 이름을 별칭으로 얹어 두면 코드가 읽기 쉬워집니다.
:root {
--text-body: var(--step-0);
--text-lead: var(--step-1);
--text-h3: var(--step-2);
--text-h2: var(--step-3);
--text-caption: var(--step--1);
}
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
.lead { font-size: var(--text-lead); }
제목 태그가 크기 숫자 대신 역할 이름을 부릅니다. 스케일을 통째로 바꿔도 여기 코드는 그대로입니다.
55.5 큰 제목은 clamp로 유연하게
고정 크기 제목은 좁은 화면에서 너무 크고 넓은 화면에서 너무 작습니다. clamp로 최소, 유동, 최대를 한 줄에 담습니다.
.hero-title {
font-size: clamp(1.75rem, 1rem + 4vw, 3rem);
}
가운데 값이 화면 너비에 따라 늘고 줄되, 1.75rem 아래로는 안 내려가고 3rem 위로는 안 올라갑니다. 미디어쿼리 없이도 제목이 화면에 맞춰 숨을 쉽니다.
55.6 비율 선택의 감각
비율이 작으면 단계 차이가 은은하고 크면 극적입니다. 본문이 많은 문서는 작게, 표지처럼 강약이 필요한 화면은 크게 잡습니다.
:root {
/* 차분한 문서 */
--ratio: 1.2;
}
/* 강약이 큰 랜딩 페이지 */
.landing {
--ratio: 1.333;
}
같은 스케일 구조에 비율만 바꿔 끼우면 문서의 성격이 달라집니다. 1.2는 잔잔하고 1.333은 제목이 시원하게 큽니다.
55.7 rem과 px를 섞지 않기
어떤 곳은 px, 어떤 곳은 rem으로 크기를 주면 확대 배율이 어긋납니다. 글자 크기는 rem으로 통일하는 편이 안전합니다.
/* 나쁜 예: 단위가 섞임 */
h2 { font-size: 28px; }
p { font-size: 1rem; }
/* 좋은 예: rem으로 통일 */
h2 { font-size: 1.75rem; }
p { font-size: 1rem; }
사용자가 글자를 키우면 rem은 함께 커지지만 px는 그 자리에 멈춥니다. 섞어 쓰면 제목만 안 커지는 이상한 화면이 됩니다.
55.8 스케일을 실제 문서에
지금까지의 변수를 글 한 편에 얹으면 위계가 한눈에 잡힙니다. 크기만으로 제목, 도입, 본문이 층을 이룹니다.
article h1 { font-size: var(--step-3); line-height: 1.2; }
article h2 { font-size: var(--step-2); line-height: 1.3; }
article .lead { font-size: var(--step-1); color: #4b5563; }
article p { font-size: var(--step-0); line-height: 1.7; }
article .note { font-size: var(--step--1); color: #6b7280; }
제목이 크고 본문이 알맞고 주석이 작습니다. 크기가 규칙 위에 놓여 있어서 어느 글에 얹어도 균형이 유지됩니다.
55.9 반응형 크기까지 스케일에
단계 하나하나를 화면에 따라 흐르게 하면 스케일이 반응형이 됩니다. clamp를 각 step 변수에 넣습니다.
:root {
--step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
--step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
--step-3: clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem);
}
h1 { font-size: var(--step-3); }
body { font-size: var(--step-0); }
본문은 살짝, 제목은 크게 흐르도록 기울기를 달리 줬습니다. 화면이 넓어질수록 제목과 본문의 크기 차가 자연스럽게 벌어집니다.
55.10 스케일 점검하기
단계가 촘촘한지 성긴지는 나란히 늘어놓고 봐야 압니다. 한 화면에 전 단계를 찍어 확인합니다.
.scale-preview p:nth-child(1) { font-size: var(--step--1); }
.scale-preview p:nth-child(2) { font-size: var(--step-0); }
.scale-preview p:nth-child(3) { font-size: var(--step-1); }
.scale-preview p:nth-child(4) { font-size: var(--step-2); }
.scale-preview p:nth-child(5) { font-size: var(--step-3); }
단계 사이 간격이 어느 한 곳에서 확 벌어지거나 붙으면 비율을 다시 봐야 합니다. 숫자로는 안 보이던 어색함이 눈으로 잡힙니다.
55.11 정리
글자 크기는 하나하나 고르는 게 아니라 기준값과 비율로 뽑아내는 것입니다. 16px를 1rem으로 삼고 비율을 곱하고 나눠 단계를 만들고, 역할 이름을 붙이고, 큰 제목은 clamp로 유연하게 두면 화면마다 제목이 흔들리지 않습니다. 크기에 규칙이 서면 타이포의 절반은 이미 정돈된 셈입니다.