반응형 폰트 크기 계산기

모바일과 데스크톱 화면 사이에서 부드럽게 변하는 CSS clamp() 폰트 크기를 생성합니다.

미리보기 텍스트
The quick brown fox jumps over the lazy dog.
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);

반응형 폰트(Fluid Typography) 가이드

모바일 화면부터 대형 픽셀 모니터까지 부드럽게 글자 크기가 변화형 타이포그래피를 구현하는 방법을 알아봅니다.

CSS Clamp() 함수의 마법

과거에는 반응형 폰트를 구현하기 위해 미디어 쿼리(Media Query)를 여러 번 중첩해서 사용했습니다. 하지만 `clamp(최솟값, 유동값, 최댓값)` 함수를 사용하면 단 한 줄의 CSS 코드로 화면 크기(vw)에 맞춰 끊김 없이 폰트 크기가 조절됩니다. 뷰포트가 줄어들더라도 지정한 '최소 폰트 크기' 이하로는 작아지지 않고, 커지더라도 '최대 폰트 크기' 이상 넘어가지 않아 완벽한 가독성을 보장합니다.

입력값 설정 방법

**최소 화면 너비(Mobile)**: 보통 320px 로 설정합니다. 이 너비에서 폰트는 입력한 '최소 폰트 크기'가 됩니다. **최대 화면 너비(Desktop)**: 보통 1280px ~ 1920px 로 설정합니다. 이 구간에 도달하면 폰트는 '최대 폰트 크기'로 고정됩니다. 중간 구간에서는 뷰포트 너비(vw)에 비례하여 자연스럽게 글자가 커집니다.

실무 적용 팁

생성된 `clamp()` 코드는 제목(`h1`, `h2`)처럼 큰 글자일수록 극적인 효과를 냅니다. 본문(`p` 태그)은 가독성의 변화가 크면 눈이 피로할 수 있으므로, 최소/최대 폰트 간의 갭을 적게 설정하는 것을 권장합니다.