clamp() Calculator for Fonts and Texts
The Result
clamp(1rem, 2.764rem + 16.731vw, 11.875rem)
The clamp()
function in CSS is a way of setting responsive styles based on a range. Fluid like text scaling. Its syntax is:
clamp(minimum value, preferred value, maximum value)
The browser will choose the preferred value
unless it's smaller than the minimum value
or larger than the maximum value
, in which cases it will use those boundary values.
Calculations for Responsive Font Size

Values you input:
minSize
: Minimum font size (px)maxSize
: Maximum font size (px)minViewport
: Minimum viewport size (px) whereminSize
appliesmaxViewport
: Maximum viewport size (px) wheremaxSize
appliesrootFontSize
: Usually 16px for most browsers, but can be customized. This is the base size for computing relative units likerem
.

Goal:
To find an equation in the format of
y = ax + b
that defines a linear relationship between the viewport size (x
) and the font size (y
). 
Calculations:
a: The slope of the line, which represents how much the font size should change for every pixel change in viewport size. It's calculated using:
a = (maxSize  minSize) / (maxViewport  minViewport);
b: This is the yintercept and it's found by rearranging the equation
y = ax + b
to solve forb
. Using the point (minViewport
,minSize
), it's calculated as:b = minSize  a * minViewport / rootFontSize;

The Result:
The resulting equation
y = ax + b
can be translated intoclamp()
syntax:clamp(minSize / rootFontSize rem, b rem + a viewportUnits, maxSize / rootFontSize rem)
The reason for using a linear relationship between viewport and font size is to ensure a smooth and consistent scaling of the font size as the viewport changes size.
Browser Compatibility: https://developer.mozilla.org/enUS/docs/Web/CSS/clamp#browser_compatibility