<main>
  <h1>Optical sizing demo</h1>
  Showing the character
  <input class="letter" type="text" maxlength="1" value="a">
  at <span>16</span>px.
  <div class="a">
    <div class="opsz-and-size">a</div>
    <div class="opsz" contenteditable>a</div>
  </div>
  <div class="b">
    <div>Size and optical size</div>
    <div>Only optical size</div>
  </div>
  <input class="slider" type="range" min="9" max="144" value="16">
  <a href="https://pixelambacht.nl/2021/optical-size-hidden-superpower/">Read more on optical sizing over at PixelAmbacht!</a>
</main>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1&display=block');

:root {
  --size: 16;
}

body {
  margin: 0;
  height: 99vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  font-family: sans-serif;
  width: 460px;
  text-align: center;
}

.a {
  font-family: Fraunces;
  display: flex;
  margin-top: 1rem;
  margin-left: -1rem;
}

.b {
  display: flex;
  margin: 1rem;  
}

.a > *,
.b > * {
  flex: none;
  width:50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a > * {
  background: #eee;
  margin: 0.25rem;
}

.opsz {
  font-size: 144px;
  font-variation-settings: "opsz" var(--size);
}
.opsz-and-size {
  font-size: calc(var(--size) * 1px);
}

.slider {
  width: 100%;
  margin-bottom: 1rem;
}

.letter {
  width: 1rem;
  text-align: center;
}

const main = document.querySelector("main");
const slider = document.querySelector(".slider");
const letter = document.querySelector(".letter");
const left = document.querySelector(".opsz");
const right = document.querySelector(".opsz-and-size");
const pxsize = document.querySelector("span");

slider.oninput = e => {
  main.style.setProperty(`--size`, e.target.value);
  pxsize.innerText = e.target.value;
}

letter.oninput = e => {
  left.innerText = e.target.value;
  right.innerText = e.target.value;
}