px·rem·em을 서로 바꾸고, 반응형 폰트용 clamp() 공식을 계산해 뷰포트별로 미리 봐요.
rem은 루트(html) 폰트 크기, em은 부모 요소 폰트 크기 기준입니다. 브라우저 기본값은 16px.
유동 타이포그래피 Fluid Type
미리보기 문장은 클릭해서 바꿀 수 있어요. 기준 폰트 크기를 바꾸면 rem 값이 다시 계산됩니다.
rem = px ÷ 기준 폰트 크기예요. 기준이 16px이면 24px은 1.5rem, 14px은 0.875rem이에요. html { font-size: 62.5% }를 쓰는 사이트라면 기준을 10px로 바꾸면 돼요.
rem은 루트(html) 폰트 크기, em은 부모 요소의 폰트 크기를 기준으로 해요. 'em 기준' 칸에 부모 폰트 크기를 따로 넣으면 em 값이 그에 맞게 계산돼요.
기울기 = (최대 폰트 − 최소 폰트) ÷ (최대 뷰포트 − 최소 뷰포트)이고, 가운데 값은 (최소 폰트 − 기울기 × 최소 뷰포트) + 기울기 × 100vw예요. 예를 들어 16→32px, 360→1280px이면 clamp(1rem, 0.6087rem + 1.7391vw, 2rem)이 나와요. 값은 소수 넷째 자리에서 반올림해요.
네. clamp()의 최소·최대값과 고정값 부분을 rem으로 환산할 때 기준 폰트 크기를 쓰기 때문에 함께 다시 계산돼요. 실제 사이트의 html font-size와 같게 맞춰 두세요. px 버전 공식도 함께 보여줘요.