clamp()

폭 따라 매끈하게 커지는 글자

clamp() 한 줄이면 기준 폭에 맞춰 글자 크기가 최솟값과 최댓값 사이에서 연속으로 커지고 작아져요. 미디어쿼리 단계가 필요 없어요.

미리보기

현재 21px

유체 타이포

브레이크포인트 없이 폭에 맞춰 자연스럽게 흐릅니다.

보기 폭 슬라이더를 움직이면 글자가 따라 자라요.

보기 폭 (컨테이너 폭)

360px

미리보기 박스를 기준 폭이라고 생각하고 좁혔다 넓혀 보세요.

최소 크기 (min)

20px

아무리 좁아도 이 크기 밑으론 안 내려가요.

최대 크기 (max)

48px

아무리 넓어도 이 크기 위론 안 올라가요.

cqi 계수 (preferred 기울기)

3cqi

클수록 폭 변화에 더 민감하게(가파르게) 커져요.

프리셋

고정 크기와 비교

clamp() (유체)

생성된 CSS

font-size: clamp(20px, 10.00px + 3.00cqi, 48px);

팁: 이 데모는 박스(컨테이너) 폭에 반응하도록 cqi를 썼어요. 실제 페이지에서 창 전체 폭에 반응시키려면 cqi를 vw로 바꾸면 됩니다.