Should I avoid using “text-align: justify;”?

Question

Is there any reason to avoid using text-align: justify;?

Does it reduce readability or cause problems?

Answer 1

Text justification can be done in several ways.

Couple of definitions: Adjusting the spacing between words is "tracking" Adjusting the spacing between characters is "kerning" Good layout programs do some kerning automatically, and it varies by letter pair. The va of variable can be kerned closer than the xa in exact. Good fonts have built in tables of kerning hints to aid in this process.

In early days of monospace fonts it was done by inserting extra spaces between words. This made for very clunky looking output. If you had 4 spaces at the end of the line, and 6 spaces in the line, 4 of them would become double spaces.

Monospace fonts shouldn't be justified.

With variable width fonts, we have em spaces, en spaces, etc, and so the space could be better distributed.

I think this is where most browsers are now. It works reasonably well most of the time. For it to work well the following conditions need to hold:

• You need a reasonable number of words on a line.
• A large word at the end of the line can make problems.

The average word in English is 5 characters. So on the average you will have 5 characters (the 5 character word plus space wouldn't fit so gets bumped to the next line)

If you have 10 words on the line, then you need to add about half a standard space to each interword gap.

If the last word is a long one, like "headaches" and there isn't room for it, now you have 10 spaces to distribute. This starts to look bad.

This is where a hyphenation dictionary comes into play. Hyphenation can be done by algorithm, but there are enough exceptions that having a dictionary helps a lot. (There is a special character ­ for soft hyphens for words not in your dictionary.)

Hyphenation can split a word so that the the line fills more evenly.

Empirically I decided that a 65 em line length made a good compromise. This gives 11-13 words per line a lot of the time.

Another approach to justification is to split the space up between characters. This avoids some of the problems above, but still looks odd if you are distributing a lot of space in not enough line. You see this in newspapers now and then where a word seems to have a full space between each character. This is a good argument for a longer line.

Good typesetting programs (InDesign, *TeX, Framemaker) do a combination of extra space in interword gaps, and tiny extra spaces between characters.

There is a new kid on the block, text-justify that can be used in CSS to modify the use of text-align: justify. Nominally it accepts the options

• auto (default)
• interword
• inter-character (+ distribute for legacy reasons)
• none

CanIuse https://caniuse.com/#search=text-justify CSS working group https://drafts.csswg.org/css-text-3/#text-justify-property

CanIuse reports compliance only for Firefox right now, Chrome supports it but requires that you enable experimental features. CanIuse claims that support is buggy. Going to the Chromium bug tracking site, claims that it's fixed. Go figure. Haven't tested.

Other pragmatic points:

I made four changes to my site's style sheet:

• Maximum line length of 65 rem
• body font increase to 110%
• leading increase to 125%
• Justified text.

The result was that time on site and pages per session doubled.

Anecdotal, but may be worth your own test.