Clamp() Function Calculator

Target Values

PX
PX
PX

Viewport Range

PX
PX
PX
clamp(1rem, -0.25rem + 3.333vw, 2.75rem)

Font Size Example

font-size: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);

This text will scale between 16px at 600px and 44px at 1440px.

Calculate clamp() values with custom function using SCSS

This calculator it's a great tool to quickly find the clamp() values that fit your needs. However, this approach greatly affects code readability. The main issue is losing information about the original input values (font size and viewport ranges). It's also best practice to use rem instead of pixels as a unit for text, even though is less readable.
A solution may be adding a comment next to the clamp function describing the initial values. This could be a bit tedious and sometimes cause typos, especially if values are changed multiple times.
A more efficient solution is to use a custom function. Using Sass, this is what it looks like:

Fallback for unsupported older browsers

Browser support for clamp function sits above 90% at the time of writing of this article, so it’s already well supported. For unsupported desktop browsers like Internet Explorer, it is enough to supply a fallback value as the unsupported browsers will ignore the entire font-size expression if they cannot parse the clamp function.

@mixin clamp-px($minFont, $maxFont, $minVp: 320, $maxVp: 1000) {
  font-size: #{$minFont}px;
  font-size: clamp-px($minFont, $maxFont, $minVp, $maxVp);
}

Learn more about the clamp() function by reading the documentation.