웹 폰트 크기 기준 완벽 정리 - 본문 16px이 표준인 이유와 반응형 적용법
본문 16px이 웹 표준이 된 이유부터 제목별 위계, 모바일 반응형 대응, 행간과 자간 설정까지 가독성을 결정하는 폰트 크기 기준을 실무 기준과 함께 한번에 정리했습니다
화면을 한참 보다가 눈이 침침해지는 경험, 누구나 한 번쯤은 있습니다. 작은 글자로 빼곡한 페이지에서는 5분만 읽어도 피로가 몰려옵니다. 반대로 본문이 너무 크면 한 줄에 몇 글자 들어가지 않아 시선이 자꾸 끊깁니다. 웹 폰트 크기 기준이 중요한 이유가 여기에 있습니다.
웹사이트 본문, 제목, 캡션의 권장 크기와 모바일 대응 방법, 가독성을 높이는 행간과 자간 설정까지 실무에서 바로 쓸 수 있는 기준을 정리했습니다.
웹 폰트 크기 기준, 왜 16px이 표준일까
대부분의 브라우저는 기본 폰트 크기를 16px로 설정합니다. 크롬, 파이어폭스, 사파리, 엣지 모두 동일합니다. 16px이라는 숫자는 우연이 아닙니다. 일반적인 시청 거리(데스크톱 50-70cm, 모바일 25-35cm)에서 사람 눈이 가장 편안하게 읽을 수 있는 크기로 검증된 값입니다.
본문을 16px보다 작게 줄이면 가독성이 급격히 떨어집니다. 특히 40대 이상 사용자나 시력 보정이 필요한 사용자에게는 부담이 큽니다. 본문은 최소 16px 이상을 유지하는 것이 모든 디자인 시스템의 공통 권장 사항입니다.
구글 머티리얼 디자인, 애플 휴먼 인터페이스 가이드라인, 마이크로소프트 플루언트 모두 본문 최소 크기를 14-16px로 명시하고 있으며, WCAG 접근성 권고는 본문 16px 이상을 기본으로 봅니다.
요소별 권장 폰트 크기 기준
제목과 본문의 크기 비율을 위계라고 부릅니다. 위계가 명확해야 사용자가 페이지를 스캔하면서 정보를 빠르게 파악합니다. 실무에서 자주 사용되는 기준은 다음과 같습니다.
| 요소 | 데스크톱 | 모바일 | 비고 |
|---|---|---|---|
| h1 메인 제목 | 32-40px | 26-32px | 페이지당 1개 |
| h2 섹션 제목 | 24-28px | 20-24px | 중간 위계 |
| h3 소제목 | 20-22px | 18-20px | 세부 구분 |
| 본문 | 16-18px | 16px | 가장 중요 |
| 캡션/주석 | 13-14px | 13px | 최소 12px |
| 버튼 텍스트 | 14-16px | 16px | 터치 영역 확보 |
반응형 환경에서 폰트 크기 잡는 법
같은 24px이라도 27인치 모니터와 5.5인치 스마트폰에서 체감 크기가 다릅니다. 화면 폭에 따라 폰트가 자연스럽게 변하도록 설정하면 어느 기기에서나 일관된 느낌을 줍니다.
rem 단위 사용
rem은 루트 요소(html)의 폰트 크기를 기준으로 계산됩니다. html에 16px을 지정하고 본문을 1rem, 제목을 1.5rem 식으로 작성하면, 사용자가 브라우저 글자 크기를 키울 때 모든 텍스트가 비율에 맞게 확대됩니다. 접근성 측면에서 px보다 rem 사용이 권장됩니다.
clamp 함수로 유동 크기 적용
CSS의 clamp(min, 유동값, max) 함수를 쓰면 화면 폭에 따라 폰트가 부드럽게 커지거나 작아집니다.
- 본문: clamp(16px, 1.1vw + 14px, 18px)
- h2 제목: clamp(22px, 2vw + 18px, 28px)
- h1 제목: clamp(28px, 3vw + 22px, 40px)
vw는 뷰포트 가로 폭의 1%를 의미합니다. 데스크톱에서는 max값에 가깝게, 모바일에서는 min값에 가깝게 표시되어 미디어 쿼리를 여러 단계로 나누지 않아도 자연스러운 반응형이 완성됩니다.
행간과 자간, 폰트 크기 못지않게 중요
폰트 크기만 신경 쓰고 line-height(행간)를 놓치면 가독성이 절반으로 줄어듭니다. 행간은 폰트 크기 대비 1.4-1.7배가 일반적이며, 본문은 1.6 전후가 가장 편안합니다.
| 용도 | line-height 권장값 |
|---|---|
| 본문 문단 | 1.5 - 1.7 |
| 제목 | 1.2 - 1.4 |
| 리스트, 메뉴 | 1.4 - 1.6 |
| 표, 좁은 셀 | 1.3 - 1.5 |
한글은 알파벳보다 글자 폭이 넓고 형태가 복잡합니다. 영문 디자인을 그대로 가져와 한글에 적용하면 답답해 보이는 경우가 많습니다. 한글 본문은 letter-spacing을 -0.02em 정도로 살짝 좁히고, line-height는 1.6 이상으로 넉넉하게 잡는 편이 자연스럽습니다.
자주 하는 실수와 점검 체크리스트
실무에서 자주 보이는 폰트 크기 관련 실수를 정리했습니다. 작업한 페이지를 점검할 때 활용하세요.
- 본문을 14px 이하로 작게 설정해서 가독성을 떨어뜨리는 경우
- 모바일에서도 데스크톱과 동일한 크기를 유지해 화면을 꽉 채우는 경우
- 제목과 본문의 크기 차이가 너무 작아 위계가 무너지는 경우
- line-height 값을 지정하지 않아 줄 사이가 답답한 경우
- 입력 폼 input의 font-size를 14px로 설정해 iOS에서 자동 확대가 발생하는 경우
점검할 때는 실제 기기에서 직접 확인하는 것이 가장 정확합니다. 크롬 개발자 도구의 디바이스 모드는 픽셀 비율까지 시뮬레이션해주지만, 체감 크기는 실기기에서 다르게 느껴집니다. 가능하다면 노트북, 스마트폰, 태블릿에서 한 번씩 본문을 읽어보고 어색한 지점이 없는지 확인하세요.
웹 폰트 크기 기준은 정답이 하나만 있는 영역은 아닙니다. 다만 본문 16px, 행간 1.6, 모바일 입력 폼 16px 이상이라는 세 가지 원칙은 어떤 사이트에서도 흔들리지 않는 출발점입니다. 이 기준에서 시작해 사이트 콘셉트와 사용자에 맞춰 미세 조정하면 가독성과 디자인 완성도를 동시에 잡을 수 있습니다.
