You have probably had the experience of body copy that looked fine in the mockup and reads oddly cramped on the real screen. Changing the typeface does not help; lightening the colour does not help either. The cause is usually in one place — the leading.
Most CSS frameworks and themes set body line-height at around 1.5. That value is not wrong. It is simply calibrated for the Latin alphabet, and Hangul differs from that baseline in two ways.
What sits inside a single Hangul character
First, stroke density. A Latin letter is built from a handful of strokes. A Hangul syllable, by contrast, assembles two or three jamo — an initial, a vowel and often a final consonant — inside one character cell. At the same font size, that means considerably more line work inside the same area, and correspondingly less white space within the glyph. The eye has less internal breathing room, so it needs more external room: the leading.
Second, final consonants. Latin lowercase mostly lives within the x-height, with only g p y and friends descending. In Korean, syllables with and without a final consonant alternate along the line, so the effective glyph height keeps changing. The practical result is that a Korean line occupies more vertical space than a Latin one, and at the same leading the descending strokes of one line sit closer to the line beneath.
Which value goes where
Useful starting points: long-form body text wants 1.7 or more, and article screens people read for several minutes are comfortable at 1.8 to 1.9. Headings want about 1.35 — the common default of 1.2 is a Latin capital-height figure and makes two-line Korean headings look stuck together. Conversely, short labels in buttons, badges and tables are single lines, so drop them to 1.2–1.3 or the components grow taller than they need to be.
:root {
--leading-tight: 1.35; /* headings */
--leading-normal: 1.7; /* body */
--leading-relaxed: 1.9; /* long-form articles */
}
body { line-height: var(--leading-normal); }
h1, h2, h3, h4 { line-height: var(--leading-tight); }
.button, .badge { line-height: 1.25; }
article p { line-height: var(--leading-relaxed); }Keeping the value unitless matters. line-height: 1.7 inherits as a ratio that each element multiplies by its own font size, whereas line-height: 27px inherits as a fixed computed pixel value. Small captions and large pull quotes inside your body copy then get the wrong leading, and tracking that down later is thoroughly tedious.
Leading does not work alone
Three things travel with it.
Line length comes first. The longer the line, the harder it is for the eye to find the start of the next one, so longer measures need more leading. Short measures make 1.7 look excessive. That relationship gets its own treatment in the final part of this series.
Letter spacing comes second. Negative letter-spacing on Korean body text has become a fairly widespread habit, but tightening glyphs that are already dense is usually a net loss in running text. Save tightening for large display sizes, where the gaps genuinely do open up.
Text colour comes third. Pale grey body copy looks refined in a mockup, but as contrast drops the lines smear together at any leading. Secure sufficient contrast first, then judge the leading.
How far to override a theme’s defaults is covered further in the Themes & plugins archive, and if you would rather have typography, performance and accessibility sorted in one pass on a live site, that work is part of our optimization program.
Next part
With leading settled, the number it multiplies is still open. The next part covers why 16px is the baseline for body text, and when Korean gives you a reason to raise it.