브레이크포인트 없이 유동 크기
clamp(최소, 선호, 최대)는 뷰포트 크기에 따라 값이 부드럽게 변하면서도, 너무 작아지거나 커지지 않게 위아래 한계를 둡니다. 미디어 쿼리로 단계별 글자 크기를 일일이 잡지 않아도 됩니다.
font-size: clamp(1rem, 0.9rem + 1vw, 1.25rem);
세 값이 하는 일
- 최소(min): 모바일에서 읽히는 가장 작은 크기. 이 아래로는 내려가지 않습니다.
- 선호(preferred):
0.9rem + 1vw처럼 고정값과 뷰포트 비율을 더한 식. 화면이 커질수록 같이 커집니다. - 최대(max): 큰 화면에서 멈출 상한.
흔한 실수
- vw만 단독 사용:
font-size: 4vw는 화면이 작으면 너무 작고 크면 과하게 커집니다. 그래서 위아래를 clamp로 묶는 겁니다. - rem 없이 px만: 사용자의 글자 크기 설정을 무시하게 됩니다. 접근성을 위해 rem을 권장합니다.
- 선호식에 고정 rem을 약간 섞어야 작은 화면에서도 최소 가독성이 유지됩니다.
폰트뿐 아니라 padding·gap·width에도 똑같이 쓸 수 있습니다. 최소·선호·최대만 입력하면 전체 식을 만들어 드립니다.