Set a minimum and maximum font size across a viewport width range, preview the resize live with a simulated viewport slider, then copy a ready-to-use CSS clamp() expression.
🔒 Everything runs locally — no data is uploaded.
The generated value is clamp(min, preferred, max). The min and max lock the smallest and largest allowed font size, while the preferred value is a linear function of viewport width written as a fixed value plus a vw unit, for example 1rem + 1.5vw. Between the two viewport breakpoints, the font grows smoothly; outside that range, it holds steady at the min or max size.
A single clamp() declaration replaces several font-size media query breakpoints.
Output in rem so text still respects a visitor's browser font-size setting.
Drag the viewport slider to see the exact computed size at any width without resizing your browser.
clamp(min, preferred, max) locks a font size between a minimum and maximum value while letting it scale smoothly with viewport width in between, without needing multiple media queries.
rem units respect a user's browser font-size preference, so text set with clamp() in rem still scales for users who increase their default font size for accessibility.
It is a linear interpolation between the min and max size across the min and max viewport width, expressed as a fixed value plus a vw unit, for example 1rem + 1.5vw.
For font sizing, often yes. Layout changes like switching from one column to two may still need media queries or container queries alongside fluid type.
Yes. clamp() is supported by all modern evergreen browsers, so it is safe to use for font sizing in current production projects.