CSS clamp 계산기(유동 타이포그래피)

CSS clamp(최소, 선호, 최대)를 쓰면 크기가 화면 너비에 따라 부드럽게 커지다가 최소와 최대에서 멈춥니다. 미디어 쿼리가 필요 없습니다. 어려운 부분은 가운데 값입니다. 한 화면 너비에서 가장 작은 크기, 다른 너비에서 가장 큰 크기가 되도록 rem과 vw를 섞어야 하기 때문입니다. 이 계산기는 네 개의 숫자로 그 값을 구하고, 대표적인 화면 너비에서의 크기를 보여 주며, vw 단위가 일으키는 WCAG 글자 확대 문제도 검사합니다.

사용 방법

1. 가장 작은 크기와 가장 큰 크기를 입력하고, 단위가 px인지 rem인지 고릅니다.
2. 각 크기가 적용될 화면 너비를 입력합니다.
3. 결과 단위(rem 권장 또는 px)와 속성 이름을 고릅니다.
4. CSS 한 줄을 복사합니다. "추가 크기"에 줄을 더하면 CSS 변수 묶음을 얻을 수 있습니다.

계산식

slope = (max − min) ÷ (vw₁ − vw₀) · intercept = min − slope × vw₀ · clamp(min, intercept + slope × 100vw, max)

크기는 먼저 px로 바꾸고(rem × 루트 글꼴 크기), 절편은 결과를 위해 다시 rem으로 바꿉니다. 두 너비 사이에서는 크기가 직선을 따르고, 그 바깥에서는 clamp()가 최소 또는 최대를 유지합니다.

예시

320 px에서 16 px, 1280 px에서 24 px로 가는 경우: 기울기 = 8 ÷ 960 = 0.008333이므로 vw 부분은 0.8333vw이고, 절편 = 16 − 0.008333 × 320 = 13.33 px = 0.8333rem입니다. 결과는 clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)입니다. 태블릿 너비 768 px에서는 13.33 + 6.4 = 19.73 px가 됩니다.