css-clamp-calculation

name	css-clamp-calculation
description	Explain and derive CSS clamp() values for linear scaling between viewports. Use when calculating clamp values or creating responsive size tokens.

CSS Clamp Calculations

Concise guide for deriving CSS clamp() that scales linearly between two viewport widths.

Cheat sheet (linear 2-point clamp)

Given: minVW, maxVW, min, max

slope = (max - min) / (maxVW - minVW)
y     = min - slope * minVW

clamp(minpx, ypx + slope*100 vw, maxpx)

Verify quickly:

at minVW: y + (slope*100)*(minVW/100) = min
at maxVW: y + (slope*100)*(maxVW/100) = max

Worked example (500 → 1200px)

Target: 15px → 24px

slope = 9 / 700 = 0.0128571
y     = 15 - 0.0128571*500 = 8.5714

Result:

--spacing-inset: clamp(15px, 8.5714px + 1.2857vw, 24px);

Utility function

export function generateClampSize(
  minViewportWidth: number,
  maxViewportWidth: number,
  minFontSize: number,
  maxFontSize: number
):  {
   minClampValue = ;
   maxClampValue = ;
   slope =
    (maxFontSize - minFontSize) / (maxViewportWidth - minViewportWidth);
   y = minFontSize - slope * minViewportWidth;
   ;
}