Define two useful endpoints
“Make the heading responsive” is vague. “Use 24px at a 360px viewport and 48px at 1200px” gives you a line to calculate. Outside those widths, keep the chosen size limits.
Between them, the slope is the change in size divided by the change in width: 24 divided by 840, or about 0.028571 pixels of size per pixel of viewport width.
Convert the line into CSS
The preferred value needs a fixed intercept and a viewport term. Multiplying the slope by 100 gives the vw coefficient, because one viewport-width unit is one percent of viewport width.
Subtract slope times minimum width from minimum size to get the intercept: about 13.7143px here.
.heading {
font-size: clamp(24px, 13.7143px + 2.8571vw, 48px);
}
At 360px the middle expression is about 24px; at 1200px it is about 48px. Rounding can introduce a tiny difference. Clamp still prevents values outside the limits.
Do not forget the reader
The generator uses pixel limits to make interpolation easy to inspect. For production type, consider adapting limits to rem so they respond to the preferred default text size. Test zoom, long headings and wrapping. A mathematical scale is not automatically readable.
The same line can control padding, gap or margin. Large fluid spacing may push an important action far down the page even when the text itself still fits.
Avoid undefined ranges
Maximum viewport width must exceed minimum width; otherwise the slope calculation divides by zero or reverses its meaning. The tool requires maximum size to be at least minimum size. Equal sizes are valid and yield a constant value.
Try one change
Set the endpoints below and move the viewport slider. Predict the midpoint size: it should be the midpoint of the size range because interpolation is linear. Verify the resulting CSS in the actual browser viewport afterward.