<article>

  <h1>Title is <span id="howmany" aria-live="polite">48</span> pixels</h1>

  <p><button>Update <code>h1</code> text size </button></p>

  <p>Changing the value of <code>font-size</code> for <code>article</code> also changes the computed <code>font-size</code> value for <code>h1</code>.</p>

</article>

:root {
  /* 
   Using pixels with font-size is a bad practice,
   but it's useful for illustrating how ems work 
  */
  font: 16px / 1.2 sans-serif;
}

article {
  font-size: 24px;
}

h1 {
  font-size: 2em;
  margin-block: 0;
}

button {
  padding: 5px 10px;
}

p {
  margin-block: 1em;
}

const updateSize = () => {
  const numUnits = document.getElementById("howmany");

  const h1 = document.querySelector("h1");
  var h1size = getComputedStyle(h1).getPropertyValue("font-size");

  h1size = parseInt(h1size, 10);

  numUnits.replaceChild(document.createTextNode(h1size), numUnits.firstChild);
};

document.querySelector("button").addEventListener("click", updateSize);

window.addEventListener("load", updateSize);