<h1>Size Adjust</h1>
<h1 class="adjusted">Size Adjust</h1>

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

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






@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.adjusted:after {
  content: "150% larger";
  font-size: 1rem;
  color: #333;
  position: absolute;
  top: 100%;
  left: 0;
}