Prose Layout
Reading-width content column. 65ch max-width. Centered.
data-layout="prose" constrains content to a comfortable reading width — the classic 65-character line. Text, images, code, and tables sit inside a centered column with the prose serif font applied.
Usage
Apply to any block element — typically an <article> or a <div> wrapping body content.
<article data-layout="prose">
<h1>The Title</h1>
<p>Reading content here. The column is 65ch wide — comfortable
for sustained reading. Centered on wider screens.</p>
</article>Live demo
The Prose Column
This paragraph lives inside [data-layout="prose"]. Notice the constrained width — comfortable for reading, with the serif prose font active. The container centers itself inside whatever parent wraps it.
Links look like this. Lists feel proportional:
- First item with enough text to demonstrate line rhythm
- Second item — the spacing between list items is intentional
- Third item — no cramping, no excess air
A blockquote inside the prose column. Indented, muted. For attribution or extended quotes.
When to use
Use prose layout for content meant to be read: essays, documentation articles, blog posts, reports. The 65ch constraint isn't arbitrary — it's the line length where eyes don't fatigue tracking from right margin back to left.
| Use prose for | Don't use prose for |
|---|---|
| Long-form articles and essays | Landing pages with full-width sections |
| Documentation body text | Dashboards and data-dense views |
| Blog posts, changelogs | Card grids, comparison tables |
| Generated reports meant to be read | Full-width media or hero sections |
Font behaviour
data-layout="prose" activates the prose font stack (--asw-font-prose): Charter, Bitstream Charter, Sitka Text, Cambria, Georgia — transitional serifs designed for sustained reading. The body of this page uses the UI sans-serif stack (docs layout), but a prose-layout section restores the serif.
This is intentional. An agent generating a readable essay gets the right typography automatically — no class, no explicit font declaration. Layout implies typography.
/* In agentic.css — prose layout resets to the reading font */
[data-layout="prose"] {
font-family: var(--asw-font-prose);
}The ch unit and font changes
The 65ch max-width is measured in the prose column's font. If the prose font is unavailable and falls back to a wider face, the column widens proportionally. This is a feature: the constraint tracks the actual character width of the font in use.
Full-width: fluid
The opposite of prose. data-layout="fluid" on <main> removes the reading constraint entirely and lets content fill the viewport.
<main data-layout="fluid">
<!-- full-width dashboard, map, editor... -->
</main>Use when the page is a tool, not a document. The main body constraint (800px reading width) is the default — fluid opts out of it.