JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Font Size Adjustment: Default H1</h1>
<h1 class="sizeAdjusted">Font Size Adjustment: size-adjust 150%</h1>
<h1 class="fontSizeAdjust">Font Size Adjustment: font-size-adjust 0.2</h1>
<h1 class="sizeAdjusted fontSizeAdjust">Font Size Adjustment: size-adjust then font-size-adjust</h1>
<h1 class="fontSizeAdjust sizeAdjusted">Font Size Adjustment: font-size-adjust then size-adjust</h1>
<h1 class="sizeAdjustAndFontSizeAdjust">Font Size Adjustment: size-adjust and font-size-adjust </h1>

CSS

@font-face {
  font-family: "Adjusted Arial";
  src: local(Arial);
  size-adjust: 150%;
}

@font-face {
  font-family: "Arial";
  src: local(Arial);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: Arial;
  display: grid;
  place-content: center;
  gap: 4vmax;
}

h1 {
  font-size: calc(1rem + 8vw);
  mix-blend-mode: multiply;
  border: 1px solid #999;
  position: relative;
}

h1.sizeAdjusted {
  font-family: "Adjusted Arial";
}

h1.fontSizeAdjust {
  font-size-adjust: 0.2;
}
h1.sizeAdjustAndFontSizeAdjust {
  font-family: "Adjusted Arial";
  font-size-adjust: 0.2;
}