How to Set Justified Text With CSS

Using the CSS Text-Align Property to Justify Text

justified text
justified text. Image courtesy J Kyrnin

One of the properties of a website's typography that you may choose to adjust during a site's development is how the site's text is justified. By default, website text is left justified and this is how many sites leave their text.  The only other options are right justified, which no one uses on websites since it would render the text essentially impossible to read online, or what is know as fully justified.

Justified text is a block of text that aligns on both the left and the right sides, as opposed to just one of those sides (which is what "left" and "right" justification do). The doubly justified effect is accomplished by adjusting the word and letter spaces in each line of text to ensure that each line is the same length. This effect is called full justification. You justify text in CSS by using the text-align property.

How Does Justification Work?

The reason you often see an uneven edge on the right side of a block of text is because each line of text is not the same length. Some lines have more words or longer words while others have fewer or shorter words. To justify that block of text, extra spaces must be added to some lines to even out all of the lines and make them consistent.

Every web browser maker has its own algorithm for applying the extra spaces within a line. The browsers look at word length, hyphenation and other factors to determine where to put the spaces.

As a result, justified text may not look identical from one browser to the next. This is fine since no site visitor will jump from one browser to another just to compare how your site's line lengths look! Rest assured, however, that major browser support is good for justifying text with CSS.

How to Justify Text

Justifying text with CSS requires a section of text to justify.

Typically, this is done to paragraphs of text since large blocks of text context that spans multiple lines will be marked up with paragraph tags.

After you have a block of text to justify, it's just a matter of setting the style to justified with the CSS text-align style property.

text-align: justify;

You would need to apply this CSS rule to an appropriate selector to get the block of text to render as intended.

When to Justify Text

Many people like the look of justified text from a design standpoint, largely because it creates a very consistent, measured look, but there are downsides to fully justifying text on a webpage.

First, justified text can be hard to read. This is because when you justify text, lots of extra space can sometimes be added between some words on the line. Those inconsistent gaps can make the text more difficult to read. This is especially important on web pages, which can be difficult to read already because of lighting, resolution or other hardware quality. Adding unusual spaces to the text can make a bad situation even worse.

In addition to readability issues, the blank spaces sometimes line up with one another to create "rivers" of white space in the middle of the text.

Those large gaps of whitespace can really make for an awkward display. Additionally, on extremely short lines, justification can cause lines that contain one word with extra spaces between the letters themselves.

So when should you use text justification? The best time to justify text occurs when the lines are long and the font size is small (something that is hard to ensure on responsive websites where line lengths changes based on screen sizes) . There is no hard and fast number for the length of the line or the size of the text;you must use your best judgement. 

After you apply the text-align style to justify text, test it to make sure the text doesn't have rivers of white space - and make sure to test it at a variety of sizes. The easiest way to do this is to view it with squinted eyes.

The rivers stand out as blotches of white in an otherwise gray block of text. If you see rivers, you should make changes to the text size or the width of the text block to get rid of those unsightly rivers.

Only use justification after you've compared it to left-aligned text as seen in this article. You make like the consistency of full justification, but the standard left justified text is usually more readable. In the end, you should justify text because you've chosen to justify the text for design purposes and have confirmed that your site remains easy to read.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/5/17