Content Too Wide

Text spanning the full viewport width forces eyes to travel absurd distances between lines. Like reading a newspaper the width of a dining table.

What is this?

Picture a newspaper that is three feet wide. Your eyes read all the way across, then have to travel all the way back to find the start of the next line — and you land on the wrong one. That is what happens when your website text stretches edge-to-edge across a widescreen monitor. On a 27-inch display, a full-width paragraph can be 200+ characters per line. The human eye simply cannot track that distance accurately.

Why it matters

For your visitors: Reading wide text is physically exhausting. The eye has to make a long horizontal sweep, then a precise jump back to the left margin and down exactly one line. Get that jump wrong (and you will, frequently) and you re-read the same line or skip one entirely. After a few paragraphs of this, visitors give up. They do not know why your page feels "hard to read" — they just know they want to leave.
For your business: Wide text looks unfinished and unprofessional. Every well-designed website — Medium, Stripe, Apple, your favourite blog — constrains content width. When your text sprawls across the full viewport, it signals "no one designed this," which erodes trust in whatever you are selling.
The standard: Typography research consistently shows that the optimal line length is 45-75 characters per line, with 65 characters being the ideal sweet spot. In CSS terms, that is roughly max-width: 65ch for your content area. This is not a suggestion — it is backed by over a century of typographic research and confirmed by modern eye-tracking studies.

Constrained content width

<article style="max-width: 65ch; margin: 0 auto; padding: 0 1rem;">
  <h1>Your Heading</h1>
  <p>
    Text constrained to ~65 characters per line. Eyes track comfortably from line to line.
    Reading feels effortless.
  </p>
</article>

Full viewport width

<div style="width: 100%; padding: 0 20px;">
  <h1>Your Heading</h1>
  <p>
    This text stretches across the entire width of the browser window. On a wide monitor, each
    line could be 200+ characters long. Your visitors' eyes have to travel an enormous distance
    from the end of one line back to the beginning of the next, and they constantly lose their
    place. It is a miserable reading experience that makes even great content feel like a chore.
  </p>
</div>

How to fix it

React / Next.js

Tailwind provides max-w-prose which sets max-width: 65ch — the perfect content width. Use it for any text-heavy section:

function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="mx-auto max-w-5xl px-4">
      {/* Full-width area for hero, images, nav */}
      <header className="mb-12">{/* Navigation and hero can be wider */}</header>

      {/* Content area — constrained for readability */}
      <main className="mx-auto max-w-prose">{children}</main>
    </div>
  );
}

Plain HTML

<style>
  /* The golden rule: constrain your text */
  .content {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

<article class="content">
  <h1>Readable Content</h1>
  <p>
    This paragraph maxes out at 65 characters per line, which is the typographic sweet spot for
    comfortable reading.
  </p>
</article>

High impact — contentReadability~2 paws

This is one of the easiest and most impactful fixes in all of web design. One CSS property — max-width: 65ch — transforms your content from an eye-tracking nightmare into a pleasure to read. The cat is baffled when sites skip this.

How the cat scores this

The cat measures the rendered width of text-containing elements (paragraphs, list items, table cells) and calculates the average characters per line. Content areas exceeding 80 characters per line get flagged. The cat also checks whether the content area has any max-width constraint at all — full-viewport text containers with no width limit get a harder penalty. Headings and navigation are excluded from this check since they are typically short.