웹 개발CSS

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

2026-09-20 · 2분 읽기

유동적 타이포그래피 적용의 흔한 실수

반응형 웹을 제작할 때 미디어 쿼리를 일일이 작성하지 않고 뷰포트 너비에 따라 글자 크기를 부드럽게 조절하기 위해 CSS clamp() 함수를 자주 사용합니다.

그러나 대다수 프로젝트에서 대제목에만 clamp()를 적용하고 본문 폰트 크기는 고정값으로 남겨두는 실수가 발생합니다.

제목 글자 크기만 변하면 좁은 화면에서는 제목과 본문의 비율이 좁아지고, 넓은 화면에서는 제목만 비대해져 전체적인 시각적 위계가 무너집니다.

안정적인 타이포그래피 시스템은 본문 기본 크기를 기준으로 일정한 비율을 곱해 제목 단계별 크기를 정의합니다.

모바일 화면에서 본문이 1rem이고 제목이 1.25rem이라면, 데스크톱 화면에서 제목이 2.5rem으로 커질 때 본문 역시 1.125rem 수준으로 확장되어야 합니다.

본문 크기를 1rem으로 고정해 두면 화면 크기에 따라 비율 간격이 벌어져 읽기 경험의 편차가 생깁니다.

따라서 제목과 본문 모두에 clamp()를 적용하여 양쪽 끝점에서 조화로운 비율이 유지되도록 설계해야 합니다.

제목과 본문에 서로 다른 뷰포트 범위를 적용하면 화면이 리사이징되는 중간 구간에서 폰트 간의 비율이 불규칙하게 왜곡됩니다.

최소 뷰포트 너비와 최대 뷰포트 너비를 모든 타이포그래피 요소에 동일하게 지정하여 기준점을 통일합니다.

선형 기울기와 절편을 직접 계산하기 복잡하다면 CSS clamp() 계산기 에 최소·최대 글자 크기와 뷰포트 너비를 입력하여 clamp(rem + vw) 코드를 자동 생성할 수 있습니다.

본문 글자 크기가 커질 때는 한 줄에 들어가는 글자 수도 함께 관리해야 합니다.

일반적으로 읽기 편한 한 줄 글자 수는 한글 기준 45자에서 75자 내외입니다.

화면이 넓어지면서 폰트 크기만 커지고 본문 컨테이너 너비가 고정되어 있으면 줄당 글자 수가 부족해집니다.

반대로 컨테이너가 넓어지면 시선 이동 거리가 길어지므로 본문 래퍼의 최대 너비를 ch 단위로 설정해 줄 길이를 유지해야 합니다.

본문 폰트를 모바일 1rem에서 데스크톱 1.125rem으로 설정하고, 대제목을 1.5rem에서 2.5rem으로 설정할 경우 360px~1200px 뷰포트 범위에 맞춰 수식을 도출합니다.

이때 각각의 폰트 클래스에 CSS clamp() 계산기 에서 복사한 CSS 코드를 부여하면 화면 너비가 변해도 전체 레이아웃의 타이포그래피 질서가 유지됩니다.