Tabular numbers

<div class="stage">
  <div class="col">
    <div class="tag">proportional-nums</div>
    <div class="ticker prop" id="t1"></div>
  </div>
  <div class="col">
    <div class="tag good">tabular-nums</div>
    <div class="ticker tnum" id="t2"></div>
  </div>
  <div class="readout" id="readout">측정 중…</div>
</div>

.stage{display:grid;gap:12px;justify-items:center}
.col{display:grid;gap:6px;justify-items:end}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}
.tag.good{color:var(--accent-3)}
.ticker{font:700 5.5vmin/1.2 ui-monospace,Menlo,'SFMono-Regular',monospace;color:var(--fg);width:5.2em;text-align:right}
.prop{font-variant-numeric:proportional-nums}
.tnum{font-variant-numeric:tabular-nums}
.readout{font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;max-width:280px}

const t1 = document.getElementById('t1');
const t2 = document.getElementById('t2');
let n = 10482;
setInterval(function(){
  n = (n + Math.floor(Math.random() * 900) + 10) % 100000;
  const s = String(n).padStart(5, '0');
  t1.textContent = s;
  t2.textContent = s;
}, 260);

const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden;font:16px -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums';
document.body.appendChild(probe);
const widths = [];
for (let d = 0; d <= 9; d++){ probe.textContent = String(d); widths.push(probe.getBoundingClientRect().width); }
const min = Math.min.apply(null, widths), max = Math.max.apply(null, widths);
const readout = document.getElementById('readout');
readout.textContent = (max - min < 0.4)
  ? '실측: 0~9 폭 전부 동일 (' + min.toFixed(1) + 'px) — 이 폰트에서 tabular-nums 효과 있음'
  : '실측: 0~9 폭 차이 있음 (' + min.toFixed(1) + '–' + max.toFixed(1) + 'px) — 이 폰트에서 효과 미미';