Text/Typographical Layout
Article Contents
Translations
Translations of this article are available in:
Spanish - External Link - courtesy of David Ferrer Serra.
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 it 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 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.
Compare the screen shot above—with very small margins and almost no white space—to the one below—with 15% margins and substantially more white space.
Most readers find the second example easier to read. The extra space around the text provides a cleaner layout and helps the reader focus on the text.
Example
Both of the style definitions below will have the same
effect. When using margin (instead
of margin-left, margin-right, margin-top,
or margin-bottom), specify the
margin in clockwise order: top, right, bottom, left.
p
{margin: auto 15% auto 15%;}
.another_p
{margin-left:15%;
margin-right:15%;} 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.
"Column" Width
Most studies show that readers prefer relatively narrow columns of text, rather than wide columns that stretch across the whole page. One way to partially achieve this effect 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, to about 400 pixels, for example. The problem with limiting the width, however, is that it constrains the user's preferences. Some users like to maximize their browser window on high-resolution monitors, even though this creates long lines of text. Constrained columns can look a bit strange when browsers are enlarged to their full width on high-resolution monitors.
Other users, such as those with low vision, prefer columns of text even smaller than 400 pixels. In addition, if the individual enlarges the fonts, 400 pixels may be too small of a space to contain the enlarged fonts.
In some circumstances it may be appropriate to constrain the width of a text column, but most of the time it is better to let the user decide how wide to make the text column. Users can control the size of their browser window, and should be allowed set their own parameters as much as possible.
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> tag.
Unfortunately, screen readers do not notify users when the <del> (deleted)
tag is 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> tag
(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 not be done. Style sheets are meant for control over the presentation, not to control semantic meaning. The text looks like it is meant to be deleted, but the author has not designated it to be truly deleted. The difference between true semantic markup and styles that look exactly the same is sometimes confusing, but the difference is important. HTML conveys semantic structure. The structure is quite limited, but nevertheless it is semantic structure. Style sheets convey "look and feel" and nothing else.
Blink and marquee
Creating text that blinks or scrolls across the page like a Las Vegas marquee is not as great an accessibility error as some people would have you believe, but it is still an error. People with attention deficits or cognitive disabilities could become distracted. If scrolling text contains links, people with limited fine motor abilities may not be able to click on the links accurately. Neither blinking text nor marquee text is likely to cause a seizure, as some have claimed, which is a good thing. However, many users find these effects annoying, which is reason enough to not use them.
Advertisements
WebAIM is an initiative of:
