web typography study guide

Alignment

Setting up text alignment is a fundamental typographic act. The four basic alignment types are: flush left, flush right, centered, and justified.

Flush left/Ragged right

Text alignment in Web pages is, by default, to the left, with ragged edges on the right. In flush-left text the left margin is even and predictable and the right margin is irregular. It is the most legible option for web pages because word spaces are consistent, so there are no big holes inside the lines of text.

To work with flush left, the designer must pay attention to the appearance of the rag on the right edge. There should be no excessively long or short lines, and hyphenation should be kept to a minimum.

Flush right/Ragged left

Flush right is the opposite of flush left. It forms a hard edge on the right, and leaves the left edge soft. It is difficult to read because it forces the reader’s eyes to start at a new position with each line. Flush right is not a good choice for use with long bodies of text. However, it can be used for sidebars, captions, marginal notes to suggest attraction among chunks of information, and usually when a small amount of text is meant to sit close to the right edge of a page or screen.

Centered

Centered alignment gives a formal and symmetrical impression. It is a good choice for invitations, titles, certificates, pull quotes, and other discrete pieces of information. However, it is difficult to read with long bodies of text. The ragged left margin of centered text makes scanning much harder because the reader must search for the beginning of each new line.

Justified

Justified text is set flush with both the left and the right margins. It creates a solid rectangle on the page. It is the most popular alignment in newspapers and books because of its efficient use of space. It is easy to read and has a formal feeling.

However, when there is a line with a particularly small number of words, odd spaces can occur. The white spaces throughout the text body are called “rivers”. In print, manually refined letter- and word-spacing and automatic hyphenation can adjust poor spacing. This level of control is difficult to achieve on web pages.

CSS3 has a text-justify property that aims to give the designer more control over text-align: justify. Currently it's available only with IE. Firefox and Safari support the CSS3 property hyphens which allows hyphens being inserted into paragraphs automatically.