CSS Clamp / Fluid Typography Generator
Set a minimum and maximum font size across a viewport width range, and get a clamp() value that scales smoothly between them.
Used to convert px to rem in the output. 16px is the browser default.
About this tool
CSS clamp(min, preferred, max) lets a value like font-size scale smoothly with the viewport, instead of jumping between fixed sizes at media query breakpoints. This calculator works out the linear formula (a fixed rem value plus a vw unit) that connects your minimum size at your minimum viewport width to your maximum size at your maximum viewport width.
How the formula works
Below the minimum viewport width, the font stays at the minimum size. Above the maximum viewport width, it stays at the maximum size. Between the two, it scales linearly, calculated from the slope between the two size/width pairs you enter, expressed as a vw value so it responds to viewport width without JavaScript or media queries.
Why rem, not px, in the output
Using rem for the fixed part of the value keeps the result respecting a user's browser font-size setting (accessibility zoom), where a pure px value would not. The root font size field controls the px-to-rem conversion, change it only if your project sets a non-default root font-size on html.