CSS でフォントを可変させる

global.css

*,
::before,
::after {
  --clamp-root-font-size: 16;
  --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-root-font-size)) +
      (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );

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

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 992;
  --clamp-min: 14;
  --clamp-max: 16;
}

h1 {
  font-size: var(--clamp);

  --clamp-min: 32;
  --clamp-max: 40;
}

reset.cssなどでfont-size: inherit;が指定されているものはfont-size: var(--clamp);を逐一指定する必要がある。（カスケードレイヤー化で防げる）