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?

Rustle

For the future googlers: check the edit in the accepted answer. – Lepsy

Answer 1

Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.

This site is a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.

The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.

I should note that with ­ (soft hyphenation) correctly separating long troublesome words like super­awesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.

Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.

Toulouselautrec

Rivers are also more noticeable in high contrast layouts. If you use a lower contrast -- say about 4-5 to 1 for luminance, and also have some hue contrast, rivers are much less noticeable. You can also decrease the river effect by increasing your leading. Longer lines require greater leading to help eyes track. – Aerie

Answer 2

text-align: justify shouldn't be used in browsers at the moment. They aren't good at handling the minute details within and the output ends up containing lots of rivers and there's no support for hyphenation (other than soft hyphens).

Note above was written 4.5 years ago. Things are slowly changing... http://caniuse.com/#feat=css-hyphens

Edit: Hyphenator was brought to my attention in this answer's comments. It looks like it makes text-align justify worth using, check out the sites that use it. You may want to use javascript to apply text-align justify before using this script so that those without javascript don't get caught out.

Edit 2: CSS now allows for hyphenation with the hyphens property [browser support]. PPK is now saying to add it to your stylesheets, whilst Eric Meyer says just add it for mobile.

Edit 3: A good little overview of things available to us now, with some SASS.

Cirone

Have you heard of hyphenator [ code.google.com/p/hyphenator ]? Maybe you should edit your answer to mention it, if you think it's worth mentioning. – Mim

I disagree. I like justified text, and as long as most of the lines are around 50-60 em long most browsers do a reasonable job of it. – Aerie

Answer 3

The problems brought up by others about justify alignment are more prevalent with narrow columns. If your columns are wide enough in relation to the size of your fonts and other parameters then it's ok to justify the text. Let's say you'd want a minimum of 12 to 15 words per line in average. More is better.

Tatty

Voted up. However the prevailing recommendation seems to be about 10 words per line for maximum legibility/readibility. – Unwary

If you want to get more precise it's ~65 characters per line. – Cirone

thanks, dylanfm. That is a more reliable measure due to its precision =) – Unwary

It's 10 words for readability in general but in my experience that's a bit light for justified text. – Tatty

Answer 4

There's no technical reason not to - it's purely a design decision. Many people find that justified text is harder to read, but I guess it depends on your situation. Though it works fine for print, generally web browsers do not give enough control over the eventual output of text to guarantee that what you're serving won't look like crap on some people's screens.

Your best option is to avoid justification.

Virginity

Answer 5

I cant think of a compelling reason why not to justify text - at a certain point the volume and width of content almost demand that it be justified. Of course, you'll get issues with content consisting of certain word combinations, but to my mind if you're seeing rivers and unusually large spaces between words you have a different problem altogether - one of readability and clarity.

What I would avoid, at all costs, is centered body text. I don't think there's a greater red flag of ammateurish web design than that.

Mccullers

100% on this >>>> "I don't think there's a greater red flag of ammateurish web design than that".... It should be reserved for printed wedding and death accouncements. – Hew

Answer 6

I prefer left justification (text-align: left) because it's generally more readable. It's also quicker to read evenly-spaced words, so I hear. Unless you have a stylistic reason for using justify, keep it left, right, or center. Especially for body text, use left. (Actually, you'd want something like "forward" for text in the other direction (e.g. Hebrew)...)

Sordello

Answer 7

Justification should not be used without hyphenation. Here is a PHP based hyphenation library, and a port of this library to a WordPress plugin: wp-Typography.

Looney

Answer 8

Like any web design question... it depends. As has been suggested, justified text does not usually end up looking good in narrow columns. I'd recommend against it as a general rule in sidebars as sidebars are usually narrow.

With body copy at the often recommended 10 words per line (or with any amount above that) you will probably be able to get away with justified text and have it look reasonably good most of the time unless you're using a lot of really long words and/or strings.

I think I've pimped this site on StackOverflow before, but Jon Tan uses justified text in his body copy (within articles) and it looks great 99.99% of the time.

Unwary

Answer 9

Erhh... No...!

[seriously] WordPress uses justify, and I think that's a pretty strong statement in regards to whether or not it decreases readability...

Dacia

Answer 10

You can also use text-justify:newspaper. The text-justify css tag helps you control how you wrap the text when you justify

Holpen

text-justify exists in the latest version of the CSS3 Text module draft, but the value of newspaper does not (and probably never have) existed. Also, these are CSS properties, not tags – Lure

it does exist -- it's a "microsoft" value. – Nitrometer

@J-16SDiZ so it may as well not exist :P – Realty

@YiJiang text-justify: newspaper was in a 2003 CR for CSS3 Text, so it's not quite accurate to say it never* existed—regardless of whether it was, at one time, proprietary. :) – Dire

Answer 11

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.

Aerie

Answer 12

I think it is perfectly OK on print, but it is clunky on most Web browsers, by lack of fine control of spacing and hyphenation. Typographers can even play slightly on letter spacing or font contraction in some cases, as pages/columns (at least in magazines) can be finely tuned.

Whereon

Answer 13

It should be mentioned that Internet Explorer (at least) up to version 8 does not render text-align: justify correctly. Instead it is interpreted as text-align: center.

Here is more info: text-align: justify

Caused me some headaches to find out why IE kept centering stuff. Maybe it saves somebody else some time.

Pyre

You missed out the most important part - it behaves incorrectly only for table caption boxes. If this was true for all elements then nobody would be using this property – Lure

yup. should have finished reading... still I stumbled upon this in IE7 and am not using any tables in my project. Strange. – Pyre