6XC

유동 타이포그래피 계산기 — CSS clamp()

두 뷰포트 너비 사이에서 글꼴 크기를 부드럽게 조절하는 CSS clamp()를 생성합니다 — 브레이크포인트가 필요 없습니다.

조회수 753회

CSS —

실시간 미리보기(창 너비를 조절해 보세요):

Almost before we knew it, we had left the ground.

clamp() 공식

유동 타이포그래피는 작은 뷰포트의 최소 크기와 큰 뷰포트의 최대 크기 사이를 선형으로 보간합니다: 기울기 = (최대−최소 글꼴) ÷ (최대−최소 뷰포트), 그 다음 font-size: clamp(최소rem, 절편rem + 기울기·100vw, 최대rem)가 됩니다. 375→1280px 뷰포트 사이에서 16→24px로 설정하면 clamp(1rem, 0.793rem + 0.884vw, 1.5rem)가 되어, 375px에서는 정확히 16px, 1280px에서는 정확히 24px이며 그 사이는 부드럽게 변하고 범위 밖에서는 고정됩니다.

선호값(preferred value)의 rem 부분은 접근성 측면에서 중요합니다. 순수 vw 공식은 사용자의 브라우저 글꼴 크기 설정을 완전히 무시하지만, rem 절편은 확대/축소와 큰 글씨 설정이 계속 작동하도록 유지합니다. 이 계산기는 항상 이 혼합 형태를 출력합니다.

자주 묻는 질문

어떤 뷰포트 범위를 사용해야 하나요?

375px(일반적인 스마트폰)부터 콘텐츠의 최대 너비(보통 1200~1440px)까지입니다. 범위 아래/위에서는 clamp()가 최소/최대값에 고정되므로 워치나 울트라와이드 화면에서도 문제가 생기지 않습니다.

여백에도 사용할 수 있나요?

네 — 동일한 계산 방식이 padding, margin, gap에도 적용됩니다. 여백의 최소/최대값으로 생성한 뒤 clamp()를 커스텀 속성에 넣으세요.

스마트폰에서 텍스트가 정확히 최소 크기가 아닌 이유는 무엇인가요?

실제 CSS 뷰포트 너비(기기 픽셀 ÷ DPR)를 확인해 보세요. "390px" 스마트폰은 375px 범위 시작점보다 넓기 때문에 크기가 의도적으로 최소값보다 약간 크게 나타납니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기