리딩 (행간)

<div class="stage">
  <p id="p" lang="ko">타이포그래피에서 행간(leading)은 줄과 줄 사이의 세로 간격입니다. Line-height controls how airy or dense a paragraph feels.</p>
  <div class="readout">line-height <span id="val">1.15</span></div>
</div>

.stage{width:min(90%,560px)}
p{font-size:15px;line-height:1.15;color:var(--fg);margin:0;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;
  background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--lh-px,17px) - 1px),var(--line) calc(var(--lh-px,17px) - 1px),var(--line) var(--lh-px,17px));
  background-position:0 2px}
.readout{margin-top:14px;font:12px ui-monospace,Menlo,monospace;color:var(--muted)}
#val{color:var(--accent);font-weight:700}

const p = document.getElementById('p');
const v = document.getElementById('val');
const fontSize = 15;
const start = performance.now();
function loop(now){
  const t = (now - start) / 2200;
  const lh = 1.15 + (Math.sin(t) * 0.5 + 0.5) * 1.15;
  p.style.lineHeight = lh.toFixed(2);
  p.style.setProperty('--lh-px', (lh * fontSize).toFixed(1) + 'px');
  v.textContent = lh.toFixed(2);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);