Why Justified Text Is Usually a Bad Idea on the Web

A designer hands you a mockup where every paragraph forms a crisp rectangle, both edges perfectly straight, like a printed magazine. You add text-align: justify and it looks right on your 1440px monitor. Then you open it on a phone. One line has three words stretched across the screen with huge gaps between them. The next line is crammed. Vertical channels of white space wander down the paragraph. A long URL sits alone on a line with the spaces around it blown open.

Justified text looks orderly in print because professional typesetting software works hard to make it so. Browsers do far less of that work, and the web's narrow, variable column widths make the problem worse. This article explains how justification works, why it usually fails on the web, who it hurts most, and the rare cases where you can justify text safely with modern CSS.

What Is Justified Text?

Justified text is aligned to both the left and right margins. To make every line exactly the same width, the layout engine adds space between words (and sometimes between letters) until each line fills the column. The last line of a paragraph is usually left-aligned.

The alternatives are:

Alignment	CSS	Edges	Word spacing	Best for
Left (ragged right)	text-align: start	Straight left, ragged right	Consistent	Body text in LTR languages
Justified	text-align: justify	Straight both sides	Variable	Print, carefully controlled layouts
Centered	text-align: center	Ragged both sides	Consistent	Short headings and CTAs
Right (ragged left)	text-align: end	Ragged left, straight right	Consistent	Captions, RTL body text

Using start and end instead of left and right makes your CSS work for right-to-left languages automatically.

How Print Makes Justification Work

In books and newspapers, justified text works because typesetting systems use several techniques together:

1. Paragraph-level line breaking. Systems like TeX and Adobe InDesign evaluate the whole paragraph to find the best set of line breaks, not just line by line. This is the Knuth-Plass algorithm and its descendants.
2. Aggressive, dictionary-based hyphenation, with control over the minimum characters before and after a hyphen and the maximum number of consecutive hyphenated lines.
3. Small adjustments to letter spacing and glyph width, spread invisibly across a line.
4. Human review. Editors rewrite or nudge text to fix bad lines before publication.
5. Fixed column widths. The designer knows exactly how wide every column will be.

Why Browsers Struggle

Browsers historically use a greedy line-breaking algorithm: they fill each line with as many words as fit, then move on, without considering how the choice affects later lines. When justified, all the leftover space on each line is distributed into its word gaps. If a long word does not fit, the remaining words on that line get stretched to fill the gap.

On top of that:

• Column widths vary. The same paragraph might be 320px wide on a phone and 700px on a desktop. You cannot hand-tune lines.
• Hyphenation is off by default. Without it, justification has nothing to work with but word spaces.
• Content is dynamic. CMS editors, translations, and user content change text constantly.
• Long unbreakable strings like URLs, code, and product names force extreme spacing on neighboring lines.

The result is uneven word spacing and rivers: vertical or diagonal streaks of white formed when wide gaps line up across consecutive lines.

The Readability and Accessibility Costs

Uneven Spacing Slows Reading

Consistent word spacing helps the eye group letters into words and move smoothly along the line. When spacing jumps between tight and loose from line to line, reading rhythm breaks. The effect is small for a single paragraph and adds up over a long article.

Rivers Distract

Rivers create visual patterns that pull attention away from the words, especially for readers sensitive to visual noise.

Dyslexic Readers Are Hit Hardest

The British Dyslexia Association's style guide recommends left-aligned text and avoiding justification, because uneven spacing makes it harder to track words and lines. WCAG 1.4.8 Visual Presentation (Level AAA) requires that a mechanism is available so that blocks of text are not justified. While AAA is not usually a legal requirement, it signals clearly that justified text is an accessibility barrier.

Ragged Edges Are Useful

A ragged right edge is not a flaw. The varying line endings give the eye distinct landmarks, making it easier to find the start of the next line. Justified text removes those landmarks.

Narrow Screens Make It Worse

Fewer words per line means fewer gaps to absorb the extra space, so each gap gets larger. On a 360px phone with 18px text, a line might hold only six or seven words. Justifying that produces obvious holes.

A Quick Demonstration

You can see the problem yourself. Paste this into an HTML file and resize the browser to phone width:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        font: 1.125rem/1.6 system-ui, sans-serif;
        margin: 1rem;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        max-width: 50rem;
      }
      .left {
        text-align: start;
      }
      .justified {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <p class="left">
        Configure the deployment pipeline at
        https://example.com/docs/configuration/advanced-settings before
        running the migration, then verify the environment variables.
      </p>
      <p class="justified">
        Configure the deployment pipeline at
        https://example.com/docs/configuration/advanced-settings before
        running the migration, then verify the environment variables.
      </p>
    </div>
  </body>
</html>

The justified column will show large gaps around the URL, while the left-aligned column stays even.

When Justified Text Can Work

Justification is not always wrong. It can work when you control enough variables:

• Wide, stable columns with at least 60–70 characters per line.
• Hyphenation enabled with a correct lang attribute.
• Editorial or print-like layouts such as long-form essays, ebooks, and magazine-style features, where the visual effect is part of the design intent.
• Languages where justification is the norm and the browser's handling is good, for example some CJK layouts.
• Content without long URLs, code, or unbreakable strings.

Even then, apply it only at wider viewports and keep mobile text left-aligned.

How to Justify Text Safely with CSS

If you decide to justify, do it carefully. Here is a progressive approach:

.article p {
  text-align: start;
}

@media (min-width: 48rem) {
  .article p {
    text-align: justify;
    text-justify: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    -webkit-hyphens: auto;
  }
}

.article :is(a, code) {
  overflow-wrap: anywhere;
}

What each property does:

• text-align: justify enables justification.
• text-justify: auto lets the browser choose how to distribute space. inter-word restricts it to word gaps and inter-character spreads space between letters, which is mainly useful for some East Asian scripts. Support is uneven, so treat this as a hint.
• hyphens: auto lets the browser hyphenate using its dictionary for the language in your lang attribute. This is the single most important setting for justified text. Our guide on controlling hyphenation with CSS covers it in detail.
• hyphenate-limit-chars: 6 3 3 only hyphenates words of at least 6 characters, with at least 3 before and 3 after the break, preventing ugly breaks like "a-bout." Support is best in Chromium and Firefox.
• overflow-wrap: anywhere prevents long URLs from overflowing, at the cost of breaking them mid-string.

Also make sure your HTML declares the language:

<html lang="en">

Without it, hyphens: auto does nothing in most browsers.

What About text-wrap: pretty?

text-wrap: pretty asks the browser to use a slower, smarter line-breaking approach that considers multiple lines, mainly to avoid short last lines. It improves ragged text and can modestly help justified text in browsers that implement it, but it is not a full paragraph-level justification engine. See our guide on text-wrap: balance and pretty for details.

Let Users Opt Out

If you justify text for design reasons, consider WCAG 1.4.8 and provide a way to turn it off. A simple approach is a reading preference toggle:

:root[data-align="start"] .article p {
  text-align: start;
  hyphens: manual;
}

const toggle = document.querySelector("#align-toggle");

toggle?.addEventListener("click", () => {
  const root = document.documentElement;
  const next = root.dataset.align === "start" ? "justify" : "start";
  root.dataset.align = next;
  try {
    localStorage.setItem("align", next);
  } catch {}
});

Reader modes in Safari, Firefox, and Edge also strip justification, but you should not rely on users knowing about them.

Better Alternatives to Justification

If the goal is a tidy, structured look, these techniques give you most of the benefit without the costs:

1. Limit line length to 45–75 characters so the ragged edge is gentle. See ideal line length.
2. Use text-wrap: pretty to reduce awkward short last lines.
3. Enable hyphenation on narrow screens only to smooth extreme raggedness.
4. Use a strong grid for images, headings, and margins so the layout feels structured even with ragged text.
5. Prevent orphans in key paragraphs. Our article on preventing orphans and widows shows how.

---

Justified Text FAQ

Conclusion

Justified text looks neat in print because typesetters and software work hard behind the scenes, with paragraph-level line breaking, careful hyphenation, fixed columns, and human review. Browsers on the web have fewer of those tools and must handle columns that change width on every device, so justification usually produces uneven word spacing, rivers, and extra difficulty for dyslexic and low-vision readers.

Make left-aligned text your default for body copy. If a design truly calls for justification, limit it to wide screens, enable hyphenation with a correct lang attribute, handle long strings, and give readers a way to turn it off. In most cases, a controlled line length and text-wrap: pretty give you a tidy look without the costs.

Here are some useful references for going deeper on text alignment and justification:

1. MDN Web Docs: text-align — values, logical alignment with start and end, and justification behavior.
2. MDN Web Docs: hyphens — enabling automatic hyphenation and its dependency on the lang attribute.
3. W3C: Understanding Success Criterion 1.4.8: Visual Presentation — the AAA guidance on avoiding justified text.
4. MDN Web Docs: text-justify — how browsers distribute space in justified lines and current support.
5. Butterick's Practical Typography: Justified text — when justification is appropriate and why hyphenation matters.