메저 (한 줄 글자 수)

<div class="stage">
  <p class="col" id="p">타이포그래피에서 한 줄에 담기는 글자 수를 measure(가독 폭)라고 부릅니다. 너무 짧으면 시선이 자주 끊기고, 너무 길면 다음 줄을 찾기 어렵습니다.</p>
  <div class="readout">≈ <span id="ch">0</span>자/줄 · <span id="verdict">–</span></div>
</div>

.stage{width:100%;display:grid;justify-items:center;padding:0 8px}
.col{font-size:13px;line-height:1.6;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);margin:0;
  animation:resize 6s ease-in-out infinite;overflow-wrap:break-word;max-width:94%}
@keyframes resize{0%{width:110px}45%{width:340px}100%{width:520px}}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
#verdict{font-weight:700}

const p = document.getElementById('p');
const chEl = document.getElementById('ch');
const verdict = document.getElementById('verdict');
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '13px -apple-system,system-ui,sans-serif';
const avg = ctx.measureText('가나다라마바사아자차카타파하ABCDEFGHIJ').width / 20;
function tick(){
  const w = p.getBoundingClientRect().width;
  const ch = Math.round(w / avg);
  chEl.textContent = ch;
  let v = '적당', color = 'var(--accent-3)';
  if (ch < 18) { v = '너무 좁음'; color = 'var(--accent-2)'; }
  else if (ch > 55) { v = '너무 넓음'; color = 'var(--accent-2)'; }
  verdict.textContent = v;
  verdict.style.color = color;
  requestAnimationFrame(tick);
}
tick();