옵티컬 사이즈

<div class="stage">
  <div class="row active" id="r1"><span class="txt small">Optical Size</span><span class="lbl">텍스트용 · 굵고 촘촘하게 보정</span></div>
  <div class="row" id="r2"><span class="txt large">Optical Size</span><span class="lbl">디스플레이용 · 가늘고 넓게</span></div>
</div>

.stage{display:grid;gap:10px;width:min(94%,420px)}
.row{display:grid;gap:4px;padding:10px 14px;border-radius:10px;transition:background .4s}
.row.active{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.txt{color:var(--fg);font-family:Georgia,'Times New Roman',serif;display:block}
.txt.small{font-size:16px;font-weight:700;letter-spacing:.01em}
.txt.large{font-size:clamp(26px,7vmin,40px);font-weight:300;letter-spacing:-.01em}
.lbl{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}

const r1 = document.getElementById('r1');
const r2 = document.getElementById('r2');
let flip = false;
setInterval(function(){
  flip = !flip;
  r1.classList.toggle('active', !flip);
  r2.classList.toggle('active', flip);
}, 1700);