Thursday, April 14, 2011

Should I avoid using "text-align: justify;"?

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

Does it reduce readability or cause problems?

From stackoverflow
  • 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)...)

  • 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.

  • 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.

  • 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).

    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.

    ShreevatsaR : Have you heard of hyphenator [ http://code.google.com/p/hyphenator ]? Maybe you should edit your answer to mention it, if you think it's worth mentioning.
  • 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.

    Andy Ford : Voted up. However the prevailing recommendation seems to be about 10 words per line for maximum legibility/readibility.
    dylanfm : If you want to get more precise it's ~65 characters per line.
    Andy Ford : thanks, dylanfm. That is a more reliable measure due to its precision =)
    allesklar : It's 10 words for readability in general but in my experience that's a bit light for justified text.
    dylanfm : No worries Andy :) hehe
  • 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.

  • Erhh... No...!

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

  • 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.

  • 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.

  • I'm using "justify" on my blog because I think it looks more formal. But the problem is, whenever I'm viewing it in "Feedly", I cannot see the paragraphs. Maybe I should try to use "align-left" now. I don't know if it's related but I'm really confuse now.

  • 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.

  • agree it's a bit clunky on screen but works well on print, really down to the project at hand.

    a lot of architectural firm's prefer text fitting closely within a grid layout without the drop-off on the side and text-align:justify helps this a lot.

    really a design decision.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.