CSS clamp() 생성기

사용법

네 개의 값을 정합니다. 최소 뷰포트와 최대 뷰포트는 크기가 변하기 시작하고 멈추는 화면 너비이고, 최소 크기와 최대 크기는 그 두 지점에서의 값입니다. 예를 들어 화면 360px에서 16px, 1280px에서 24px로 두면, 그 사이에서는 글자 크기가 화면 너비에 비례해 부드럽게 커집니다. 중단점(media query)은 필요 없습니다.

생성되는 값의 가운데 항(선호값)에는 rem과 vw가 함께 들어갑니다. rem을 빼고 vw만 쓰면 사용자가 브라우저 확대를 해도 글자가 커지지 않아 접근성 문제가 생기기 때문입니다. 결과를 font-size, margin, padding, gap 등 길이가 필요한 어느 속성에나 그대로 붙여 쓸 수 있습니다.

최소·최대 크기가 같으면 변화가 없으니 두 값은 다르게 두세요. 최소 뷰포트가 최대 뷰포트보다 크면 계산이 뒤집히므로 입력 순서도 확인하시고요.

실제 응용

값 하나가 아니라 스케일로 쓴다

필요할 때마다 clamp()를 새로 만들면 페이지마다 크기가 조금씩 어긋납니다. 이 도구는 값 하나를 뽑는 데가 아니라 스케일을 짜는 데쓰는 편이 낫습니다. 본문·소제목·제목 서너 개를 먼저 만들어 변수로 묶어 두고, 이후에는 변수만 가져다 쓰는 방식입니다.

:root {
  --text-body: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);     /* 16 → 18 */
  --text-lead: clamp(1.125rem, 0.9783rem + 0.6522vw, 1.5rem);   /* 18 → 24 */
  --text-h2:   clamp(1.5rem, 1.1087rem + 1.7391vw, 2.5rem);     /* 24 → 40 */
  --text-h1:   clamp(2rem, 1.2174rem + 3.4783vw, 4rem);         /* 32 → 64 */
}

네 줄 모두 최소 뷰포트 360px, 최대 뷰포트 1280px로 맞춘 값입니다. 기준 화면을 통일해야 화면 폭이 바뀔 때 글자들이 같은 속도로 함께 커집니다. 제목만 1920px 기준으로 만들면 중간 화면에서 제목만 유독 작아 보입니다.

최대 뷰포트를 1920으로 잡지 않는다

흔한 실수입니다. 최대 뷰포트를 1920px로 두면 그 크기에 도달하는 화면이 거의 없어서, 실제로는 최대 크기를 구경도 못 합니다.360px에서 16px, 1920px에서 24px로 설정했을 때 실제 크기는 이렇습니다.

노트북 대부분이 1280~1512px 사이입니다. 최대 뷰포트는 1280~1440px 정도로 두고, 그보다 넓은 화면에서는 크기가 더 늘지 않게 고정하는 편이 의도한 디자인에 가깝습니다.

글자 크기 말고도 쓸 곳이 많다

길이를 받는 속성이면 어디든 들어갑니다. 오히려 여백 쪽에서 효과가 더 큽니다. 모바일에서 답답하지 않고 데스크톱에서 허전하지 않은 여백은 중단점을 여러 개 두고 맞추기 번거로운데, clamp()면 한 줄로 끝납니다.

최소값은 읽을 수 있는 크기로

최소 크기를 12px 같은 값으로 내리면 좁은 화면에서 본문이 읽기 어려워집니다. 본문은 16px 아래로 내리지 않는 것을 기준으로 잡으세요. 보조 텍스트도 14px 정도가 하한입니다. 화면이 좁다고 글자까지 작아질 이유는 없습니다 — 좁은 화면일수록 오히려 눈에서 멀리 두고 보는 경우가 많습니다.