clamp() 하나로 유동 타이포

제목 크기를 화면마다 다르게 하려고 미디어 쿼리를 여러 개 쌓는 건 번거롭다. clamp(최소, 선호, 최대)는 한 줄로 그 일을 한다.

h1 {
  font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.4rem);
}

가운데 값이 뷰포트에 따라 늘고 줄되, 절대 최소보다 작아지거나 최대보다 커지지 않는다. vw만 쓰면 아주 좁거나 넓은 화면에서 극단으로 가는데, clamp()가 위아래를 막아 준다.

주의할 점 하나. 접근성을 위해 vw에 rem을 섞어 둔다. 순수하게 vw만 쓰면 사용자가 브라우저 글자 크기를 키워도 반응하지 않는다. 위 예시처럼 1.2rem + 2.5vw 꼴로 두면 확대에도 대응한다.

미디어 쿼리를 지우고 나면 CSS가 눈에 띄게 짧아진다.