CSS Clamp Calculator
Calculate fluid typography CSS from minimum and maximum font sizes and viewport widths, with rem bounds and the interpolation formula.
Set your values
Adjust the values, then calculate your result.
How to use CSS Clamp Calculator
- Enter font sizes at the narrow and wide ends of your design.
- Enter the corresponding viewport widths and expected root font size.
- Calculate the clamp declaration and verify the endpoint and midpoint values.
Derive the preferred value from two points
The fluid term is a straight line: slope equals the font-size difference divided by the viewport-width difference. Multiply the slope by 100 for the vw coefficient, then convert the pixel intercept to rem. The result includes rem minimum and maximum bounds and a calc expression for the preferred size. Equal font sizes produce a constant size.
Understand the root-size assumption
The formula matches your pixel endpoints at the root font size you provide. A different root size changes the rem terms; viewport terms still depend on viewport width. This is intentional for responsive type but does not prove accessibility. Test browser zoom and text enlargement, long headings, line wrapping and containers that may clip text. The calculator rejects reversed viewport ranges and decreasing size ranges rather than guessing your intent.
Will this formula work for spacing too?
Yes, the same interpolation can be used for compatible length properties. Review the generated bounds and replace font-size with the property you intend.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.