Paragraphs are used to contain independent sections of text. By default paragraphs use the $font-family-base, $font-size-base and $line-height-base attributes.

Examples

Small paragraphs decrease the font size. The line-height is also adjusted unless the <small> element is used instead of <p>.

Examples

Micro paragraphs are appropriate for legal copy or references.

Examples

Lead paragraphs are generally used for a lead-in section of text and add emphasis with larger text.

Examples

Usage

Rules

  • Use a paragraph to visually group text and separate it from other content to aid in readability

Constraints

  • Line-length, otherwise known as measure, refers to the number of characters in a line of text. On average a single line of text should be between 45–75 characters. Longer lines inhibit readability by making it more difficult for a user‘s eye to track from the end of a long line to the start of another. Shorter lines can inhibit readability by making the reading feel more choppy. An ideal measure promotes a good reading pace and feels comfortable when tracking from line to line. When possible, use the grid settings to limit the width of content sections (on average 6–8 columns at the medium breakpoints and up).

Principle

  • Paragraphs are used to group text in a way that contains a common theme or thought

Accessibility

  • Aim for a 45–75 character line-length as a general rule to aid readability
  • Average around 20 or so words per sentence. Variety helps readability so some sentences can be longer, and some much shorter.

Class Names

small
Modifier

Use on a <p> element for smaller text. The line-height is also adjusted relative to the font size. Use the <small> element for smaller text size, while matching the parent line-height.

micro
Modifier

Use on a <p> element for micro text like legal copy or references. The line-height is also adjusted relative to the font size.

lead
Modifier

Use on a <p> element for a larger paragraph to stand out or lead a content section. The line-height is also adjusted relative to the font size.