Loading…
Generate a clamp() for fluid typography from min/max sizes and viewport widths.
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Below the minimum viewport the value stays at the min size, above the maximum viewport it stays at the max size, and it scales smoothly in between. Use the generated value directly for font-size and similar properties.
clamp() takes three values, clamp(minimum, preferred, maximum), and scales the value with the viewport width while keeping it within the minimum and maximum bounds. It is used to achieve fluid typography (text sizes that flex smoothly).
Enter the minimum and maximum font sizes and the target viewport widths, and the tool generates a clamp() expression you can set on properties like font-size. Just paste the output straight into your CSS.
clamp() is widely supported across modern browsers, so you can use it with confidence in today's major browsers.