Many articles around the web say that you should never use the CSS property text-align: justify. The main criticism is that so-called whitespace rivers reduces readability.
A study from 2017 showed that sloppily fill-justified text - without hyphens to break words across lines - reads slower than left-aligned text with a “ragged right”. However, the same research team performed another study (with a larger group of participants) where they saw little difference between fill-justified, hyphenated text and left-aligned text. It even showed a slight increase in reading speed for fill-justified text.
The earliest research I’ve found on this subject is a paper from 1986 (available on Sci-Hub). It suggests that fill-justified text reads 10% slower than ragged-right text. However, another study from 1998 was not able to replicate those findings, and instead, the researchers found no significant differences between the different justification styles. The authors even suggest that the 1986 paper might have spread the reluctance to use fill-justification. Also, the 1998 experiment had more participants, and it seems to have been performed with more rigour.
Numerous sources claim that fill-justified text is harder to read for people with Dyslexia. I have unsuccessfully tried to find research that supports these anecdotal claims. It seems plausible that dyslexic users would be affected by lousy typography to a higher degree than non-dyslexics, and improper use of text-align: justify can absolutely create messy-looking texts.
So where does this leave us? At the very least, research does not show that hyphenated, fill-justified text is inferior to left-aligned text with a ragged right.
In the 2010s, many browsers did not support the hyphens: auto CSS property. Now - for texts written in English - browsers do!
For languages other than English and older browsers, you can use Hyphenopoly.js which polyfills the hyphens property.
When to use it (and not to use it)
I’m not saying that you should always use text-align: justify. In fact, you probably shouldn’t use it in most cases. However, it is an available tool that is fine to use when it suits the aesthetics you’re after.
If you do decide to fill-justify text, make sure to use proper line lengths. Too long lines are hard to read, no matter the text justification. While short lines that fit very few words can cause huge gaps of whitespace between words, even with hyphens: auto. Therefore, consider changing to left-aligned text on mobile devices and narrow screens.
How to use it
Turning on justification and hyphenation is easy. Note that prefixing is still (in July 2023) required for the hyphens property.
.text-content {
text-align: justify;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Make sure to set the lang attribute (this is good practice anyway, and it can be set on any element):
<html lang="en">
Summary
In conclusion, fill-justified text is not inherently bad. Research doesn’t show that it’s harder to read than left-aligned text when properly hyphenated. Modern browsers support hyphenation for English, and you can use Hyphenopoly.js to support many other languages. Still, it’s easier to mess up the typography of fill-justified text, and you must choose line lengths with greater care. It shouldn’t be the default alignment choice, but it is perfectly okay to use when done with care and intention.
Commments