엑스하이트

<div class="stage">
  <div class="frame">
    <div class="band" id="band"></div>
    <span class="word" id="word">exercise</span>
  </div>
  <div class="readout"><span id="font">Georgia</span> · x-height ≈ <span id="ratio">0.47</span>em</div>
</div>

.frame{position:relative;display:inline-block;font-size:20vmin;line-height:1}
.word{color:var(--fg);font-weight:700;position:relative;z-index:2;letter-spacing:.005em}
.band{position:absolute;left:-.05em;right:-.05em;bottom:.18em;height:.47em;background:color-mix(in srgb, var(--accent) 20%, transparent);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);transition:height .6s ease;z-index:1}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#font{color:var(--fg);font-weight:600}
#ratio{color:var(--accent)}

const word = document.getElementById('word');
const band = document.getElementById('band');
const fontEl = document.getElementById('font');
const ratioEl = document.getElementById('ratio');
const fonts = [
  { name: 'Georgia (serif)', stack: "Georgia,'Times New Roman',serif", xh: 0.47 },
  { name: 'system-ui (sans)', stack: 'system-ui,-apple-system,sans-serif', xh: 0.54 },
];
let i = 0;
function apply(){
  const f = fonts[i];
  word.style.fontFamily = f.stack;
  band.style.height = f.xh + 'em';
  fontEl.textContent = f.name;
  ratioEl.textContent = f.xh.toFixed(2);
  i = (i + 1) % fonts.length;
}
apply();
setInterval(apply, 1800);