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