브레이크포인트마다 글자 크기를 다시 정하던 것을 한 줄로 줄인 방법

문제 발생

제목 크기를 화면 폭에 맞추려고 미디어 쿼리를 계단처럼 쌓았습니다.

.title { font-size: 24px; }
@media (min-width: 640px)  { .title { font-size: 32px; } }
@media (min-width: 1024px) { .title { font-size: 40px; } }

경계에서 크기가 툭툭 튀었고, 요소가 늘어날수록 관리할 규칙도 늘었습니다.

원인 분석

중간값이 없는 것이 문제입니다. 미디어 쿼리는 구간을 나눌 뿐이라 구간 안에서는 고정입니다. 구간을 잘게 쪼갤수록 규칙만 늘고 경계는 여전히 남습니다.

CSS에는 이 요구를 위한 함수가 있습니다. MDN 설명대로 clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))로 해석됩니다. 선호값이 최소보다 작으면 최소가, 최대보다 크면 최대가 쓰이고, 그 사이면 선호값이 그대로 쓰입니다.

폰트 크기에 쓰면 문서 설명 그대로 — 뷰포트 크기에 따라 커지되 최소 글자 크기 아래로 내려가지 않고 최대 글자 크기 위로 올라가지 않는 font-size를 만들 수 있고, 미디어 쿼리 없이 한 줄로 fluid typography와 같은 효과를 냅니다.

해결 방안

1. 한 줄로 바꿉니다.

.title { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); }

선호값에 vw만 쓰면 아주 좁은 화면에서 급격히 작아집니다. vw + rem 형태가 기울기를 완만하게 만듭니다.

2. 접근성 조건을 지킵니다. MDN이 명시하는 요구입니다 — 텍스트 크기에 쓸 때 최대 허용값은 최소 허용값의 두 배 이상인 상대 길이 단위여야 하며, 그래야 페이지를 확대했을 때 텍스트가 최소 200%까지 확대될 수 있습니다.

3. px를 피합니다. 최소·최대를 px로 고정하면 사용자의 브라우저 글자 크기 설정을 무시하게 됩니다. rem 기준으로 씁니다.

4. 여백과 폭에도 씁니다. padding: clamp(1rem, 4vw, 3rem), width: clamp(20rem, 60%, 60rem)처럼 쓰면 컨테이너 규칙도 함께 줄어듭니다.

5. 컨테이너 기준이 필요하면 container query 단위를 검토합니다. 뷰포트가 아니라 부모 폭에 반응해야 하는 카드 안 타이포는 cqi 같은 단위가 더 맞습니다.

6. 실제 두 극단에서 확인합니다. 320px과 초광폭 화면에서 각각 열어보고, 200% 확대에서도 읽히는지 봅니다 — 계산식이 맞아도 결과가 어색한 경우가 있습니다.

공식 문서

• MDN: clamp()
• MDN: CSS values and units — Fluid typography