Home / Snippets / Typography /

First-line indent

Traditional book-style paragraph indentation using text-indent and the adjacent sibling combinator.

Book-style indentation

The first paragraph needs no indent — the reader already knows a new section is beginning. Good typography signals structure without redundancy.

Subsequent paragraphs use a 1.5em indent on the first line. This is the traditional print convention: indent or space between paragraphs, never both.

The indent alone is enough. Combined with a tight line-height and no bottom margin, the prose flows as a continuous block — the way books have been typeset for centuries.

Widely Supported
typographyno-js

Quick implementation

.prose p {
  margin: 0;
}

/* Indent every paragraph that follows another */
.prose p + p {
  text-indent: 1.5em;
}

/* First paragraph: no indent */
.prose p:first-of-type {
  text-indent: 0;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS long-form reading experience.

Goal: Traditional book-style paragraph indentation using text-indent — no JavaScript, no paragraph spacing.

Technical constraints:
- Use the adjacent sibling combinator (p + p) to apply text-indent: 1.5em to all paragraphs except the first.
- Set p:first-of-type { text-indent: 0 } to suppress the indent on the opening paragraph.
- Remove all paragraph margins (margin: 0) — indent is the sole paragraph separator.
- Use em units for text-indent so it scales proportionally with font-size.
- Do not use :first-child alone — it fails when the first child is a heading or blockquote.

Framework variant (pick one):
A) Plain CSS scoped to a .prose wrapper class.
B) CSS Nesting (level 3 spec) — nest p + p and p:first-of-type inside .prose.

Edge cases to handle:
- A paragraph following a blockquote should also be flush (no indent) — use blockquote + p { text-indent: 0 }.
- A paragraph following a heading should be flush — use h1 + p, h2 + p, h3 + p { text-indent: 0 }.
- text-indent only indents the first line — it is not the same as padding-left on the whole paragraph.

Return CSS only.

Why this matters in 2026

Web typography has historically defaulted to margin-separated paragraphs because that's how browser defaults work. But for long-form reading — fiction, essays, longread articles — the traditional book convention of first-line indentation with no paragraph spacing creates a tighter, more immersive reading experience. CSS makes this trivially easy with two rules and the adjacent sibling combinator.

The logic

The adjacent sibling combinator p + p selects any p that immediately follows another p. This means the first paragraph is naturally excluded — it has no preceding sibling p. The explicit p:first-of-type { text-indent: 0 } rule is belt-and-suspenders: it handles edge cases where the first paragraph may technically follow another element that resets the combinator chain.

Setting margin: 0 on all paragraphs is intentional and essential. The classic typographic rule is indent or space — never both. Combining first-line indent with inter-paragraph spacing looks cluttered and signals structural ambiguity.

Accessibility & performance

First-line indentation is a well-established reading convention with no negative accessibility impact — screen readers are unaffected by text-indent. Users with dyslexia may prefer the spaced-paragraph style; for those cases, the prefers-reduced-motion pattern can be adapted to detect a user stylesheet preference. The CSS itself has no performance cost — text-indent is a simple text layout property with no compositing or paint overhead.