CSS clamp 반응형 폰트 계산기

CSS clamp 반응형 폰트 계산기 사용법

이 계산기는 화면 너비에 따라 글꼴 크기가 자연스럽게 변하는 CSS clamp() 값을 만들어 줍니다. 모바일과 데스크톱에서 서로 다른 글꼴 크기를 사용하고 싶을 때 최소·최대 크기와 적용할 뷰포트 범위를 입력해 보세요.

계산 결과는 clamp() 함수 형태로 제공되므로 CSS의 font-size 속성에 바로 붙여 넣을 수 있습니다.

계산 방법

최소 글꼴 크기와 최대 글꼴 크기의 차이를 뷰포트 너비 차이로 나누어 vw 계수를 계산합니다. 이후 최소 뷰포트에서 최소 글꼴 크기가 되도록 절편을 구해 유동적인 선호 크기를 만듭니다.

선호값은 고정된 px 절편과 뷰포트에 따라 변하는 vw 값을 결합한 calc() 식으로 구성됩니다.

계산 예시

• 상황 1: 최소 글꼴 16px, 최대 글꼴 32px, 뷰포트 320px~1440px을 입력하면 clamp(16px, calc(10.286px + 1.786vw), 32px)가 계산됩니다.
• 상황 2: 최소 글꼴 14px, 최대 글꼴 24px, 뷰포트 375px~1200px을 입력하면 clamp(14px, calc(9.455px + 1.212vw), 24px)를 사용할 수 있습니다.

사용 시 주의사항 및 활용 팁

• 본 계산기 결과는 입력한 범위 안에서의 반응형 타이포그래피를 위한 참고용 CSS 값입니다.
• 실제 적용 시에는 사용하는 글꼴의 특성, 줄바꿈, 행간, 접근성을 함께 확인하세요.
• 너무 큰 글꼴 변화가 발생하지 않도록 최소·최대 크기 차이를 적절하게 설정하는 것이 좋습니다.
• clamp()를 지원하지 않는 오래된 환경을 고려해야 한다면 기본 font-size 값을 별도로 지정하세요.