clamp.css

clamp.css

body *,
body ::before,
body ::after {
  --clamp-base-font-size: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-base-font-size)) + (var(--clamp-slope) * 100svi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-base-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-base-font-size)))
  );

  font-size: var(--clamp);
}

utilities.css

.u-text-2xl {
  --clamp-min: 32;
  --clamp-max: 48;
}

.u-text-xl {
  --clamp-min: 22;
  --clamp-max: 32;
}

.u-text-lg {
  --clamp-min: 18;
  --clamp-max: 24;
}

.u-text-md {
  --clamp-min: 16;
  --clamp-max: 20;
}

.u-text-base {
  --clamp-min: 14;
  --clamp-max: 16;
}

.u-text-sm {
  --clamp-min: 12;
  --clamp-max: 14;
}

.u-text-xs {
  --clamp-min: 11;
  --clamp-max: 12;
}