How CSS text-indent Formats Paragraph Typography

The CSS text-indent property controls the horizontal spacing applied to the beginning of text blocks, establishing a traditional typographic hierarchy on the web. This property primarily affects the very first line of a block container, allowing designers to mimic print layouts, create hanging indents, and manage readability without resorting to manual spacing hacks. This guide explains how text-indent functions, the values it accepts, advanced typographic techniques, and best practices for modern web design.

Basic Function and Syntax

The text-indent property applies an offset to the first inline box within a block-level element, typically a <p> tag.

p {
  text-indent: 2em;
}

By default, this indentation only applies to the very first line of text. Subsequent lines wrap normally to the edge of the container’s content box.

Supported Measurement Units

The behavior of text-indent changes depending on the unit assigned to it:

  • Relative Units (em, rem, ch): The em unit is the preferred choice in paragraph typography because it scales proportionally with the element's font-size. An indent of 1.5em to 2em closely reflects standard book typography.
  • Absolute Units (px, pt, cm): Fixed values keep the indentation static regardless of text scaling. While functional, they can look disproportionately large or small if the font size changes on different screen sizes.
  • Percentages (%): Percentages calculate the indent based on the inline width of the containing element. This can cause erratic visual spacing on responsive layouts, where a wide desktop screen produces an excessively deep indent compared to a mobile screen.

Creating Hanging Indents

A hanging indent (or "outdent") occurs when the first line starts flush to the left, while all subsequent lines are indented. This is standard practice in bibliographies, citations, and numbered lists.

To achieve this in CSS, combine a positive left margin or padding with an equal negative text-indent:

.citation {
  padding-left: 2em;
  text-indent: -2em;
}

The padding-left pushes the entire block to the right, and the negative text-indent pulls only the first line back to the original left boundary.

Advanced Keywords: each-line and hanging

Modern CSS implementations support additional keywords alongside the length value:

  • each-line: Standard text-indent only alters the first line after a block boundary. Adding each-line forces the indentation to apply after hard line breaks (such as <br>) within the block.
  • hanging: Inverts the target of the indent. Instead of shifting the first line, it indents every line except the first line.
p {
  text-indent: 1.5em each-line;
}

(Note: Browser support for each-line and hanging varies, so test across target platforms before using them in production.)

Typographic Best Practices

In professional editorial design, paragraph separation is typically handled in one of two ways: space-separated paragraphs (using margin-bottom) or indent-separated paragraphs (using text-indent). Combining both creates visual clutter.

When using indentation to separate paragraphs:

  1. Remove vertical paragraph margins: Set margin-bottom: 0 on paragraphs to avoid mixing separation styles.
  2. Exclude the first paragraph: Typographic convention dictates that the first paragraph of a chapter or section does not need an indent, as the break is already obvious. Use the adjacent sibling combinator to target only subsequent paragraphs:
p {
  margin-bottom: 0;
}

p + p {
  text-indent: 1.5em;
}

This ensures that only paragraphs following another paragraph receive the indent, maintaining clean alignment with headings and page edges.