Text Alignment and Hyphenation
As described in the article “Selecting the Right Line Spacing”, line length and spacing are not the only important things when it comes to readability: text alignment is critical, as well. If you use the CSS parameter text-align carelessly, you not only hurt the legibility of the text, but also make your design seem amateurish. In the following, we offer a few tips on left-aligned, centered and right-aligned text.
Left-aligned text
For text that is read from left to right, an even left edge for line breaks is helpful and increases reading comfort. In this way, the left-aligned default setting is a good selection and should only be changed with great care. Since no separations are generally available in web design, the ragged right edge is not always beautiful; more on this below.
Figure 1: The text to the left is a good example of justification. The ragged edge is not too large; there are no step-like effects or unsightly separations. The justification in the text on the right side has ragged areas that are too large, step-like effects and unsightly separations with only two characters.
Centered text
Apart from headlines or introductory texts of just a few lines, you should leave the center axis alone. While centered text can have a certain appearance of order at first glance, readability suffers for longer texts because of the lack of even edges for orientation. The center axis is considered a notorious amateur mistake and is avoided by the professionals, for good reason.
Figure 2
Right-aligned text
Right-aligned text is uncommon in print. Flexible page widths on the web mean that right-aligned text quickly disappears from the focus of the observer and makes it complicated to use. Apart from a few exceptions − and even then for a few lines only − you are better off not using right-aligned text.
Figure 3
Justification
Justification has a particular role and is created with the parameter text-align:justify in CSS. Careful, however: lines of equal length and the additional even right edge do smooth out the layout, but at a high price. Well- and evenly justified text is a typographic art that demands an extreme level of design control. When it comes to dynamic web design, you don’t have this level of control. For example, Gutenberg used over 250 letter variations with widths that differed only slightly in order to achieve balanced typesetting − an unimaginable task in today’s world and impossible on the web, technically speaking.Hyphenation on the web is still a problem, and as a result the word spacing expands to an unbearable amount, making the text appear blotchy and disharmonious. Even the straight right margin in justified text cannot make up for the typographical and illegible catastrophe that results. So, as far as justification on the web is concerned, you’re best off leaving it alone.
Figure 4
Hyphenation
To close, a few words on hyphenation. This option is necessary for an even text, not only in the case of justified text, but for left-aligned typesetting, as well. However, since users on the web can modify font sizes and column widths, it is harder to control the word breaks and you have to rely on an automatic process.Currently, all modern browsers are expecting vendor-specific prefixes for the activation of automatic hyphenation.
For example:
body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
In the future, the option hyphens: auto alone will be enough. Pay attention to the correct language assignment in the HTML tag (that is, for example, <html lang="en">), since otherwise potentially incorrect language algorithms can make the hyphenations an orthographic disaster.
As nice as automatic hyphenation in web design is, it’s not so satisfying for typographers. They don’t have any real control. Important options, such as, for example, the minimum number of separated letters or the maximum number of hyphenations in succession are more or less left to chance, which may cause unattractive results.
Another option vis-à-vis the automatic feature that you have to know about: with the HTML tag , you can set a soft hyphen and instruct browsers to add a word break here if necessary. It will not be the same as a line set by hand, of course, but you can relieve some of the fear associated with very long words and prevent large gaps in the alignment.