When developers decide to upgrade their site layout, the first instinct is to get rid of the boxed, narrow wrapper look. We want our sites to feel modern, open, and spacious.

We write some CSS to expand our main containers to utilize the full width of the screen:

.wrapper {
  width: 100%;
  max-width: 100%; /* Whitespace eliminated. */
}

While this looks great for headers, code showcases, and images, it introduces a major User Experience (UX) failure for readability: it ruins the measure.

1. The Math of Reading: Typographic Measure

In typography, the length of a line of text is called the measure.

For over a century, typographers and cognitive researchers have analyzed how human eyes track text. The consensus is clear: the optimal line length for comfortable reading is 50 to 75 characters per line (including spaces).

On modern monitors, if you allow text paragraphs to expand to the full width of the viewport: * A line of text can stretch to 150+ characters. * The Return Sweep Problem: As the reader’s eye reaches the end of a long line and sweeps back to the left, it has to travel too far. The eye frequently loses its place, reading the same line twice or skipping lines entirely. This causes unconscious cognitive strain and makes readers bounce.

2. The Solution: Constrained Fluid Layouts

The goal is to design a site that feels full-width, open, and immersive, while keeping the reading path highly focused and comfortable.

We can achieve this at the CSS layer by expanding the outer wrapper while strictly constraining the text elements inside it:

/* 1. Make the master layout wrapper spacious and fluid */
.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 2. Constrain text columns to the optimal measure (max 720px) */
.wrapper p, 
.wrapper ul:not(.index), 
.wrapper ol, 
.wrapper blockquote,
.wrapper h2,
.wrapper h3,
.wrapper h4 {
  max-width: 720px;
}

/* 3. Allow wide assets (code boxes, diagrams, tables) to use extra space */
.wrapper pre,
.wrapper table,
.wrapper .mermaid {
  max-width: 1000px;
  margin-left: 0;
}

Why This Works

By separating the layout width from the reading width, you solve two problems at once:

  1. Fluid Visual Identity: The site header, footer, and tables expand to use the wide screen, making the site look premium and modern.
  2. Comfortable Reading Path: The articles remain inside a centered, highly readable column that matches the print standards of top-tier publications.
  3. Mobile Fluidity: Because we use max-width instead of fixed width properties, the elements automatically shrink to fit mobile browsers cleanly, avoiding horizontal scroll breaks.

UX isn’t just about color choices; it is about respecting human cognitive and physical constraints. Don’t stretch your words to fill the screen.