CSS Fluid Typography Calculator
Generate a clamp() value that scales font size smoothly between two viewport widths.
How to Use the Fluid Typography Calculator
- Enter your minimum and maximum font sizes.
- Enter the viewport width range you want it to scale across.
- Copy the generated CSS and use it as a font-size value.
Frequently Asked Questions
How does the CSS clamp() function work here?
clamp(MIN, PREFERRED, MAX) locks the value to MIN below the minimum viewport width, to MAX above the maximum viewport width, and linearly interpolates between them in the middle — the PREFERRED value is a calc() expression using vw units that this tool derives for you.
Why use this instead of a media query breakpoint?
A media query jumps the font size in a sudden step at one specific width. A fluid clamp() value scales smoothly and continuously across every viewport size in between, avoiding an abrupt visual jump.
Why are the values in rem instead of pixels?
Using rem keeps the font size responsive to the user's browser font-size setting (for accessibility), while the calculation itself still works the same way regardless of unit — this tool assumes the standard 16px root font size to convert your pixel inputs to rem.
Is my data sent anywhere?
No — the calculation happens entirely in your browser using JavaScript, so nothing you enter is ever sent to a server.