How do I best avoid ragged edged text in web typography?
Is there any common solution apart from using text-align: justify?
I'd like to improve the readability of my web site, but words in my mother tongue are rather long (compared to English), which leads to an unpleasant type face very often. I don't want to justify my text, though. Are there any other attributes (e.g. letter spacing) that can be addressed with CSS to improve the overall visual appeal and text wrapping?
I'd like to improve the readability of my web site
Then you want to leave the rag as-is. The rag is caused by the fact that words aren't all the same length, so that each line of text, when properly spaced in relation to itself, simply won't be the exact same width as any other line.
Justfying text looks nice, but doesn't necessarily improve readability. In fact, it can cause problems with it when the lines are varied enough that it introduces huge spacing between words or even letters in some situations (used to be quite common in newspapers with narrow columns).
There are really only two ways to push ragged text closer to justified. One you mention, which is text-align: justify. This is automated and you are at the mercy of the browser to make the best call line-by-line in terms of adjusting spacing. If your average line has 80 characters, this option will work better than if your average line only has 20 characters.
The other option is judicious used of hyphenating words. CSS3 offers some help with this. See: Is it possible to enable auto-hyphenation in HTML/CSS?
Alas, hyphenation can also lead to readability issues.
(BTW, this question would be better served over on graphicdesign.se)
