Typography

What actually makes text readable. Four properties do most of the work.

font-family with a fallback stack, because your first choice may not be available.

font-size, in rem.

line-height, unitless, around 1.5 to 1.7 for body text. Unitless matters: it multiplies each element's own font size rather than inheriting a fixed measurement.

max-width on text containers, because a line longer than about 70 characters is measurably harder to read, since the eye loses its place returning to the next line.

LIVE PREVIEW

loading editor…

Your turn → Widen the preview pane if you can, or set .prose max-width to 100%. Read both paragraphs. The difference is not subtle once you notice it.

✦ Font stacks and system-ui

font-family takes a comma-separated list and uses the first one available. Ending with a generic family such as serif or sans-serif guarantees something sensible. The keyword system-ui picks whatever the operating system uses, so the page feels native and loads instantly because nothing has to download.

◈ Graded Build

Set up readable typography for your portfolio. Give the body a sans-serif font stack, a base font size of 1rem, and a line-height of 1.6. Then add a class called prose with a max-width of 34rem so your reading column is constrained.

Checked against the page you actually render, not against how you wrote it. 3 visible and 1 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back