Fluid Typography Calculator
Generate CSS clamp() declarations for fluid responsive typography. Text scales smoothly between viewport sizes without breakpoints.
Generated CSS
Size Range Visualization
Viewport Width
Current viewport:
Font Size
Current size:
Live Preview
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Formula
The CSS clamp() function ensures the font size stays between a minimum and maximum, scaling fluidly with the viewport width:
font-size: clamp(min, preferred, max);
preferred value = 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.