Kerning

<div class="stage">
  <div class="row">
    <div class="tag">font-kerning: normal</div>
    <div class="wordwrap"><span class="word kern" id="w1">AVATAR</span><div class="caliper" id="c1"></div></div>
    <div class="px"><span id="px1">0</span>px</div>
  </div>
  <div class="row">
    <div class="tag off">font-kerning: none</div>
    <div class="wordwrap"><span class="word nokern" id="w2">AVATAR</span><div class="caliper" id="c2"></div></div>
    <div class="px"><span id="px2">0</span>px</div>
  </div>
</div>

.stage{display:grid;gap:18px;justify-items:center}
.row{display:grid;gap:4px;justify-items:center}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--accent-2)}
.tag.off{color:var(--muted)}
.wordwrap{position:relative;display:inline-block}
.word{display:block;font-family:'Times New Roman',Georgia,serif;font-size:9vmin;font-weight:700;color:var(--fg);white-space:nowrap}
.kern{font-kerning:normal}
.nokern{font-kerning:none}
.caliper{position:absolute;left:0;bottom:-6px;height:2px;background:var(--accent);width:0;animation:measure 2.4s ease-in-out infinite}
.px{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
@keyframes measure{0%,15%{width:0}55%,100%{width:var(--w,0px)}}

const w1 = document.getElementById('w1');
const w2 = document.getElementById('w2');
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const px1 = document.getElementById('px1');
const px2 = document.getElementById('px2');
function measure(){
  const r1 = w1.getBoundingClientRect().width;
  const r2 = w2.getBoundingClientRect().width;
  c1.style.setProperty('--w', r1 + 'px');
  c2.style.setProperty('--w', r2 + 'px');
  px1.textContent = Math.round(r1);
  px2.textContent = Math.round(r2);
}
requestAnimationFrame(measure);
addEventListener('resize', measure);