📐반응형 폰트 clamp() 계산기

최소·최대 폰트와 뷰포트 너비를 입력하면 CSS clamp() 값을 자동 생성합니다.

최소 폰트 크기

px

최대 폰트 크기

px

최소 뷰포트 너비

px

최대 뷰포트 너비

px

CSS clamp()로 반응형 폰트 구현하기

CSS clamp() 함수는 미디어 쿼리 없이도 화면 크기에 따라 유동적으로 변하는 폰트 크기를 구현할 수 있는 방법입니다. clamp(최솟값, 기본값, 최댓값) 구조로, 기본값은 vw 단위를 활용해 화면 폭에 비례하여 선형으로 변합니다.

계산 원리

뷰포트가 최솟값 미만일 때는 최소 폰트, 최댓값 초과일 때는 최대 폰트로 고정됩니다. 그 사이에서는 두 극단을 잇는 선형 공식으로 부드럽게 변합니다. 기울기 = (최대 폰트 - 최소 폰트) / (최대 뷰포트 - 최소 뷰포트), y절편 = 최소 폰트 - 기울기 × 최소 뷰포트입니다.

실무 적용 예시

H1 제목에 모바일 24px, 데스크탑 40px을 clamp()로 구현하면 중간 화면에서 자연스럽게 전환됩니다. font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem) 같은 형태로 CSS에 직접 적용할 수 있으며, 반응형 웹 디자인 시스템의 핵심 기법 중 하나입니다.

자주 묻는 질문

브라우저 지원 범위는 어떻게 되나요?

Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+ 등 모든 모던 브라우저에서 지원됩니다. IE는 미지원이므로 IE 지원이 필요하면 미디어 쿼리 폴백을 함께 사용하세요.

폰트 외에 다른 CSS 속성에도 쓸 수 있나요?

네, padding, margin, width, height, gap 등 수치를 받는 모든 CSS 속성에 clamp()를 적용할 수 있습니다. 반응형 간격 시스템을 만들 때도 매우 유용합니다.