Max width for website content: setting the container and the reading width separately
A site needs two widths, not one. The container limits how wide the layout gets, usually somewhere around 1100px to 1300px. The reading width limits paragraphs to about 60 to 75 characters a line, which is much narrower. Setting a single max width for website content and letting text fill it is why so many pages have lines too long to read on a laptop.
Why widths matter
Book and newspaper typographers settled long ago on fairly short lines for comfortable reading, because the eye has to find the start of the next line after each return. Very long lines make that jump harder; very short ones break phrases up and make reading choppy. Screens added a new problem: monitors keep getting wider, and a layout that stretches with them pushes text, images and buttons further and further apart.
The container width
- What it is
- The maximum width of the main layout, centred on large screens, with margins on either side.
- Typical values
- Roughly 1100px to 1300px for most marketing and business sites. Dense dashboards may go wider or use the full width.
- On phones
- The container is narrower than the screen by its side margins, usually 16px to 24px each side. Never zero for text.
- In CSS
width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px;, ormin()to fold it into one line.
Some elements can break out of the container on purpose: a full-bleed photograph, a coloured band behind a section, a header that spans the whole screen. The content inside them should still line up with the container's edges, so the page keeps its spine.
The reading width
For body text, aim for roughly 60 to 75 characters per line, including spaces. WCAG 2.2's success criterion 1.4.8, at level AAA, asks for blocks of text to be no wider than 80 characters (40 for Chinese, Japanese and Korean). Even if you aren't aiming for AAA, it's a sensible ceiling.
The ch unit is convenient here. It's the width of the zero character in the current font, so max-width: 65ch scales with the font size. Because most letters are narrower than a zero, a 65ch column usually holds somewhat more than 65 characters of real text; test with your actual typeface and adjust. Line length for the web goes into the measurement in detail.
| Element | Typical maximum | Why |
|---|---|---|
| Body paragraphs | About 60ch to 70ch | Comfortable line length for sustained reading |
| Introductions and ledes | About 35ch to 50ch at a larger size | Short, larger lines read as a deliberate statement |
| Headlines | Often limited by words rather than width; use balanced wrapping | Avoids one long line and an orphan |
| Pull quotes | About 20ch to 30ch | Reads as a quotation, not a paragraph |
| Forms | About 30rem to 40rem | Fields wider than their likely content look empty and are harder to scan |
Common mistakes
- Paragraphs filling a 1200px container. At 18px this can mean well over a hundred characters a line.
- Centring long text to fill space. Centred paragraphs are harder to read than left-aligned ones; see centred vs left-aligned text.
- Fixed widths in pixels.
width: 1160pxinstead ofmax-widthcauses horizontal scrolling on any smaller screen, which fails WCAG's Reflow criterion at 320 CSS pixels. - Different containers per section. If one section is 1000px and the next 1280px, the left edge jumps as you scroll.
- Forgetting the safe area. On phones with rounded corners and notches,
env(safe-area-inset-left)keeps content clear of the edge in landscape.
Big monitors
On a very wide monitor a 1160px container leaves broad empty margins. That's fine; it's better than stretched text. If the margins feel bare, let backgrounds and full-bleed images run edge to edge while the content stays in the container. Increasing the container width for huge screens rarely helps, because the reading width still has to stay narrow.
Widths in Anticode
Anticode's design engine uses the same container across all seven design systems: a maximum of 1160px, centred, with side padding of at least 20px that also respects the phone's safe area. Inside it, reading widths are set separately and in ch, so they follow the type size: the hero introduction is capped at about 38ch and section introductions at about 42ch, and pull quotes are narrower still. Layout rules compile to widths that can't overflow the screen, so there's no horizontal scrolling on a phone.
Questions people ask
What max width should a website container be?
Somewhere around 1100px to 1300px suits most business sites. Pick one value and use it for every section so the edges line up.
Should a website be full width?
Backgrounds and images can be. Text and the main layout usually shouldn't, because content spread across a wide monitor is hard to follow.
How wide should paragraphs be?
About 60 to 75 characters per line. In CSS, a max-width around 65ch is a good starting point to test with your font.