Justified text is a block of text that is even on both the left and right sides. In standard English text, the right side of a block of text is ragged. This is called the rag. And the left side of the text block is lined up evenly along the left edge. If you want to justify the text, you want the left and right sides to be lined up evenly. This is called full justification.
How Does Justification Work?
The reason there is a ragged edge on one side of a block of text is because lines of text do not automatically end up the same length. Some have more or longer words while others have fewer or shorter words. So when a block of text is justified, the spaces that would otherwise have ended up in the rag need to be distributed through the line.
Every web browser maker has its own algorithm for how to apply the extra spaces within a line. They look at word length, hyphenation, and other factors to determine where to put the spaces. This means that justified text is not going to look identical from one browser to the next. But browser support is good for justifying text with CSS. It works in IE 4+, Safari 1+, Chrome 1+, and Opera 3+.
How to Justify Text
Justifying text with CSS requires two things: a section of text to justify that is inside a block with a set width. That second bit is important. If the width on the container element is not set, justification will still work, but it will be more difficult to maintain because you won't know how much text you need to create a block of text to be justified.
Once you have a block of text to justify, it's just a matter of setting the style to justified with the text-align style property.
text-align: justify;
Here is an example of a block of justified text.
When to Justify Text
Justified text can be hard to read. When you justify text, lots of extra space is added between words on the line. And those inconsistent gaps makes the text a lot more difficult to read. This is especially important on web pages which can be more difficult to read because of monitor issues, lighting, resolution, or other hardware issues.
Those spaces can line up with one another to create rivers of white space within the middle of your text. And on extremely short lines, justification can cause awkward lines that contain one word with extra spaces between the letters themselves.
The only time that you can safely justify text is when the lines are long and the font size is small. There is no hard and fast number for the length of the line or the size of the text, use your best judgement. But remember that justifying text is relatively new in typography because it was so difficult to do.
Once you've justified text, you should test it to make sure that it doesn't have a lot of rivers of white space. The easiest way to do this is to print out the text block (or the whole page), turn it upside down and squint at it. The rivers will stand out as blotches of white in an otherwise gray block of text. If you see rivers, you should make changes to the text or the width of the text block to get rid of them.
My recommendation: only use justification after you've compared it to left-aligned text. You should justify text because you've chosen to justify the text, and because you have good reasons to. Don't justify text simply because you can.
