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

두 브레이크포인트 사이를 선형으로 스케일 — 점프 없음, 각 브레이크포인트마다 값 관리 불필요. 같은 효과를 CSS 줄 수 더 적게.

사용자가 브라우저에서 기본 폰트 사이즈를 바꿀 수 있는데(예: 접근성), rem은 이를 존중하고 px는 무시.

뷰포트 1vw 증가당 값이 얼마나 커지는지. intercept와 합쳐 (minVw, minVal)·(maxVw, maxVal)을 지나는 1차 함수.

clamp()는 2020년 이후 모든 브라우저 — Safari 13.1·Chrome 79·Firefox 75. 2026년 어디서나 안전.

안 됩니다. 뷰포트 단위만으로 만든 값은 브라우저 기본 글꼴 크기를 키워 둔 독자를 무시하게 되어, 텍스트 크기를 조절할 수 있어야 한다는 요구를 충족하지 못합니다. 이 도구처럼 중간 항에 rem 성분을 남겨 두면 그 설정이 결과에 계속 반영됩니다.

값이 더 이상 변하지 않고 도달한 쪽 끝에서 평평하게 고정됩니다. 맨 calc 대신 clamp를 쓰는 이유가 바로 이것입니다. 작은 분기점 아래에서는 최솟값을, 큰 분기점 위에서는 최댓값을 유지하며, 아무도 설계하지 않은 크기까지 직선을 따라 계속 나아가지 않습니다.