CSS clamp()로 반응형 폰트 완성 — 미디어쿼리 없이 글자 크기가 자동으로 조정되는 3단계 설정법
"CSS clamp()"를 쓰면 미디어 쿼리 한 줄 없이도 모바일에서 작게, 데스크탑에서 크게 자동으로 폰트가 조정된다. 예전에는 화면 크기별로 미디어 쿼리를 여러 개 만들고 각각 폰트 크기를 따로 지정했는데, 브레이크포인트 사이에서 갑자기 글자가 점프하는 문제가 항상 있었다. clamp()는 그 점프 없이 화면 크기에 맞게 폰트가 부드럽게 변한다. 마치 수도꼭지 밸브처럼, 최소값과 최대값 사이에서 물 흐르듯 자연스럽게 조정된다.
📋 목차
- CSS clamp()가 뭔가
- clamp() 문법 완전 해석
- 본문 폰트에 clamp() 적용하기
- 제목 태그별 clamp() 설정법
- vw 단위 계산법 — 어렵지 않다
- 미디어 쿼리 방식 vs clamp() 방식 비교
- 티스토리 본문에 바로 적용하는 코드
- 정리
📏 CSS clamp()가 뭔가
CSS clamp()는 값의 범위를 제한하는 함수다. 최솟값, 선호값(유동값), 최댓값 이렇게 세 가지를 인자로 받는다. 화면이 작으면 최솟값 이하로 내려가지 않고, 화면이 크면 최댓값 이상으로 올라가지 않는다. 그 사이에서는 선호값에 따라 유동적으로 변한다.
폰트 크기뿐 아니라 패딩, 마진, 너비 등 모든 크기 속성에 쓸 수 있다. 2021년 이후 Chrome, Safari, Firefox, Edge 모두 지원한다. "CSS clamp()"는 현대적인 반응형 CSS의 핵심 도구 중 하나다.
🔍 clamp() 문법 완전 해석
font-size: clamp(최솟값, 선호값, 최댓값);실제 예시로 보자.
font-size: clamp(14px, 2.5vw, 18px);이 코드는 "폰트 크기는 최소 14px, 최대 18px로 제한하되, 그 사이에서는 화면 너비의 2.5%를 따라가라"는 뜻이다. 화면이 560px이면 2.5vw = 14px이라 최솟값에 맞춰진다. 화면이 720px이면 2.5vw = 18px이라 최댓값에 맞춰진다. 그 사이에서는 자연스럽게 변한다.
선호값 자리에 vw(뷰포트 너비 %)나 계산식 calc()를 쓸 수 있다. vw 단위가 가장 많이 쓰인다.
📖 본문 폰트에 clamp() 적용하기
블로그 본문 폰트는 모바일에서 너무 작으면 읽기 힘들고, 데스크탑에서 너무 크면 줄이 짧아진다. "CSS clamp()"로 적절한 범위를 설정하면 이 두 문제를 동시에 해결할 수 있다.
body {
font-size: clamp(15px, 1.5vw + 0.5rem, 18px);
line-height: 1.8;
}선호값에 1.5vw + 0.5rem처럼 vw와 rem을 조합하면 더 정밀한 유동성이 만들어진다. 이 공식은 화면이 작아질수록 vw 부분이 줄어들면서 자연스럽게 작아지는 효과를 낸다. 본문 폰트는 보통 최소 15px, 최대 18px 범위가 무난하다.
🔤 제목 태그별 clamp() 설정법
제목 태그는 본문보다 크기 변화 폭이 더 크기 때문에 clamp() 효과가 더 잘 보인다.
h1 {
font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}
h2 {
font-size: clamp(1.4rem, 3vw + 0.5rem, 2.25rem);
}
h3 {
font-size: clamp(1.15rem, 2vw + 0.5rem, 1.75rem);
}
p {
font-size: clamp(15px, 1.5vw + 0.5rem, 18px);
}모바일에서는 h1이 1.75rem(약 28px)으로 시작하고, 큰 화면에서는 3rem(48px)까지 올라간다. 미디어 쿼리 없이 이 범위 안에서 부드럽게 변한다. 위계 구조가 어느 화면에서든 유지된다는 게 핵심이다.
🧮 vw 단위 계산법 — 어렵지 않다
vw(viewport width)는 화면 너비의 1%다. 1vw는 화면 너비가 1200px이면 12px이다. 2vw면 24px이다. clamp() 선호값의 vw를 어떻게 설정하느냐가 유동 폰트의 변화 속도를 결정한다.
원하는 최솟값과 최댓값 사이의 vw를 계산하는 공식이 있다.
선호 vw = (최댓값 - 최솟값) / (최대화면너비 - 최소화면너비) × 100예를 들어 폰트를 400px 화면에서 15px, 1200px 화면에서 18px로 만들고 싶다면:
(18 - 15) / (1200 - 400) × 100 = 0.375vw
이 계산을 매번 하기 귀찮다면 "Fluid Type Scale" 같은 온라인 계산기를 쓰면 된다. 값 넣으면 clamp() 코드를 바로 뽑아준다.
⚖️ 미디어 쿼리 방식 vs clamp() 방식 비교
기존 미디어 쿼리 방식은 이렇다.
/* 미디어 쿼리 방식 — 브레이크포인트에서 글자 크기가 점프함 */
h1 { font-size: 1.75rem; }
@media (min-width: 768px) {
h1 { font-size: 2.25rem; }
}
@media (min-width: 1200px) {
h1 { font-size: 3rem; }
}"CSS clamp()" 방식은 이렇다.
/* clamp() 방식 — 한 줄, 점프 없음 */
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }코드 양이 줄어드는 것도 좋지만, 브레이크포인트에서 글자 크기가 뚝 점프하는 현상이 없어지는 게 더 중요하다. 사용자 경험이 부드러워진다.
🛠️ 티스토리 본문에 바로 적용하는 코드
티스토리 CSS 편집창에 아래 코드를 추가하면 된다. 기존 font-size 속성을 찾아서 덮어씌우거나, 아래 코드를 CSS 맨 아래에 추가해서 기존 설정을 오버라이드한다.
/* 티스토리 본문 유동형 폰트 */
#content, .article-view, .tt_article_useless_p_margin {
font-size: clamp(15px, 1.5vw + 0.5rem, 18px) !important;
line-height: 1.85;
word-break: keep-all;
}
#content h2 {
font-size: clamp(1.3rem, 2.5vw + 0.5rem, 1.85rem) !important;
}
#content h3 {
font-size: clamp(1.1rem, 1.8vw + 0.4rem, 1.5rem) !important;
}word-break: keep-all은 한국어 단어가 줄 끝에서 잘리지 않게 해준다. 한국어 블로그라면 이것도 같이 넣는 게 좋다. 스킨마다 CSS 클래스명이 다를 수 있으니 F12로 실제 클래스를 확인하고 수정하자.
✅ 정리
"CSS clamp()"는 미디어 쿼리 여러 개를 한 줄로 압축해주는 함수다. 모바일부터 와이드 모니터까지 폰트가 부드럽게 스케일되고, 최솟값·최댓값으로 가독성을 보장한다. 처음에 vw 계산이 낯설게 느껴질 수 있는데, 온라인 계산기 하나 북마크해두면 그 장벽도 없어진다. 오늘 당장 블로그 CSS에 clamp() 한 줄 추가해보자. 모바일로 봤을 때 확실히 차이가 느껴진다.
참고 자료 및 출처
- MDN Web Docs — clamp(): https://developer.mozilla.org/ko/docs/Web/CSS/clamp
- Fluid Type Scale Calculator: https://www.fluid-type-scale.com/
- web.dev — Fluid typography: https://web.dev/articles/fluid-typography
- CSS-Tricks — Fluid Typography: https://css-tricks.com/snippets/css/fluid-typography/