Single reading column

One narrow, centred column carries everything in order, so the reader only ever has to scroll and read.

See it live

A labelled wireframe of the pattern, made for this explorer. Switch the width to watch its regions reflow from phone to desktop.

Copy the idea

Take the pattern with you as a brief for a person or as instructions for an AI assistant: its regions, how it reflows and the rules for using it.

# Single reading column — layout recipe

## The idea

- One narrow, centred column carries everything in order, so the reader only ever has to scroll and read.

## Use it for

- Long-form essays and articles
- Newsletters and journal entries
- Documentation pages read top to bottom

## Avoid it when

- Readers need to compare several things at once
- The page is mostly short items to scan

## Regions

- Header — Names the site and offers a way back, kept small so the text starts early.
- Title — States what the page is about and who wrote it, right above the first paragraph.
- Body text — Holds the reading itself, at a comfortable line length.
- Pull quote — Lifts one line out of the text to give the eye a resting point.
- Footer — Closes the page with where to go next once the reading is done.

## How it reflows

- Phone: Every region stacks in one column that fills the screen, with a small margin on each side. (1 column)
- Tablet: The column stays single and gains wider margins so the lines do not grow too long. (1 column)
- Desktop: The column stays single and centred, with empty space on both sides keeping lines short. (1 column)

## Principles

- Keep body lines between 60 and 75 characters at every width
- Let the margins grow with the screen, never the line length
- Break the text with headings and quotes, not with side panels
- Put the title and the first paragraph in the first screen

Lay out the page with the "Single reading column" pattern.

The idea: One narrow, centred column carries everything in order, so the reader only ever has to scroll and read.

It suits:
- Long-form essays and articles
- Newsletters and journal entries
- Documentation pages read top to bottom
It is a poor fit when:
- Readers need to compare several things at once
- The page is mostly short items to scan

Build the page from these regions:
- Header: Names the site and offers a way back, kept small so the text starts early.
- Title: States what the page is about and who wrote it, right above the first paragraph.
- Body text: Holds the reading itself, at a comfortable line length.
- Pull quote: Lifts one line out of the text to give the eye a resting point.
- Footer: Closes the page with where to go next once the reading is done.

Reflow it at each width:
- Phone: Every region stacks in one column that fills the screen, with a small margin on each side. (1 column)
- Tablet: The column stays single and gains wider margins so the lines do not grow too long. (1 column)
- Desktop: The column stays single and centred, with empty space on both sides keeping lines short. (1 column)

Follow these principles:
- Keep body lines between 60 and 75 characters at every width
- Let the margins grow with the screen, never the line length
- Break the text with headings and quotes, not with side panels
- Put the title and the first paragraph in the first screen

Apply the idea and the rules above; do not copy any existing website.

Download brief (.md)

Regions

The parts of the page and the job each one does.

Header: Names the site and offers a way back, kept small so the text starts early.
Title: States what the page is about and who wrote it, right above the first paragraph.
Body text: Holds the reading itself, at a comfortable line length.
Pull quote: Lifts one line out of the text to give the eye a resting point.
Footer: Closes the page with where to go next once the reading is done.

How it reflows

Phone 390 · 1 column: Every region stacks in one column that fills the screen, with a small margin on each side.
Tablet 768 · 1 column: The column stays single and gains wider margins so the lines do not grow too long.
Desktop 1440 · 1 column: The column stays single and centred, with empty space on both sides keeping lines short.

Where it fits

Use it for

Long-form essays and articles
Newsletters and journal entries
Documentation pages read top to bottom

Avoid it when

Readers need to compare several things at once
The page is mostly short items to scan

Principles

The rules that keep the pattern working at every width.

Keep body lines between 60 and 75 characters at every width
Let the margins grow with the screen, never the line length
Break the text with headings and quotes, not with side panels
Put the title and the first paragraph in the first screen