플루이드 타이포그래피 계산기
플루이드 반응형 타이포그래피를 위한 CSS clamp() 선언을 생성합니다. 브레이크포인트 없이 뷰포트 크기 간에 텍스트가 부드럽게 조절됩니다.
생성된 CSS
크기 범위 시각화
뷰포트 너비
현재 뷰포트:
폰트 크기
현재 크기:
실시간 미리보기
다람쥐 헌 쳇바퀴에 타고파. 키스의 고유조건은 입술끼리 만나야 하는 것. 타이포그래피는 문자를 아름답게 배열하는 예술입니다.
수식
CSS clamp() 함수는 폰트 크기가 최솟값과 최댓값 사이에서 뷰포트 너비에 따라 유동적으로 조절되도록 합니다:
font-size: clamp(min, preferred, max);
선호 값 = min + (max - min) * ((100vw - minVw) / (maxVw - minVw))
= px + ( - ) * ((100vw - px) / ( - ))
= rem + vw
Frequently Asked Questions
Fluid typography is a technique where font sizes scale continuously with the viewport width rather than jumping between fixed values at breakpoints. Instead of writing font-size: 16px at mobile and font-size: 20px at desktop inside media queries, a fluid value like font-size: clamp(1rem, 0.5rem + 1.25vw, 1.25rem) achieves a smooth linear interpolation between those endpoints across all viewport widths. The technique was popularised by Mike Riethmüller's 2016 article on precise control over responsive typography.
CSS clamp(min, val, max) returns the middle value if it is within the range [min, max], the minimum if the middle value is below min, or the maximum if the middle value is above max. For fluid typography, the middle value is a linear equation of the form calc(a + b * 100vw), where a is the y-intercept in rem and b is the slope. This creates a value that is exactly min at a specific small viewport width and exactly max at a specific large viewport width, with linear scaling between them. clamp() is supported in all browsers that support CSS Fonts Level 4.
The 1vw unit equals 1 % of the viewport width. The vw unit is best used inside a calc() or clamp() expression rather than alone, because a pure vw value has no minimum floor and can become unreadably small on narrow screens. The newer svw (small viewport width) and dvw (dynamic viewport width) units account for mobile browser chrome (the URL bar that appears and disappears on scroll), reducing CLS caused by font size reflow when the browser chrome toggles. For stable body text sizing, 100vw inside clamp() is fine; for full-screen display text that must avoid the URL bar effect, svw is preferable.
Body text benefits most from fluid sizing when targeting a wide range of devices—from small phones at 320 px to ultra-wide monitors at 2560 px. However, the slope is usually gentle (16–20 px range) to maintain readability. Headings have more to gain from fluid sizing because the size difference between mobile and desktop is proportionally larger (24–64 px for h1, for example). Captions and UI labels often benefit less, as their sizes rarely change between breakpoints. A practical approach is to apply fluid sizing to h1–h3 and body, and use fixed sizes for smaller UI elements.
Unitless line-height values (e.g. 1.5) scale automatically with font-size, so they remain proportionally correct as the font size changes fluidly—no additional intervention needed. Problems arise only when line-height is set in absolute units like px; in that case, the line-height does not track the font-size, producing either cramped or excessively open leading at different viewport sizes. Always use unitless line-height values alongside fluid font sizes to ensure proportional leading at every size.