White space
The vertical space in a text block is called leading, and it is the distance from one baseline of text to the next. Leading strongly affects the legibility of text blocks: too much leading makes it hard for the eye to locate the start of the next line, whereas too little leading confuses the lines of type, because the ascenders of one line get jumbled with the descenders of the line above. In plain HTML it is not possible to implement true leading, but CSS offers leading control (referred to as "line-height" in CSS terminology). In print one general rule is to set the leading of text blocks at about 2 points above the size of the type. For example, 12-point type could be set with 14 points of leading. We suggest generous leading to compensate for longer line lengths and the lower resolution of the computer screen, for example, 12-point type with 14 to 16 points of leading.
Indenting paragraphs
There are two major schools of thought on denoting paragraphs. The classic typographic method uses indents to signal the beginning of a new paragraph (as we have in this book). However, many technical, reference, and trade publications now use a blank line of white space to separate paragraphs. Indented paragraphs work especially well for longer blocks of prose, where the indents signal new paragraphs with minimal disruption to the flow of text. Blank line spacing between paragraphs, in contrast, makes a page easy to scan and provides extra white space for visual relief. Either approach is valid as long as the paragraph style is implemented consistently throughout the site.
To indent paragraphs without using CSS, you can insert several non-breaking space characters ( ) at the start of each paragraph. You can also use a transparent single-pixel GIF graphic as a spacer and adjust its horizontal spacing. If you are using CSS you can set the exact spacing for the indentation using the "text-indent" property of paragraphs.
To indent paragraphs without using CSS, ...
<IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" HSPACE="8">To indent paragraphs without using CSS, ...
<P STYLE="text-indent: 8pt">To indent paragraphs without using CSS, ...
To separate paragraphs with blank lines you could put a paragraph tag (<P>) at the end of each paragraph. The paragraph tag adds a full blank line between paragraphs. To adjust the amount to an amount less or more than a full blank line you can use the CSS "margin" property, but beware of spacing inconsistencies between browsers. You can also use the line break tag (<BR>) followed by a transparent single-pixel GIF graphic as a spacer to control the space between paragraphs. As always when using a spacer graphic, be sure to include empty ALT text to hide the image from assistive technologies and text-only browsers:
<BR>
<IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" VSPACE="2">
|
Print this page
PREVIOUS: Line length