In typography, there are 4 common techniques to to align your text. The following typography guidelines apply to print work as well as web typography.
To align text with CSS (for the web) we use the text-align property and one of the following values left, center, right, and justify.
Let’s go through them one by one.
Left text alignment
In the Western World, our default text alignment is left, because we read from left to right, and it’s always easier to read text when each line in a text block begins on an even, straight edge.
Most paragraphs in this article are left-aligned, by default, by using the following CSS property:
text-align: left;A good rule of thumb: use left-aligned text most of the time.
Center text alignment
Center alignment is often used for titles, quotes, or other short text elements. Don’t use center alignment on big blocks of text, it’s hard to read because both edges (left/right) are uneven.
The paragraph above is annoying to read, right? That’s because I set its text alignment to center with this CSS property:
text-align: center;Read more about center-alignment.
Right text alignment
Right alignment is used in some non-western countries where they read from right to left. Right alignment can be used in western typography as a layout technique, e.g. to make a particular text element stand out (emphasis). But don’t use it on huge blocks of text if your audience reads left to right.
The paragraph above is annoying to read, huh? That’s because I set its text alignment to right with this CSS property:
text-align: right;Justify text
Justified text is when your browser forces your text to align/stretch evenly on the left and right edge of your text blocks. From a distance, this technique creates a nice aesthetic symmetry in your layout. The downside is that justified text will almost always create noticeable rivers in your text. Rivers are these ugly uneven gaps between words in text lines, which are unavoidable when using the justifying technique.
Do you notice those uneven gaps in the paragraph above? Especially in the last three lines. Those gaps are rivers — and they suck.
That’s because I gave that text block this CSS property:
text-align: justify;Note: you might be able to get away with justified text for a few lines or even whole blocks of text if you’re lucky that the number of words and letters per line happens to be similar. But try setting an entire article to justify, and you’ll start seeing a myriad of small to huge gaps in your body text that are so obvious to the reader that it hurts their reading experience.
Uneven gaps are the price for wanting symmetry, and if you ask me, it’s a price not worth paying. If you want your readers to enjoy reading your text, then don’t justify your text. It’s that simple.
Use hyphenation for text symmetry
Modern browsers can automatically add hyphens to your text, so you can get the symmetry that justifying text gives you, but without the ugly gaps (rivers).
To add them to your text automatically, use the CSS hyphens property, and give it a value of auto:
p {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}The -webkit and -ms properties are for Safari & IE11/Edge.
Of course, the price of hyphenation is that sometimes words will get split in two by a hyphen at an undesirable place, which can make the word hard to read. But to me, that’s a small price to pay, for an overall more even reading experience and aesthetically pleasing layout.
Hyphenation browser compatibility
The hyphens property works fully in Firefox (Mac/Windows), and in Chrome, Opera, and Safari — if you’re using Mac.
Here’s an overview hyphenation browser compatibility CanIUse.com
Amateur vs. Pro typography
You can always tell that a typography amateur has been involved when a website presents huge blocks of justified text. A professional would never prioritize symmetry over readability. Rule of thumb: don’t justify your text.
The same goes for center-aligned text. When dealing with multiple lines of center-aligned text, your text starts to become uneven and hard to read. Wasting your readers time is the last thing you want. Think about how impatient the average person is, including yourself. Use center alignment sparingly, and it’ll work great. Overdo it and you’ll make it clear to your reader that your content is not that important since you didn’t bother spending 1-second formatting it correctly.
