web typography study guide

Indent and Space

There are several ways to separate paragraphs. The most common two are to indent the first line of paragraph, and to insert space between paragraphs.

tip   Use only ONE method to serve the purpose of separating paragraphs. Doing both is redundant and creates awkward, irregular chunks of white space in the text block.

Indent

Typically, a first-line indent should be no smaller than the font-size of the text, otherwise it will be hard to see. Indent should be related to the type size and/or line-height, or it could be based on some unit of the typographic grid. 1-2 em is the most common recommendation.

In CSS, use adjacent sibling selectors p + p to indent paragraphs that follow another paragraph instead of every paragraph. Paragraphs that follow a heading or sub-heading should not be indented, nor should there be an indent following elements such as lists and block quotes.

Furthermore, the line space between paragraphs that most browsers insert by default should be removed. Browsers create this line break by adding a top and bottom margin to paragraphs; the bottom margin should be removed from all paragraphs, and the top margin removed from those paragraphs that follow another paragraph.

Space Between Paragraphs

The space between paragraphs should be large enough to be easily noticed, but not so large that the paragraphs seem disconnected. The larger the font-size, the more space needs to be between paragraphs to make a visible difference.

Don’t use double hard returns to create space between paragraphs. Instead use CSS margin properties, which have more precise control over the amount of space. Some designers use the formula of line-height × 0.75 ≈ paragraph spacing for the top and bottom margin sizes.

Other Methods to Separate Paragraphs

There are other methods to separate paragraphs. Among them are outdenting the first line of text, adding a graphic elements between paragraphs or at the beginning of each paragraph, and using a drop-cap or an elevated-cap at the beginning of the article.