How to Set Justified Text With CSS

Using the CSS Text-Align property to justify text

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 is rare, or 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. 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 that 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 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. 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, you'll use paragraphs of text because 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. 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 challenges, 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 white space 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 change 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 judgment. 

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 test it at a variety of sizes. The easiest test requires nothing more complicated than your own 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 reflow the text.

Only use justification after you've compared it to left-aligned text. You may 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Set Justified Text With CSS." ThoughtCo, Jul. 31, 2021, thoughtco.com/set-justified-text-with-css-3467074. Kyrnin, Jennifer. (2021, July 31). How to Set Justified Text With CSS. Retrieved from https://www.thoughtco.com/set-justified-text-with-css-3467074 Kyrnin, Jennifer. "How to Set Justified Text With CSS." ThoughtCo. https://www.thoughtco.com/set-justified-text-with-css-3467074 (accessed March 19, 2024).