반응형 웹 폰트 크기 자동 조절 CSS clamp() 계산기

미디어 쿼리(Media Query)를 일일이 작성하지 않고도 화면 크기에 맞춰 자연스럽게 변하는 폰트 크기를 설정하세요.

따라 하기

  1. 1

    폰트 크기 범위 입력

    모바일 최소 폰트 크기(px)와 데스크톱 최대 폰트 크기(px)를 설정합니다.

  2. 2

    뷰포트 너비 지정

    변화가 시작되는 최소 뷰포트와 최대 뷰포트 너비를 지정합니다.

  3. 3

    clamp 코드 복사

    자동 계산된 clamp(...) 코드를 복사하여 스타일시트에 붙여넣습니다.

유연한 타이포그래피 구현

화면 폭에 비례하는 vw 단위와 기준 rem 단위를 결합하여 모든 디스플레이에서 최적의 가독성을 제공합니다.

원클릭 코드 복사

최소/최대 글꼴 크기와 뷰포트 너비를 입력하면 즉시 복사 가능한 CSS 한 줄 코드로 완성됩니다.

상황별로 자세히

CSS clamp() 계산기 →

자주 묻는 질문

px 단위를 넣어도 rem과 vw로 자동 환산되나요?

기본 루트 폰트(16px) 기준으로 정확한 rem 값과 반응형 vw 비율을 자동 산출합니다.

모든 모던 브라우저에서 clamp()가 지원되나요?

크롬, 사파리, 엣지, 파이어폭스 등 주요 현대 브라우저에서 모두 지원됩니다.