What is the difference between left-aligned and justified text?

Left-aligned text lines up on the left edge and leaves the right edge uneven, so every space between words is the same width. Justified text lines up on both edges: the browser stretches the spaces in each line, and sometimes the letters, so every full line ends at exactly the same point. Left-aligned text, also called flush left or ragged right, is easier to read on screens because the even spacing keeps the eye moving at a steady pace. Justified text looks neat and formal but, without good hyphenation, it creates uneven gaps and "rivers" of white space that slow reading and cause problems for some readers. For most websites, left-aligned body text is the better default, and justified text should be used only with care.

Alignment is one of the first decisions you make when styling body text, and it affects readability, accessibility and the overall tone of a page. Print designers have justified columns for centuries, so it's natural to want the same tidy edges on the web, but browsers don't have the fine control over spacing that a typesetting system does. In this article you'll learn how each alignment works, what goes wrong with justified text in browsers, what WCAG says, how to set alignment correctly in CSS, how hyphenation changes the picture, and when centred and right-aligned text make sense.

How Each Alignment Works

Left-Aligned (Flush Left, Ragged Right)

With left alignment, the browser places words on a line until the next word won't fit, then breaks to a new line. Every word space is the natural width defined by the font. The right edge varies, and that varying edge is called the rag.

.article {
  text-align: start;
}

start is better than left in most cases. It means "left" in left-to-right languages such as English and "right" in right-to-left languages such as Arabic and Hebrew, so the same CSS works for both. It's also the browser default, so often you don't need to set it at all.

Justified

With justification, the browser fills each line the same way but then distributes the leftover space across the gaps until the line is exactly the width of the container. The last line of a paragraph is left at its natural width by default.

.article {
  text-align: justify;
}

Because the leftover space differs from line to line, word spacing differs too. A line with many short words gets small, even gaps; a line with three long words might get gaps several times wider than normal.

Side-by-Side Comparison

Aspect	Left-aligned	Justified
Left edge	Straight	Straight
Right edge	Ragged	Straight, except the last line
Word spacing	Consistent	Varies from line to line
Risk of rivers	Very low	High in narrow columns
Needs hyphenation	Helpful, not essential	Close to essential
Readability on screens	Generally better	Often worse without careful setup
WCAG 1.4.8 (AAA)	Compliant	Not compliant
Typical feel	Informal, modern, open	Formal, traditional, dense

What Goes Wrong With Justified Text in Browsers

Print typesetting software, and systems such as TeX, justify text by looking at a whole paragraph at once. They weigh every possible set of line breaks, adjust word spacing within strict limits, hyphenate where needed, and sometimes slightly change letter spacing or glyph widths to keep lines even. The result is justified text with spacing so consistent that most readers never notice it.

Browsers have traditionally been much simpler. They break lines one at a time, without looking ahead, and then stretch whatever is on each line. That causes several familiar problems.

Rivers of White Space

When wide gaps in consecutive lines line up vertically, they form channels of white space running through the paragraph. Your eye follows them down the page instead of along the line. Rivers are worst in narrow columns, where each line has few words and large gaps are common.

Uneven Texture

Good body text has an even "colour", meaning the mix of black letters and white space looks uniform when you squint. Justified text without hyphenation produces some lines that look dense and others that look loose. That patchiness is distracting and makes a page feel less polished, which defeats the point of justifying it.

Stretched Lines Before Long Words

A long word such as a URL, a product code or a word like "internationalisation" can't fit at the end of a line, so it moves down, leaving a short line above that gets stretched to fill the full width. With justification, that might mean three words spread across a whole line.

Narrow Screens Make It Worse

On a phone, a column might hold only six to eight words per line. That leaves very few gaps to absorb the leftover space, so each gap gets much larger. A justified paragraph that looks acceptable on a desktop can look broken on mobile.

Accessibility and WCAG

WCAG 2.2 Success Criterion 1.4.8 Visual Presentation, at level AAA, says that for blocks of text, a mechanism should be available so that text is not justified (aligned to both the left and right margins). It sits alongside other requirements such as a maximum line width of 80 characters and line spacing of at least 1.5 within paragraphs.

The reason is practical. Uneven word spacing makes it harder for some readers, including many people with dyslexia, to track words along a line, and rivers can make letters appear to swim. Most sites aim for WCAG AA rather than AAA, so justified text won't fail a typical audit, but the guidance is a clear signal that left-aligned text is the more accessible choice.

If you do justify text, the simplest way to respect this guidance is to offer an alternative, or to justify only on wide screens where lines are long enough to justify well:

.article p {
  text-align: start;
}

@media (min-width: 48rem) {
  .article p {
    text-align: justify;
    hyphens: auto;
  }
}

How Hyphenation Changes the Picture

Hyphenation is what makes good justification possible. When a long word can be split across two lines, each line holds more text, the leftover space shrinks, and word gaps become much more even.

<html lang="en-GB">
  ...
  <article class="article">
    <p>Paragraph text goes here.</p>
  </article>
</html>

.article p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto; /* older Safari */
}

Two details matter:

• The lang attribute is required: Browsers use language-specific dictionaries to decide where words can break. Without a lang on the element or an ancestor, hyphens: auto does nothing.
• Dictionary support varies: All current major browsers support automatic hyphenation for English and many other languages, but coverage for less common languages differs between browsers and operating systems.

Hyphenation helps left-aligned text too. It smooths the rag, which matters most in narrow columns such as cards and sidebars. For more control, including how to stop short words being split, see how to control hyphenation on the web.

Controlling the Last Line

By default the last line of a justified paragraph is left-aligned. You can change that with text-align-last, although stretching the final line is almost always a mistake in body text:

.article p {
  text-align: justify;
  text-align-last: start; /* the default behaviour, stated explicitly */
}

text-align-last: justify can be useful for short, fixed blocks such as a single line of spaced-out caps in a logo lock-up, but it will badly stretch a paragraph that ends with two words.

The text-justify Property

text-justify tells the browser how to distribute space: inter-word adds space between words only, inter-character adds space between characters as well, and auto lets the browser choose. inter-character is mainly intended for scripts such as Chinese and Japanese, which don't use spaces between words. Browser support for text-justify is uneven, so don't depend on it for layout.

When to Use Each

Use Left-Aligned Text For

• Body copy on almost any website: Articles, documentation, product pages and blog posts.
• Narrow columns: Cards, sidebars, mobile layouts and anything under about 45 characters per line.
• Content that includes long words: Technical writing with code, URLs, file paths or long compound terms.
• Interfaces: Form labels, table cells, menus and settings screens.
• Accessibility-first projects: Anywhere you're aiming for the WCAG AAA guidance on visual presentation.

Consider Justified Text For

• Long-form editorial pages with generous line lengths: Around 60 to 75 characters per line, with hyphenation on.
• Designs that imitate print: Digital editions of books or magazines where a formal texture is part of the brand.
• Multi-column layouts on wide screens: Where straight edges help define the columns, provided each column is still wide enough.

Even then, test the result with real content at every breakpoint. If you see rivers or stretched lines, go back to left alignment.

Centred and Right-Aligned Text

Two other alignments come up often enough to mention:

• Centred text: Both edges are ragged, so the eye has to find the start of every line. That's fine for one to three lines, such as a hero heading, a short call to action or a poem, but tiring for paragraphs.
• Right-aligned text: In left-to-right languages, it's useful for numbers in table columns so digits line up, and occasionally for captions or pull quotes beside a right-hand image. Avoid it for body text.

For tables, align numeric columns to the end and text columns to the start:

td,
th {
  text-align: start;
}

td.numeric,
th.numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

Tabular numerals give every digit the same width, so values line up exactly under each other.

A Sensible Default

If you want one setup to start every project with, this is a good one:

:root {
  --measure: 65ch;
}

.prose {
  max-width: var(--measure);
  text-align: start;
  hyphens: auto;
  overflow-wrap: break-word;
}

.prose h1,
.prose h2,
.prose h3 {
  hyphens: manual;      /* don't split words in headings */
  text-wrap: balance;   /* even out heading line lengths where supported */
}

This gives you left-aligned text with a comfortable line length, a smoother rag from hyphenation, and long URLs that wrap instead of overflowing. Headings are kept whole and balanced. If you decide later that a particular section should be justified, it's a one-line change.

---

FAQ: Left-Aligned vs Justified Text

---

Conclusion

Left-aligned and justified text differ in one simple way: left alignment keeps word spacing constant and lets the right edge vary, while justification makes both edges straight by varying the spacing. On screens, where browsers break lines one at a time and columns are often narrow, that variable spacing tends to produce rivers and uneven texture, and WCAG's AAA guidance recommends avoiding it.

For most websites, set body text to text-align: start, keep lines to a comfortable length, and turn on hyphenation for a smoother rag. Reserve justified text for wide, editorial layouts where it supports the design, always pair it with hyphens: auto and a correct lang attribute, and check it with real content at every screen size before you ship it.