The reading column, revisited

Most pages are hard to read for a boring reason: the text doesn't know its width. Lines run long, images interrupt the column at random sizes, and quotes look like footnotes instead of arguments. This post is a working test of the Index theme's reading layout — every element below is here to prove a rule.

The measure is the quiet contract of a text post. Words stay in a narrow column you can scan without moving your head; everything louder than words — photography, pull quotes, video — is allowed to leave the column and take the full width of the article.

The column holds the words

Body text runs at a larger size than the rest of the site, with taller line height. Headings step down from the title instead of competing with it. A paragraph with a link in it should read as underlined text, not as a button.

A page is easy to read when the text knows its width — the column holds the words, and everything louder than words steps outside it.

That's the whole idea. The quote above intentionally breaks the measure: it is set larger and wider than the body, the way a pull quote carries the argument between sections.

What steps outside the column

• Images and figures — full article width, extra vertical air
• Blockquotes — larger type, wide, no border decoration
• Video and embeds — same treatment as images

Details that carry the feel

Captions sit under the media, small and left-aligned. Lists keep the reading size. Code stays inside the measure, because nobody reads code wide:

.post-body { max-width: var(--tcx-read); }
figure, blockquote { /* allowed to leave the column */ }

Lists and tables

An ordered list, to check markers and rhythm:

1. Write inside the column — one idea per paragraph, and let a long list item wrap onto a second line to prove the marker stays outside the text block.
2. Let media and quotes step outside it.
3. Ship, then reread on a phone.

An unordered one:

• Bullets hang outside the measure
• Wrapped lines align with the text, not the bullet — this item is intentionally long enough to wrap so you can see the alignment hold.
• Spacing stays calm

And a table:

If this post reads comfortably on a laptop and a phone without you noticing any of the machinery, the layout is doing its job.