유동형 타이포그래피용 CSS clamp() 생성기
최소·최대 픽셀 크기와 두 뷰포트 너비를 rem 단위의 유동형 clamp()로 바꾸고, 뷰포트 전 구간에서 실시간 글자 미리보기를 보여줍니다.
유동형 CSS clamp() 생성기
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
화면 너비가 320px보다 좁으면 16px로 고정되고, 1280px보다 넓으면 24px로 고정되며, 그 사이에서는 한쪽에서 다른 쪽으로 직선으로 변합니다 — 값의 "…rem + …vw" 부분이 그 직선입니다.
계산 과정 보기
기울기: (24 − 16) ÷ (1280 − 320) = 0.0083 — 너비가 한 픽셀 늘 때마다 크기가 0.0083px씩 변하며, 값에서는 0.8333vw입니다.
절편: 16 − 320 × 0.0083 = 13.3333px — 너비가 전혀 없다고 칠 때 이 직선이 주는 크기입니다.
선호 값: 13.3333px + 0.0083 × 너비. 두 경계 사이에서 쓰이고, 바깥에서는 가까운 경계에 고정됩니다.
미리보기
타입 스케일
본문은 위의 최소·최대 크기를 쓰고, 제목은 한 단계 올라갈 때마다 비율만큼 커집니다.
:root {
--fs-body: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem); /* 16px → 24px */
--fs-h6: clamp(1.2rem, 0.975rem + 1.125vw, 1.875rem); /* 19.2px → 30px */
--fs-h5: clamp(1.44rem, 1.1388rem + 1.5063vw, 2.3438rem); /* 23.04px → 37.5px */
--fs-h4: clamp(1.728rem, 1.3274rem + 2.0028vw, 2.9297rem); /* 27.65px → 46.88px */
--fs-h3: clamp(2.0736rem, 1.5441rem + 2.6475vw, 3.6621rem); /* 33.18px → 58.59px */
--fs-h2: clamp(2.4883rem, 1.7919rem + 3.4822vw, 4.5776rem); /* 39.81px → 73.24px */
--fs-h1: clamp(2.986rem, 2.074rem + 4.5601vw, 5.722rem); /* 47.78px → 91.55px */
}이 CSS clamp() 생성기의 기능
최소·최대 크기(px), 각 크기가 적용될 뷰포트 너비, 루트 글꼴 크기를 입력하면 유동형 타이포그래피나 여백에 바로 붙여넣을 수 있는 clamp() 값을 만들어 줍니다. 두 브레이크포인트 사이의 기울기를 계산하고, 루트 글꼴 크기를 기준으로 픽셀을 rem으로 변환한 뒤 clamp(minRem, yRem + slopeVw, maxRem) 형태로 출력합니다. 결과값은 뷰포트에 따라 부드럽게 확장되고 지정한 경계에서 고정되며, 미디어 쿼리가 필요 없습니다. 결과 아래의 미리보기가 그 값이 실제로 계산되는 크기로 글자를 그려 주고, 뷰포트 너비 슬라이더가 두 브레이크포인트 바깥까지 움직이므로 크기가 어디서 멈추는지 눈으로 확인할 수 있습니다.
계산 원리
기울기는 (maxPx - minPx) / (maxVw - minVw)이며 ‘기준 단위’에서 고른 단위(바꾸지 않으면 vw)로 표현되어, 뷰포트 너비에 따라 — cqw·cqi라면 컨테이너 너비에 따라 — 값이 커집니다. 절편 항 -minVw * slope + minPx는 이 직선이 최소 뷰포트에서 최소 크기를, 최대 뷰포트에서 최대 크기를 지나도록 고정하는 rem 오프셋입니다. 값은 소수점 넷째 자리까지 반올림하여 정확성을 유지하면서도 CSS가 불필요하게 길어지지 않게 합니다. 최소 뷰포트보다 좁으면 최소 크기로, 최대 뷰포트보다 넓으면 최대 크기로 고정됩니다. 값 아래의 ‘계산 과정 보기’를 펼치면 입력한 숫자로 이 계산을 보여 줍니다 — 너비 1px당 크기 변화이자 값 속 수치인 기울기, 절편, 그리고 절편 + 기울기 × 너비인 선호 값입니다. 값을 쓰는 계산과 같은 계산에서 나오므로 둘이 어긋날 수 없습니다.
자주 묻는 질문
왜 픽셀을 rem으로 변환하나요?
경계값에 rem을 사용하면 유동형 크기가 사용자의 루트 글꼴 크기에 연동되므로 브라우저와 접근성 확대 설정이 그대로 반영됩니다. 픽셀 입력은 디자인을 손쉽게 기술하기 위한 것일 뿐, 출력은 rem과, ‘기준 단위’를 바꾸지 않으면 vw로 표현됩니다.
그래도 미디어 쿼리가 필요한가요?
아니요. 하나의 clamp() 값이 최소·최대 뷰포트 사이에서 크기를 연속적으로 확장하고 그 범위 밖에서는 경계값으로 고정되므로, 해당 속성에는 보통 브레이크포인트 미디어 쿼리가 필요 없습니다.
rem으로 작업하거나 타입 스케일 전체를 만들 수 있나요?
네. 크기를 px나 rem으로 넣을 수 있고 결과도 어느 쪽으로든 쓸 수 있습니다. ‘타입 스케일’은 뷰포트 양 끝의 비율로 본문과 모든 제목 단계의 clamp()를 만들어 주고, 한 번에 복사하는 버튼도 있습니다.
컨테이너 단위나 동적 뷰포트 단위를 쓰거나, 토큰이나 Tailwind 클래스로 받을 수 있나요?
네. ‘기준 단위’에서 값이 따라 커질 단위를 vw, svw, lvw, dvw, vi, cqw, cqi 중에서 고릅니다. 컨테이너 단위를 고르면 너비 칸과 미리보기 슬라이더가 컨테이너 너비로 바뀌고, 부모 요소에 container-type을 지정해야 한다고 알려 줍니다. ‘적용할 속성’은 복사할 줄의 속성을 font-size, padding, gap 같은 목록에서 고르거나 ‘직접 입력…’으로 적게 하고, ‘출력 형식’은 그 줄을 선언, CSS 사용자 정의 속성, SCSS 변수, Tailwind 클래스 중 하나로 씁니다. 사용자 정의 속성과 SCSS 변수는 ‘이름’ 칸의 이름을 씁니다.
clamp() 값이 어떻게 계산됐는지 볼 수 있나요?
네. 값 아래의 ‘계산 과정 보기’를 펼치세요. 입력한 숫자로 기울기를 (최대 − 최소) ÷ (최대 너비 − 최소 너비)로 보여 주고 — 너비 1px당 크기가 몇 px 변하는지와 값 속의 수치로 — 이어서 절편(최소 − 최소 너비 × 기울기)과 절편 + 기울기 × 너비인 선호 값을 보여 줍니다. 계산 과정과 값은 같은 계산에서 나오므로 서로 어긋날 수 없습니다.