Column width for the modern web

Most teams do not choose a reading width. They inherit one.

It comes from an old container token, a copied blog template, a framework default, or a max-width value that survived three redesigns without being questioned. The result is usually acceptable in the weakest possible sense: nothing is obviously broken, but the page never becomes easy to read.

Column width matters because text is not a decorative fill. It is a sequence the eye has to travel, line after line, with enough continuity to preserve meaning and enough friction reduction to keep attention on the content instead of the layout.

This guide is a practical framework for choosing a width that helps the content do its job.

Start with measure, not the container

The central mistake is to treat container width and reading measure as the same thing.

A page container is a layout decision. It determines how much horizontal space a section can use overall. That space may need to accommodate images, side notes, metadata, or supporting navigation.

A reading measure is narrower. It is the width of the text block people actually read as prose.

When those two values collapse into one number, pages often get the worst of both worlds:

• dense layouts feel cramped because supporting elements have no room
• longform text feels too wide because the main column inherits the full container width
• mobile and desktop both end up compensating for a decision that was too coarse

A better approach is simple:

1. choose a page container for composition
2. choose a reading measure for prose
3. let those values relate, but do not force them to be identical

That distinction unlocks better layouts immediately.

Think in character count, then implement in CSS

The most useful mental model is not pixels. It is characters per line.

People do not read widths. They read lines. A readable line is long enough to keep ideas flowing, but short enough that the eye can reliably find the next line without strain.

For much longform web prose, a target somewhere around the familiar “roughly 60 to 75 characters” zone is a dependable starting point. That is not a sacred law. It is a working range.

It shifts with:

• typeface feel
• font size
• line-height
• language
• content density
• whether the page includes code, lists, or tables nearby

But it is still the right place to begin.

In practice, that means your CSS should express a reading measure with values that track text rather than just the viewport. ch units are often useful here, not because they are perfect, but because they keep the conversation anchored to text.

The real variables are width, type size, and line-height together

A page does not become readable because one number is “correct.” It becomes readable when width, type size, and vertical rhythm reinforce each other.

Widen a column without changing anything else and the page can start to feel loose and unstable.

Increase font size without revisiting width and a previously balanced measure can become too short.

Raise line-height without looking at heading spacing and figure margins and the page can start to drift apart.

This is why isolated max-width debates usually underperform. The reading experience is a small system, not a single property.

A good default workflow looks like this:

• choose a comfortable body size
• set a line-height that lets paragraphs breathe
• test the resulting line length in context
• tune the measure until scanning and return-to-line feel calm

That sequence usually produces better results than choosing a width first and forcing everything else to adapt.

Choose defaults by page type

Not all content wants the same measure.

Essays and editorial writing

Narrative prose generally benefits from a disciplined measure. This is where you can be most conservative and let the reading column stay narrow enough to feel intentional.

Documentation

Docs often want a slightly more flexible layout. The prose may sit next to code, tables, callouts, or navigation. The answer is usually not to make everything wide. The answer is to keep the prose column readable while giving the overall page room for supporting structures.

Marketing and storytelling pages

Marketing copy often benefits from tighter measures than docs. Shorter lines can increase emphasis and momentum, especially when sections are designed to be scanned quickly.

Case studies

Case studies tend to alternate narrative text with metrics, figures, and quotes. They often need an adaptable layout where the prose column is narrow, but supporting blocks can widen when appropriate.

Common failure modes

1. One global max-width for everything

A single container token applied to blogs, docs, FAQs, and hero sections is easy to maintain, but it usually hides distinct reading needs.

2. Treating wide screens as permission to widen prose

Desktop space is not an instruction to stretch the paragraph.

3. Solving measure problems with tiny type

Shrinking the font to fit more words per line often reduces comfort instead of increasing it.

4. Ignoring supporting patterns

Captions, quotes, notes, and tables can make a readable column feel better or worse depending on how they sit next to it. Measure is never completely isolated from the rest of the page.

5. Designing from placeholder text only

Real content has link density, lists, long words, code tokens, product names, and image interruptions. Test with material that behaves like your production pages.

A practical starting recipe

For many text-first sites, a sane first pass is:

• body size in the upper teens
• line-height around the comfortable longform range
• reading measure in the mid-60s to low-70s ch
• wider outer container for page composition
• clear spacing around supporting patterns so the prose column stays visually stable

That is not “the right answer.” It is the right starting point for testing.

The design goal is not perfection. It is ease.

People rarely say, “This page has a good measure.” They say:

• this is easy to follow
• this reads faster than I expected
• I did not lose my place
• the page feels calm

That is the outcome you are designing for.

The modern web does not need more decorative typography talk. It needs more teams who treat reading surfaces as part of product quality.

The easiest upgrade is also the most ordinary one: choose a measure on purpose.