The most common way to pick a body size is “whatever looks good in the mockup”. But the mockup is a large monitor at 100% zoom, while your reader is on a small screen, at arm’s length, on a moving train. Taking the baseline from the browser rather than the mockup closes most of that gap.
16px is not a value we chose
Practically every desktop browser defaults to 16px, and users can change it — people do raise it in browser settings or through operating-system accessibility options. That single fact decides which unit you should use.
rem multiplies that user preference; px ignores it. So body text gets 1rem, and somebody who has enlarged their text does not find your site alone stubbornly small.
One popular technique deserves a warning: avoid html { font-size: 62.5% }. It exists to make 1rem equal 10px so the arithmetic is easier, but it has a cost — third-party CSS and plugin output is written assuming 1rem is 16px, so all of it shrinks at once. The cause is one line in your code and the symptom appears in somebody else’s component, which makes it awkward to trace.
Why 16px is a floor in Korean
The stroke density from the previous part reappears here. At the very same 16px, a Hangul syllable holds two or three jamo in one cell, so each stroke renders thinner and closer to its neighbours than in Latin text. The practical consequence is that Korean at a given size often reads smaller than English at the same size.
So: treat 16px as the floor and step up to 17–18px for article screens people read at length. In the other direction, 12–13px does not belong in body copy at all — that range is for metadata, footnotes and legal text, the material nobody has to read carefully.
One mobile detail is worth memorising. Safari on iOS zooms the page when a form field smaller than 16px receives focus. That sudden lurch on a screen with a form is almost always this, and the fix is simply to size input elements at 16px or above.
Make the scale once
Choosing a size per screen quickly produces a codebase containing 15px, 15.5px and 16px side by side. Better to pick from a scale defined once as tokens. Steps should widen as they climb, because a 1px difference is visible at small sizes and invisible at large ones.
:root {
--text-xs: 0.75rem; /* 12px — footnotes, legal */
--text-sm: 0.875rem; /* 14px — metadata */
--text-base: 1rem; /* 16px — the baseline */
--text-lg: 1.125rem; /* 18px — long-form body */
--text-xl: 1.25rem;
--text-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* fluid headings */
}
body { font-size: var(--text-base); }
article p { font-size: var(--text-lg); }
input, select,
textarea { font-size: var(--text-base); } /* stops the iOS zoom */clamp() suits values that genuinely need to change with viewport width, such as display headings: minimum, fluid and maximum in one declaration, with no per-breakpoint rewriting. Leave body text out of it, though — copy that resizes subtly as you drag the window is more distracting than helpful.
Managing values as tokens is covered further in the Themes & plugins archive, and the order in which we verify decisions like these on real work is published on our process page.
Next part
With size and leading settled, the next question is where the lines break. The next part covers word-break: keep-all — a genuine gift to Korean text, and the exact opposite for some other languages.