Text/Typographical Layout

Text Alignment

The default setting in browsers is to align text to the left. Text can also be aligned to the right, in the center, or justified (aligned on both the left and the right sides). Although some people like the look of justified text, studies have routinely shown that left-aligned text is the easiest to read. Some Asian and Middle Eastern languages are notable exceptions to this rule, since the normal text direction in these languages may be vertical from top to bottom or horizontal from right to left. For English and other left-top-right languages, the best practice is to align text on the left.

Some circumstances may allow for other text alignments, but these should be treated as the exception, rather than the rule. Center-aligned headings may be appropriate, for example, or a right-aligned date on a document.

Example

Since left alignment of text is the default, the following style is usually unnecessary, but is provided here as a reference.

p {text-align:left;}

Margins, Padding, and White Space

White space to set the content apart

In general, documents with empty space, or "white space," around blocks text are easier to read than documents in which the edges, or margins, of the text are close to the edge of the viewing area. Documents with limited white space appear more cluttered, and may be difficult for some readers with reading disabilities. Extra space around the text provides a cleaner layout and helps the reader focus on the text.

White space to distinguish paragraphs

Paragraphs should be easily distinguishable from each other. The default rendering in most browsers is to separate paragraphs with white space above and below each paragraph, which is effective under most circumstances. An alternative method of separating paragraphs is to eliminate the extra space above and below them, and instead indent the first line of each paragraph. Print materials such as books and magazines usually follow this convention. For the most part, however, this convention is best left to the print world.

On-screen viewing is somewhat different than on-paper viewing. When users scroll up and down the page, it can be easy to lose their place. The extra white space between paragraphs helps them to keep track of where they are. The screen shots of text below demonstrate how white space between paragraphs helps to distinguish them better than paragraphs separated only by an indented first line.

Screen shot of web-style paragraphs, separated by white space Screen shot of print-style paragraphs with the first line indented

Line Length

Most studies show that readers prefer and are more efficient reading relatively narrow columns of text, rather than wide columns that stretch across the whole page which may cause difficulty for users finding subsequent lines of text. Similarly, reading can also be impacted by very short line lengths (few characters per line) due to the overhead of continually scanning down to the next line.

One way to address line length is to add left and right margins that increase the white space on the sides. Another way is to limit the width of the text column. While an optimal line length value may vary based on the content, font face, etc., in general, fewer than around 50 or more than around 120 characters per line will likely introduce difficulty.

With such a wide variety of devices, ranging from small screen mobile phones to high resolution wide screen monitors, adapting web content to optimal line lengths can be difficult. Even on one device, the browser display size can vary based on screen orientation, resolution, or browser window size. Responsive web design, minimum and maximum widths, variable widths based on the viewport size, etc. can be implemented to ensure line lengths are suitable.

Text Decorations

Underline

In general, text should not be underlined unless it is used as a hyperlink. This does not mean that underlined text is inherently bad. It just means that the convention on the web is to underline links. People have gotten used to this convention. Using underlined text for non-link purposes on the web will likely confuse some users, who may attempt to click on the underlined terms.

Delete <del>, strike-through, and insert <ins>

Words or characters with strike-through effects appear crossed out or cancelled. Strike-through effects are sometimes used in legal documents to show changes from one version to another. This effect is accomplished with the <del> or <s> elements. Unfortunately, screen readers do not notify users when these elements are used, so there is no way to tell if the author has marked passages as crossed out. The makers of screen reader software should have fixed this issue long ago, but they haven't. Likewise, screen readers do not notify users when the <ins> element (insert) tag is used.

There is more than one way to solve this problem, but none of them are entirely satisfactory, because the real responsibility lies with screen reader developers. One method would be to create an alternative version with regular text in the document itself telling readers where the deleted portions begin and end. Authors could type "[begin delete]" at the beginning of portions to be deleted and "[end delete]" at the end. For some documents, this could quickly become a heavy burden. Another option under some circumstances might be to create only the finished document, not showing the changes in progress, though this would be inadequate if readers need to understand the nature of changes in progress. This type of problem will require some creativity to solve, to be sure.

It is possible to achieve the strikethrough effect with style sheets, but this should be used with caution. Style sheets are meant for control over the presentation, not to control semantic meaning - and deletions and insertions certainly have meaning.