타입 스케일

<div class="stage" id="stage"></div>

#stage{display:grid;gap:4px;width:min(94%,500px)}
.step{display:flex;align-items:baseline;gap:12px;padding:4px 8px;border-radius:8px;transition:background .3s}
.step.active{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.px{width:34px;flex:none;font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:right}
.sample{color:var(--fg);font-weight:700;line-height:1.1;font-family:system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.active .sample{color:var(--accent)}

const base = 16, ratio = 1.25;
const steps = [3, 2, 1, 0, -1].map(function(n){ return Math.round(base * Math.pow(ratio, n)); });
const stage = document.getElementById('stage');
steps.forEach(function(px){
  const row = document.createElement('div');
  row.className = 'step';
  const pxSpan = document.createElement('span');
  pxSpan.className = 'px';
  pxSpan.textContent = px;
  const sample = document.createElement('span');
  sample.className = 'sample';
  sample.style.fontSize = px + 'px';
  sample.textContent = 'Aa 타입 스케일';
  row.appendChild(pxSpan);
  row.appendChild(sample);
  stage.appendChild(row);
});
const rows = [...stage.children];
let idx = 0;
setInterval(function(){
  rows.forEach(function(r){ r.classList.remove('active'); });
  rows[idx].classList.add('active');
  idx = (idx + 1) % rows.length;
}, 650);