Setting Type to be Read
Most “bad typography” isn’t the font. It’s how the font was set.
You can pick a beautiful typeface and still produce a paragraph nobody finishes. Readability isn’t chosen in the font menu — it’s decided by five small mechanics most people never touch: measure, leading, alignment, tracking, and size.
Get these right and ordinary text reads effortlessly. Get them wrong and even a gorgeous font feels like work. This module is the craft of the paragraph — and you can feel each rule in the labs below, not just read it.
How wide a line can be
The measure is the length of a line of text. There is a comfortable range: roughly 50–75 characters, with about 66 as the sweet spot. It’s the oldest readability rule there is, and the most ignored.
Too long and the eye loses its place on the return sweep — it can’t reliably find the start of the next line, so it re-reads or skips. Too short and the rhythm turns choppy, breaking every few words. A full-width desktop paragraph is the most common offender.
Good typography is invisible. The reader glides from line to line without noticing the work that makes it effortless — the measure that keeps each line findable, the leading that gives the eye a clean track back to the left edge, the quiet discipline of letting words breathe.
The space between lines
Leading (line-height) is the vertical space between lines. For body text, around 1.5× the font size is the reliable default. Too tight and lines bunch into a grey wall; too loose and they drift apart into disconnected strips.
It’s a relationship, not a constant: the wider your measure, the more leading the eye needs to track back accurately. Long lines with tight leading are the worst combination — exactly what the simulator above punishes.
Why body text goes left
Left-aligned text gives every line the same starting edge, so the eye always knows where the next line begins. Centre and justify both take that anchor away — and on the web, justify has no hyphenation engine, so it pries words apart into ugly rivers of whitespace.
Centre is for short things: a title, a pull-quote, a caption. Never a paragraph. Flip the modes below and watch the return edge fall apart.
A consistent left edge is a quiet promise to the reader: the next line always starts in the same place. Break that promise and the eye has to hunt for each beginning, and reading slows to a crawl without anyone being able to say why.
The space inside words
Kerning is the space between specific letter pairs (mostly handled for you). Tracking is uniform letter-spacing across a run — and it has one firm rule: track caps and small-caps a little looser; never letter-space lowercase.
Lowercase words have shapes the eye reads as whole units. Spread them out for “air” and you shatter those shapes, slowing every word. Capitals, set tight by default, are the opposite — a touch of tracking helps them breathe.
The 16px floor
Body text wants to be at least 16px on screens — the proven comfort zone, and the size that scales sanely across devices. Setting it smaller to “fit more” just moves the cost onto the reader.
And set it in rem, not px. A user who has raised their browser’s base font size — often for a real visual need — gets honoured by rem and silently ignored by fixed px. It’s not a WCAG violation; it’s just a courtesy that costs you nothing.
Fix this paragraph
Here’s a paragraph committing four crimes at once. Hit Fix it and watch the five mechanics snap into place.
Typography is the craft of arranging type to make written language legible, readable, and appealing when displayed. Set badly, even this sentence fights you: it is too small, the lines run edge to edge, the leading is crushed, and the whole block is centred so your eye loses the start of every line.
- Body below the 16px floor
- Measure runs the full width
- Leading crushed under 1.2
- Whole block centred
Good setting, two surfaces
The same mechanics, tuned to the medium they live on — and a reminder that a rule can be right on one surface and wrong on the next.
A web article keeps its measure near sixty-six characters and its leading around 1.5, left-aligned with a soft rag. Nothing draws attention to the type — which is exactly why it reads so easily.
Invisible by design. The setting gets out of the way so the words do the work.
A newspaper column justifies cleanly because the press hyphenates every line, tuning the spaces so no rivers open. Copy this exact setting onto the web, with no hyphenation engine, and the same paragraph cracks apart.
The rule that works here breaks on screen. Always ask which surface taught it.
Setting is the forces going quiet: one font, one size, even leading, a single alignment — deliberate sameness, so the words speak and the typography disappears. The only contrast a good paragraph needs is the occasional link or bit of bold. Save difference for the headline; let the body agree with itself.
The Setting glossary
The six words that let you name what’s wrong. Tap a card to flip it.
Questions you actually ask
Fix the setting
Mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.