The quiet discipline of reading on the web
Most text on the internet is set to be skimmed past. A page that respects the reader is built differently, and you can measure every part of it.
Reading on a screen was supposed to get better every year. The screens did. The reading did not. In 2006 a typical article page weighed under 500 kilobytes. In 2026 the median article page pulls down more than 9 megabytes before a single paragraph renders, and most of that weight exists to measure the reader rather than serve them.
This is a piece about the opposite approach: what it takes, concretely, to build a page whose only job is to be read. Not a manifesto. A build sheet. Every claim below is something you can check in a browser’s dev tools or a stylesheet.
The distinction matters because the two kinds of page are optimized for different eyes. A page designed for skimming wants contrast tricks, sticky elements, and a hook every 150 words. A page designed for reading wants the opposite of all three: text that holds still, a column that does not compete for attention, and typography boring enough that you stop noticing it by the second paragraph. Almost everything below is a refusal of something the engagement web does on purpose.
The measure is a contract
Start with the number that governs everything else: line length. Forty-five characters per line reads choppy and narrow. Ninety reads like a marathon. The comfortable band for long-form serif text sits between 65 and 75 characters, and the most honest way to hold it is to set the column in ch units so it follows the font rather than the viewport.
ch unit is the width of the zero glyph in the current font. Setting max-width: 68ch ties the measure to the typeface itself, so swapping fonts cannot silently break the column.
When the measure is right, the page stops needing sidebars to feel balanced. A single centered column of well-set text at 68 characters is one of the few layouts that looks intentional at every width from a phone to a cinema display.
There is a second reason the contract holds. Every time your eye finishes a line it performs a return sweep back to the left edge, and a line that is too long makes the sweep miss, which is where the re-read and the doubled line come from. Reading researchers have been measuring that error rate for a century and the comfortable band keeps landing in the same place. The ch unit is simply the way a stylesheet writes that finding down.
Size and rhythm do the real work
Body text on most sites is still set at 16 pixels, a number inherited from browser defaults in the early 2000s rather than chosen for reading. Long-form text wants more. Eighteen to twenty-one pixels with a line height near 1.65 gives the eye a rail to ride back to the left edge on every return sweep.
The rhythm matters as much as the size. Headings that sit equidistant from the paragraph above and the one below teach the reader nothing about structure. The fix is asymmetric spacing: a heading should hang closer to the text it introduces than to the text it ends. Set roughly twice the space above as below and the page starts explaining itself.
Leading works the same way at a smaller scale. A line height under 1.4 makes ascenders and descenders argue on adjacent lines; above 1.8 the column dissolves into individual rows and the paragraph stops cohering. The 1.6 to 1.7 window is where body text reads as paragraphs rather than as a list of sentences wearing the same font.
A paragraph is a unit of thought, not a unit of markup. Spacing is how the page says where one thought ends and the next begins.
The font stack is a decision, not a default
System fonts are defensible. Georgia has read more of the web than any other serif and it reads well still. But a publication that cares about its text eventually wants optical sizing: a face that draws its serifs finer at large sizes and sturdier at small ones, so headlines look carved and body text looks planted.
Variable fonts made this cheap. One file of Newsreader covers every weight the page needs, roughly 40 kilobytes of the latin subset, and the optical size axis can be left on auto so the browser picks the right drawing for each size without a single manual override.
Two details keep the stack honest. font-display: swap is worth accepting only when the fallback metrics are close, so the swap is a shrug rather than a reflow; Charter and Georgia sit behind the webfonts here precisely because their x-heights and widths are near enough that a font arriving late changes texture, not layout. And the italic is real, drawn by the typeface rather than obliqued by the browser, which is the difference between emphasis that reads and emphasis that shouts.
Hyphens and rags, the quiet polish
Justified text failed on the web because browsers justified without hyphenating, stretching word spaces into rivers. Left-aligned text fixed the rivers but gave every paragraph a ragged right edge that most sites never tuned.
Two declarations changed this. hyphens: auto lets the browser break long words where the dictionary says they break, which alone tightens the rag noticeably on narrow columns. And text-wrap: pretty, now supported across the current engines, trades a little layout time for a rag with no orphaned short lines. Neither is visible when it works. Both are felt.
Its sibling text-wrap: balance solves the other case: short multi-line blocks like headlines where the first line should not run twice as wide as the second. Balance on headings, pretty on paragraphs. Two properties, applied in about six lines, replacing what used to be a JavaScript library’s entire job.
orphans: 3 and widows: 3 cost nothing and every print stylesheet assumes them.
Speed is the courtesy nobody sees
A reading page earns trust in the first 400 milliseconds. The discipline is subtraction: no render-blocking scripts, no third-party fonts, no layout that moves after paint. Images carry their width and height in the markup so the browser reserves the space before a byte of the image arrives. The largest contentful element, almost always the headline or the hero, should be paintable from the first packet.
The result is a page that feels instant even on hotel wifi, not because anything clever happened but because nothing wasteful did.
It is worth being precise about what the missing 9 megabytes used to buy, because none of it was for the reader. The median payload splits roughly into ad slots, tracker beacons, font CDNs, framework hydration for a page that has no interactive features to hydrate, and A/B harnesses measuring which headline gets the skim. Delete the measurement and the page does not get lighter as a side effect. It gets honest: every remaining byte is on the page because a reader asked for it.
Restraint is the feature list
Everything above fits in about two hundred lines of CSS. No framework produced it and none was needed. The complete inventory: a fluid type scale, a column measured in characters, asymmetric heading rhythm, optical-size variable fonts, hyphenation and rag control, reserved image boxes, and a print stylesheet that hides everything except the text.
None of it is clever. All of it is rare. The median article page in 2026 still fails at least half of that list, which is why reading on the open web feels like an act of patience when it should feel like sitting down in a good chair.
The reader’s side of the deal
None of this asks anything of the reader, and that is the point worth ending on. No account, no consent dialog, no app prompt, no “keep reading” modal at paragraph four. The page loads, the text sits still, and the only thing measured is whether the words were worth the time.
The chair exists. It takes an afternoon to build, and about a megabyte less JavaScript than everyone assumes.