This is the final part. Size, leading and line breaking are settled, and the webfont now arrives without shaking the page. What remains is how to arrange those letters on the page.
How many characters per line — the measure
The length of a line of body text is called the measure. The long-standing convention in Western typesetting is 45 to 75 characters per line. Too long and the eye cannot find the start of the next line; too short and it returns so often that reading becomes tiring.
That convention does not transfer directly to Korean, because a Hangul syllable is noticeably wider than a Latin lowercase letter. Fewer characters fit into the same pixel width, though each one carries more information. In practice somewhere around 35 to 45 Korean characters is a comfortable starting point, adjusted for the face and size you are using.
⚠ Avoid the ch unit here. ch is defined by the width of the digit zero, which has nothing to do with Hangul widths. Set max-width in pixels or rem, then count the characters on a real line to confirm it.
.article__content {
max-width: 46rem; /* about 736px — set it, then count */
margin-inline: auto;
}
/* things allowed to run wider than the text */
.article__content > figure,
.article__content > pre { max-width: 56rem; }Vertical rhythm — stack the gaps as one system
An article is not only paragraphs. Headings, lists, quotes, images and code are mixed in, and if each brings its own arbitrary margins, the page reads as lumpy.
Two rules. First, pick spacing values only from a scale you defined in advance. Second, apply margin in one direction only — give every element both top and bottom margins and you will spend your time working out which one won.
.article__content > * + * {
margin-block-start: var(--space-6); /* default gap between siblings */
}
/* headings take a large space above and none below */
.article__content > h2 + * { margin-block-start: var(--space-4); }
.article__content > h2 { margin-block-start: var(--space-12); }One principle governs heading spacing: more space above a heading than below it. A heading is not the end of what came before but the beginning of what follows, so the thing it should sit close to is underneath. Observing only this makes the structure of a long article far easier to see.
What not to do in Korean body text
Do not justify the text. Justification stretches the spaces between words to square off the right edge, and combined with the word-break: keep-all from an earlier part there are few break opportunities, so the gaps open up dramatically. You get white rivers running down the paragraph, and it reads worse than a ragged right edge would.
Do not rely on hyphenation. hyphens: auto depends on per-language hyphenation dictionaries and does not apply to Korean. A somewhat ragged right edge is simply how Korean paragraphs look, and forcing it flat leads straight back to the previous problem.
Do not use negative letter spacing in body text — for exactly the reason given in the first part. It tightens glyphs that are already dense.
A last look
Once all of this is in place, check three things on a real screen. Count the characters on a line on a wide monitor; look at whether paragraphs read as a wall on a phone; and check that heading spacing has not ended up the wrong way round. All three are visible without tools, and all three go wrong often.
Closing the series
Across eight parts there has really been one idea: the web’s defaults were calibrated for the Latin alphabet, and Korean differs from that baseline in a handful of places. The defaults are not wrong — they simply need rebuilding around our writing system, and most of that work is a few lines of CSS.
Wider questions of screen design continue in the Themes & plugins archive. If you would rather have typography, webfont loading, performance and accessibility sorted in one pass on a live site, that is what our optimization program does, and the order in which we measure and fix things is published step by step on the process page.