CSS Clamp() Responsive Font Calculator
Generate a fluid font size or spacing value that scales smoothly between a minimum and maximum, based on viewport width.
About this tool
Give a size for a small screen and a size for a large one, and the tool writes a clamp() value that grows smoothly between them and stops at each end, so you don’t need a stack of media queries. The table shows the size at common screen widths.
Output defaults to rem, worked out from your root font size. That matters for accessibility: if someone sets a larger default font size in their browser, rem-based values grow with it, whereas px values don’t. For the same reason, very large jumps between the min and max sizes are flagged, because text sized mainly by viewport width doesn’t enlarge properly when people zoom. It works for spacing too: switch the property to padding, margin or gap.
Below the min viewport width the font stays at the minimum size; above the max viewport it stays at the maximum; in between, it scales smoothly using clamp() with a calculated vw-based value.