Design Atlas
한국어
Aa Typography

Measure

메저 (한 줄 글자 수)

How many characters fit on one line. Too few and the eye jumps lines too often; too many and it struggles to find the next line.

Also known as: 줄 길이Line length
···
html
<div class="stage">
  <p class="col" id="p">타이포그래피에서 한 줄에 담기는 글자 수를 measure(가독 폭)라고 부릅니다. 너무 짧으면 시선이 자주 끊기고, 너무 길면 다음 줄을 찾기 어렵습니다.</p>
  <div class="readout">≈ <span id="ch">0</span>자/줄 · <span id="verdict">–</span></div>
</div>
css
.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}
js
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();

A common typographic rule of thumb: English body text reads best at roughly 45–75 characters per line, ideally around 66. Shorter, and the eye breaks rhythm jumping lines too often; longer, and it takes real effort to find the start of the next line after finishing one — increasing the chance of re-reading the same line.

In CSS, setting `max-width` in `ch` units (based on the width of the digit "0") keeps roughly this character-count target even as font or size changes. Example: `max-width: 65ch`.

Because a single Hangul syllable block carries more visual density than a Latin letter, the same character count reads as more crowded — Korean body text is often kept narrower, around 30–40 characters, rather than the 66 used as a Latin benchmark.

When to use

Always worth setting when sizing a long body-text container. Narrow contexts like cards or sidebars are naturally short enough that it rarely matters.