본문 글자 크기를 정할 때 가장 흔한 접근은 “시안에서 예뻐 보이는 크기” 입니다. 그런데 시안은 큰 모니터에서 100% 배율로 보는 화면이고, 실제 독자는 작은 화면 · 먼 거리 · 흔들리는 지하철에서 같은 글을 읽습니다. 기준을 시안이 아니라 브라우저에서 가져오면 이 간극이 줄어듭니다.
16px은 우리가 정한 값이 아닙니다
거의 모든 데스크톱 브라우저의 기본 글자 크기가 16px입니다. 그리고 이 값은 사용자가 바꿀 수 있습니다 — 브라우저 설정에서 글자를 키운 사람, 운영체제 접근성 설정을 쓰는 사람이 실제로 있습니다. 이 사실이 크기 단위 선택을 결정합니다.
rem은 그 사용자 설정을 곱해서 계산되고, px은 무시합니다. 그래서 본문에는 1rem을 씁니다. 글자를 키워 둔 사람이 우리 사이트에서만 작게 보는 일이 없어집니다.
여기서 html { font-size: 62.5% } 기법은 권하지 않습니다. 1rem을 10px로 만들어 계산을 편하게 하려는 방법인데, 대가가 있습니다 — 서드파티 CSS나 플러그인이 출력하는 스타일은 1rem을 16px로 가정하고 작성돼 있어서, 그 값들이 전부 한꺼번에 작아집니다. 원인이 우리 코드 한 줄에 있는데 증상은 남의 컴포넌트에서 나타나므로 추적이 어렵습니다.
한글에서 16px이 하한선인 이유
앞 회차에서 다룬 획 밀도가 여기서도 작동합니다. 같은 16px이라도 한글은 글자 한 칸에 자모 두세 개가 들어가므로, 획 하나하나는 라틴 알파벳보다 가늘고 촘촘하게 렌더링됩니다. 그래서 같은 크기의 영문 본문보다 체감상 작게 읽히는 경우가 많습니다.
실무적인 결론은 이렇습니다. 16px을 하한으로 두고, 아티클처럼 길게 읽는 화면은 17~18px로 한 단계 올립니다. 반대로 12~13px은 본문에 쓰지 않습니다 — 메타 정보 · 각주 · 법적 고지처럼 읽지 않아도 되는 텍스트의 자리입니다.
모바일에서 특히 조심할 것이 하나 있습니다. iOS 사파리는 글자 크기가 16px 미만인 입력 필드에 포커스가 가면 페이지를 확대합니다. 폼이 있는 화면에서 갑자기 레이아웃이 확 커지는 현상의 정체가 대개 이것이고, 해결은 입력 요소의 글자 크기를 16px 이상으로 올리는 것입니다.
크기 계단을 한 벌로 만듭니다
화면마다 필요한 크기를 그때그때 정하면 곧 15px · 15.5px · 16px이 섞입니다. 크기는 토큰으로 미리 정해 둔 계단에서 고르는 편이 낫습니다. 계단 사이 간격은 위로 갈수록 벌어지는 것이 자연스럽습니다 — 작은 크기에서는 1px 차이가 보이지만 큰 크기에서는 안 보이기 때문입니다.
:root {
--text-xs: 0.75rem; /* 12px — 각주 · 법적 고지 */
--text-sm: 0.875rem; /* 14px — 메타 정보 */
--text-base: 1rem; /* 16px — 기준선 */
--text-lg: 1.125rem; /* 18px — 장문 본문 */
--text-xl: 1.25rem;
--text-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* 제목은 유동 */
}
body { font-size: var(--text-base); }
article p { font-size: var(--text-lg); }
input, select,
textarea { font-size: var(--text-base); } /* iOS 확대 방지 */제목처럼 화면 폭에 따라 크게 달라져야 하는 값에는 clamp()가 잘 맞습니다. 최소 · 유동 · 최대 세 값을 한 줄에 적으면 브레이크포인트마다 크기를 다시 쓰지 않아도 됩니다. 다만 본문에는 쓰지 않는 편이 낫습니다 — 창 크기를 바꿀 때마다 본문 크기가 미세하게 변하면 오히려 산만합니다.
토큰으로 값을 관리하는 방식은 테마 · 플러그인 아카이브에서 더 다루고, 실제 작업에서 이런 결정을 어떤 순서로 검증하는지는 작업 과정에 공개돼 있습니다.
다음 회차
크기와 행간이 정해지면 다음은 줄이 어디서 바뀌는가입니다. 다음 회차는 word-break: keep-all — 한글에 큰 도움이 되지만, 다른 언어에서는 정반대로 작동하는 속성입니다.