💡 가변 폰트를 CSS clamp()로 만드는 방법

화면이 바뀌어도 글자 크기를 미디어쿼리마다 따로 적지 않고, 한 줄로 최소·중간·최대를 묶는 방식이 clamp()입니다. 이 도구는 본문 기본 크기와 제목 비율, 모바일·모니터 가로폭을 넣으면 가변 폰트용 font-size: clamp(...) 코드를 만들어 줍니다.

작은 화면에서는 너무 작아지지 않게, 큰 모니터에서는 한없이 커지지 않게 막아 둡니다. 미리보기에서 창 너비를 바꿔 보면 제목·본문이 어떻게 움직이는지 바로 확인할 수 있습니다. 미디어쿼리를 여러 개 쌓지 않아도 되어, 제목·본문 규칙을 한곳에서 관리하기 쉽습니다.

📊 비율(스케일)은 어디에 쓰이나요

선택하신 배수는 모바일 쪽 최소 크기를 정할 때 씁니다. 본문을 기준으로 H2는 ×배수, H1은 ×배수의 제곱에 가깝게 잡습니다. 예를 들어 본문 16px·배수 1.25이면 대략 H2 20px, H1 25px부터 시작하고, 큰 화면에서는 ‘제목 키우기’ 옵션만큼 더 커집니다.

본문도 ‘고정’이 아니라면 큰 화면에서 살짝 키웁니다. 예전처럼 본문을 완전 고정으로 두고 제목만 키우고 싶다면 본문 옵션을 고정으로 두면 됩니다.

📌 vw만 쓸 때와 clamp의 차이

font-size: 4vw처럼 뷰포트 단위만 쓰면 화면이 아주 작을 때 글자가 너무 작아지고, 울트라와이드에서는 지나치게 커질 수 있습니다. clamp(최소, 중간식, 최대)는 그 사이에 가변식을 두고 양쪽 끝을 막아 주는 형태입니다.

이 도구가 만드는 중간식은 대략 Nrem + Mvw 형태입니다. 최소·최대 가로폭 사이에서 글자 크기가 직선으로 이어지도록 계산합니다. 숫자가 길어도 한 줄짜리 font-size라서, 팀에서 공유하거나 디자인 토큰 문서에 붙여 두기 좋습니다.

⚙️ 적용 팁

• 블로그·기업 소개는 1.250 배수와 제목 ‘보통’이 무난합니다.
• 랜딩·포트폴리오는 1.414 이상과 제목 ‘강하게’를 시험해 보세요.
• 결과 표에서 줄마다 복사하거나, ‘한 번에 붙여넣기’ 블록으로 h1·h2·body를 통째로 가져가세요.
• 루트 글자 크기를 10px 기준으로 쓰는 프로젝트면, rem 숫자가 기대와 다를 수 있으니 미리보기와 실제 페이지를 함께 확인하세요.

❓ 자주 묻는 점

최소·최대 가로폭은 “이 구간 안에서만 글자가 변한다”는 뜻입니다. 폭이 최소보다 작아도 최소 글자, 최대보다 커도 최대 글자로 멈춥니다. 미리보기는 이 페이지 창 너비 기준이라, 실제 사이트 컨테이너 최대 폭이 다르면 느낌이 조금 달라질 수 있습니다.

표 아래 요약 문구의 ‘대략 크기’는 모바일 최소 px → 모니터 최대 px입니다. 디자이너와 숫자를 맞출 때 참고용으로 쓰면 됩니다. 가변 폰트 코드를 붙인 뒤에는 실제 브레이크포인트에서도 한 번 더 확인해 보세요.