CSS clamp 글꼴 계산기

두 화면 너비에서 원하는 글꼴 크기를 기준으로 rem과 vw를 사용하는 clamp를 계산하세요.

두 화면 너비 사이에서 글꼴 크기가 부드럽게 변하도록 clamp() 값을 계산합니다.

사용 순서

최소와 최대 글꼴 크기(px)와, 각 크기가 적용될 최소와 최대 화면 너비(px)를 입력합니다.
루트 글꼴 크기를 확인합니다. 기본값은 16px이며 실제 페이지의 html 글꼴 크기와 맞춰야 합니다.
결과 복사로 font-size 선언을 가져가고, 페이지를 두 화면 너비에서 열어 값이 맞는지 확인합니다.

예시

최소 16px(화면 320px), 최대 32px(화면 1280px), 루트 16px을 입력하면 font-size: clamp(1rem, 0.6666666666666667rem + 1.6666666666666667vw, 2rem); 가 나옵니다.

한계

두 점을 잇는 직선 하나로만 계산합니다. 여러 구간의 곡선이나 단계형 글꼴 크기는 만들 수 없습니다. 최대 글꼴 크기는 최소 글꼴 크기와 같거나 커야 합니다. vw는 스크롤바 폭을 포함한 뷰포트 기준이라 실제 화면과 몇 픽셀 차이가 날 수 있습니다.

보안 주의

기울기 부분의 vw 값은 브라우저의 글꼴 크기 설정을 따르지 않습니다. 본문 글꼴에 쓸 때는 최소와 최대 값이 rem 기준으로 잡혀 있어 사용자 설정이 반영되는지 확인하세요.

배경 지식

clamp(최소, 기준값, 최대)는 기준값을 최소와 최대 사이로 제한하는 CSS 함수입니다. 글꼴 크기에 쓰면 화면이 좁을 때는 최소 크기, 넓을 때는 최대 크기에 머물고 그 사이에서만 너비에 따라 크기가 변합니다. 미디어 쿼리를 여러 개 나누지 않아도 되어 CSS가 짧아집니다.

이 도구는 (최소 너비, 최소 글꼴)과 (최대 너비, 최대 글꼴) 두 점을 잇는 직선을 구합니다. 직선의 기울기는 뷰포트 너비에 비례하도록 vw 단위로 바꾸고, 절편은 rem 단위로 바꿔 기준값을 만듭니다. 두 점 사이에서만 값이 변하도록 최소와 최대 값으로 양 끝을 잘라 주는 것이 clamp의 역할입니다.

글꼴 크기를 rem으로 두는 이유는 사용자가 브라우저 기본 글꼴 크기를 바꿨을 때 전체 비율이 함께 움직이게 하기 위해서입니다. 그래서 루트 글꼴 크기 입력이 계산에 들어가며, 실제 페이지의 루트 크기와 다르면 계산 결과도 어긋납니다. 예를 들어 html 글꼴 크기를 62.5%로 줄여 1rem을 10px로 쓰는 기법을 쓴다면 루트 값을 10으로 입력해야 합니다.

자주 묻는 질문

최소 글꼴 크기와 최대 글꼴 크기를 같게 넣으면 어떻게 되나요?

기울기가 0이 되어 어떤 화면 너비에서도 같은 크기가 됩니다. 이 도구는 최대와 최소가 같은 입력을 허용하므로, 결과는 clamp(1rem, 1rem + 0vw, 1rem) 형태의 고정 크기로 나옵니다.

루트 글꼴 크기를 20px로 바꾸면 결과가 달라지나요?

네, rem으로 환산하는 값이 달라집니다. 루트 크기를 20px로 넣으면 최소 16px이 0.8rem으로 나오므로, 실제 html 글꼴 크기와 입력한 루트 값을 맞춰야 목표한 픽셀 크기가 나옵니다.

계산 결과가 맞는지 어떻게 확인하나요?

최소 너비와 최대 너비에서 글꼴 크기가 입력한 최소와 최대 값과 같은지 개발자 도구로 확인합니다. 중간 너비에서는 두 점을 잇는 직선 위의 값이 나와야 하며, 값이 어긋나면 루트 글꼴 크기 입력부터 점검하세요.