A single centered column tuned for long-form reading: 680px measure, oversized line height, and full-bleed breakouts for images. The layout disappears so the writing can carry the page.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Medium-style reading column layout.
1. Column: max-width 680px, centered, 20-24px horizontal padding on small screens.
2. Body text: 20px serif (or humanist sans), line-height 1.7, paragraph spacing 1.5em. Roughly 65-75 characters per line — the measure is the whole point.
3. Title: 40-44px bold, tight leading, followed by author/meta row with avatar.
4. Images: break out of the column — `width: 100vw` full-bleed or a wider 880px "breakout" class for emphasis.
5. Headings inside the article: 28px, extra top margin (2em) to chunk sections.
6. No sidebar, no cards, no boxes. Whitespace does the layout.A single centered column tuned for long-form reading: 680px measure, oversized line height, and full-bleed breakouts for images. The layout disappears so the writing can carry the page.
The single-column reading layout survives every design trend because it maps to how eyes actually move across text.
A measure of 60–70 characters keeps saccades short. Wider than that and readers lose the line on the return sweep.
Everything else — sidebars, related posts, share buttons — is subordinate to the column.
Switch viewports to see the responsive behavior described in the exports.
The single-column reading layout survives every design trend because it maps to how eyes actually move across text.
A measure of 60–70 characters keeps saccades short. Wider than that and readers lose the line on the return sweep.
Everything else — sidebars, related posts, share buttons — is subordinate to the column.
Switch viewports to see the responsive behavior described in the exports.