웹 개발CSS

제목만 clamp() 쓰면 본문이 어색해지는 이유: 타이포 스케일을 함께 잡는 법

세눌라 컴퍼니 · 2026-09-20 · 6분 읽기

제목만 커지면 생기는 일

반응형 페이지를 만들 때 미디어 쿼리 대신 CSS clamp()로 화면 너비에 따라 글자 크기를 바꾸는 방법을 많이 씁니다. 그런데 h1에만 clamp()를 넣고 나머지를 고정값으로 두면 화면이 어딘가 어색해집니다.

예를 들어 h1이 360px 화면에서 24px, 1200px 화면에서 40px이 되게 했다고 합시다. h2는 24px, 본문은 16px로 고정입니다. 휴대폰에서는 h1과 h2가 똑같이 24px이라 어느 쪽이 큰 제목인지 구분되지 않습니다. 넓은 모니터에서는 h1이 본문의 2.5배까지 커지는데 본문은 16px 그대로라서, 제목 아래 글이 작고 빽빽해 보이지요.

원인은 단계 사이의 관계를 정하지 않은 데 있습니다. 한 요소만 움직이면 다른 요소와의 간격이 화면마다 들쭉날쭉해집니다.

단계를 표로 먼저 정하기

본문을 기준으로 제목을 몇 단계 둘지 정하고, 단계마다 작은 화면 값과 큰 화면 값을 적습니다. 작은 화면에서는 단계 간격을 좁게, 큰 화면에서는 넓게 두면 양쪽 모두 자연스럽습니다. 휴대폰은 한 줄에 들어가는 글자가 적어서 제목이 크면 여러 줄로 꺾이기 쉽습니다.

이 글에서는 뷰포트 360px~1200px, 1rem = 16px 기준으로 세 단계를 잡았습니다.

360px에서는 16, 20, 24px로 4px씩 오르고 1200px에서는 18, 28, 40px로 간격이 벌어집니다. 어느 너비에서도 h1, h2, 본문 순서가 깨지지 않습니다.

뷰포트 범위는 모든 단계에 똑같이

h1은 360~1200px, 본문은 768~1440px처럼 범위를 따로 잡으면 중간 구간에서 비율이 꼬입니다. 360~768px 사이에서는 h1만 커지고 본문은 최솟값에 멈춰 있습니다. 1200px을 넘으면 반대로 h1이 멈추고 본문만 자라지요. 표에서 정한 비율은 양 끝에서만 맞고 그 사이에서는 어긋납니다.

최소·최대 뷰포트를 하나로 정해 모든 단계에 똑같이 쓰면 중간 너비에서도 단계들이 함께 움직입니다. 위 표에서 780px 값이 양 끝 값의 정확히 가운데인 것도 그래서입니다. 나중에 범위를 바꾸거나 단계를 하나 더할 때도 CSS clamp() 계산기 로 모든 단계를 같은 뷰포트 값으로 다시 뽑아야 비율이 유지됩니다.

clamp() 값 구하기

clamp(최솟값, 선호값, 최댓값)에서 선호값은 rem + vw 꼴의 일차식입니다. 기울기는 (최대 크기 − 최소 크기) ÷ (최대 뷰포트 − 최소 뷰포트)이고, 여기에 100을 곱하면 vw 계수가 됩니다. 절편은 최소 크기 − 기울기 × 최소 뷰포트로 구한 뒤 16으로 나눠 rem으로 바꿉니다.

본문으로 검산해 봅니다. 기울기는 2 ÷ 840 = 0.002381이니 0.2381vw입니다. 절편은 16 − 0.002381 × 360 = 15.143px, 곧 0.9464rem이지요. 1200px에서 15.143 + 2.857 = 18px이 나오니 맞습니다.

:root {
  --step-0: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.0357rem + 0.9524vw, 1.75rem);
  --step-2: clamp(1.5rem, 1.0714rem + 1.9048vw, 2.5rem);
}
body { font-size: var(--step-0); }
h2 { font-size: var(--step-1); }
h1 { font-size: var(--step-2); }

세 줄을 손으로 계산하다 보면 소수점에서 한 번쯤은 틀리기 쉽습니다. 단계마다 CSS clamp() 계산기 에 최소·최대 글자 크기와 360·1200 뷰포트를 넣고, 나온 코드를 복사 버튼으로 옮기면 됩니다. 소수점 자릿수는 위 예시와 조금 다를 수 있습니다.

줄 길이와 간격도 함께 맞추기

본문이 16px에서 18px로 커지면 같은 너비에 들어가는 글자 수가 줄어듭니다. 그러니 본문 영역의 최대 너비는 px로 고정하지 말고 글자 크기를 따라가는 단위로 잡으세요. ch는 숫자 0의 폭이라 영문에는 잘 맞습니다. 한글은 한 글자가 대략 1em 폭이어서 max-width: 40em처럼 em으로 잡는 편이 예측하기 쉽습니다. 몇 em이 읽기 편한지는 실제 원고를 넣어 보고 정하세요.

줄 간격은 line-height: 1.7처럼 단위 없는 숫자로 두면 글자 크기를 따라갑니다. 제목 위아래 여백도 margin-top: 1.5em처럼 em으로 주면 단계가 커질 때 여백도 같이 늘어납니다.

값을 넣은 뒤에는 브라우저 창을 360px부터 1200px까지 천천히 늘려 보며 h1과 h2가 비슷해 보이는 구간이 없는지 눈으로 확인하세요.

자주 하는 실수

• 선호값을 4vw처럼 vw만으로 쓰면 브라우저를 확대해도 글자가 커지지 않습니다. rem을 섞어야 사용자 설정이 반영됩니다.
• 단계마다 뷰포트 범위를 다르게 잡으면 중간 너비에서 순서가 뒤집힐 수 있습니다.
• 본문 최솟값을 16px보다 작게 두면 휴대폰에서 읽기 힘들어질 수 있습니다.
• html { font-size: 10px; }처럼 루트를 px로 고정하면 사용자가 브라우저 기본 글자 크기를 키워도 반영되지 않습니다.

자주 묻는 질문

본문까지 clamp()를 쓰면 너무 커지지 않나요?

최댓값을 1.125rem처럼 정해 두면 그 이상은 커지지 않습니다. 1200px보다 넓은 화면에서도 18px에서 멈춥니다.

오래된 브라우저에서는 어떻게 되나요?

clamp()는 주요 최신 브라우저에서 지원됩니다. 오래된 환경까지 챙겨야 한다면 font-size: 1rem;을 한 줄 먼저 적고 그 아래에 clamp() 줄을 두세요. clamp()를 이해하지 못하는 브라우저는 앞 줄을 씁니다.

단계는 몇 개가 적당한가요?

블로그나 문서형 페이지는 본문, h3, h2, h1 정도면 충분한 경우가 많습니다. 쓰지 않을 단계를 미리 만들어 둘 필요는 없습니다.

마무리

h1만 바꾸지 말고 본문부터 제목까지 단계를 표로 정한 뒤 같은 뷰포트 범위로 묶으면 어느 화면에서도 크기 순서가 유지됩니다. 단계별 값을 CSS clamp() 계산기 에서 뽑아 변수로 모아 두면 나중에 고칠 곳도 한 군데로 줄어듭니다.