Should Your Marketing Site Use Full-Width or Contained Layouts?

Should Your Marketing Site Use Full-Width or Contained Layouts?

Use full width for backgrounds and imagery, and contain the text. The debate is usually framed as a style choice, but reading research makes one side of it a measurable usability question. Colour can run edge to edge. Paragraphs should not.

We have this conversation on most projects, usually when someone shares a beautiful edge-to-edge reference site and asks why their paragraphs cannot do that. The answer is not that we dislike it. It is that on a wide monitor it produces lines nobody can comfortably read.

Here is the actual trade-off, what the accessibility guidance says, and how we decide on each section of a page.

What Do We Mean by Full Width and Contained?

Full width means the content stretches to the edges of the viewport, growing as the window grows. Contained means content sits inside a maximum width, so past a certain screen size the content stops growing and the margins grow instead.

Most real sites are a mix. A hero with a full-bleed background image and a contained headline inside it is both at once, and that combination is usually the right answer rather than a compromise.

The question worth arguing about is narrower than it sounds: what happens to a paragraph of body text on a 32 inch monitor. Everything else is taste.

What Does Accessibility Guidance Actually Say?

It sets a limit. The W3C's Web Content Accessibility Guidelines include Success Criterion 1.4.8 Visual Presentation, at conformance level AAA, which requires that a mechanism is available for text blocks where the width is no more than 80 characters or glyphs, or 40 for CJK scripts.

The rationale given is specific rather than aesthetic. The W3C explains that for people with some reading or vision disabilities, long lines of text become a significant barrier, because they have trouble keeping their place and following the flow of text.

That criterion also covers related requirements: text not justified to both margins, line spacing of at least one and a half within paragraphs, paragraph spacing at least 1.5 times the line spacing, and text resizable to 200 percent without horizontal scrolling. It is worth reading as a set, because they reinforce each other.

Is There Research on the Best Line Length?

Yes, and it points to a narrower range than 80 characters. Research on reading finds that both very short and very long lines slow reading down by disrupting the normal pattern of eye movements, with around 55 characters per line supporting effective speed and comprehension.

So the accessibility criterion sets a ceiling and the readability research suggests a target somewhere below it. In practice we design body text to sit around 60 to 70 characters, which lands comfortably inside both.

This is the main reason contained text wins. A full-width paragraph on a wide monitor can easily hit 150 characters per line, which is nearly twice the level WCAG flags as a barrier.

Does Anyone Actually Read the Paragraphs?

Less than writers hope, which strengthens the argument rather than weakening it. Nielsen Norman Group's report on how people read online draws on three large-scale eyetracking studies spanning 13 years, with over 500 participants and more than 750 hours of testing session time.

That research describes people moving through pages in recognisable gaze patterns rather than reading linearly, naming the F-pattern, layer cake, spotted, commitment, zigzag, lawn mower, list bypassing and section bypassing patterns among others.

Scanning depends on the eye finding the start of the next line quickly. Wide measures break that, because the return sweep becomes a search. If your readers are skimming, wide text does not just slow them down. It pushes them to give up on the paragraph entirely. Our piece on designing for skimming goes further into how to support that behaviour.

When Is Full Width Genuinely Better?

For anything where the content is the image. Photographic heroes, product screenshots that benefit from scale, logo walls, and background colour blocks that separate sections all get better as they get wider, because none of them requires the eye to track a line.

Data tables and dashboards are the other honest case. A comparison table with six columns is more usable at 1,400 pixels than squeezed into 720, and forcing it into a narrow container in the name of consistency makes it worse.

Full-bleed sections are also how you create rhythm. A page where every section sits in the same container reads as one long column, and alternating between contained and edge-to-edge is one of the cheapest ways to give a long page structure.

What About Really Wide Screens?

Plan for them explicitly, because they are where naive layouts fall apart. A design that looks balanced at 1,440 pixels can look sparse and strange at 2,560, with a small block of content marooned in a field of white.

Our approach is to cap the text container and let the surrounding elements keep scaling. Background images grow, section padding grows a little, the measure stays where it should be. The page feels proportionate rather than stretched or stranded.

The alternative some teams choose is to scale everything with viewport units. It works until the font size becomes absurd on a large display or illegible on a small one, so if you do it, clamp the range at both ends.

How Do You Handle This Responsively?

Set a maximum width on the content container and let padding do the work below it. On small screens the container is effectively full width minus a gutter. On large screens it stops at its cap. One rule covers the whole range without a breakpoint for every screen size.

Modern CSS makes this much less fiddly than it used to be. A fluid size with a hard floor and ceiling handles type scaling, and container queries let a component respond to its own space rather than the viewport, which matters when the same card appears in a sidebar and a full-width grid.

We covered the breakpoint side of this in our piece on responsive breakpoints. The short version is that fewer, well-chosen breakpoints beat a long list of device-specific ones.

What Do We Do by Default?

Contained text, full-bleed decoration. Body copy sits in a container tuned to a comfortable measure, headings can run a little wider because they are read differently, and anything visual is free to reach the edges.

We also avoid putting long text over full-bleed imagery. It reads badly, it creates contrast problems that are hard to solve across every image, and it is usually a sign the section is trying to do two jobs at once.

The exception we make is for short, high-impact lines: a headline, a stat, a single sentence of positioning. Those work edge to edge precisely because they are not paragraphs, and our piece on hero section design covers how far to push that.

So Which Should You Pick?

Stop picking one. The useful decision is per section, and it comes down to a single question: does the eye have to track a line here? If yes, contain it, aim for a measure in the sixties, and check it on the widest screen your analytics show. If no, let it breathe.

The sites that get this wrong in either direction are usually applying one rule everywhere. Fully contained everything feels timid and boxy. Fully edge-to-edge everything is exhausting to read. The craft is in alternating deliberately.

If you want a second opinion on a layout that feels off but you cannot say why, we are happy to take a look. You can reach our team at phoenix.studio.