Home / Snippets / Typography /
First-line indent
Traditional book-style paragraph indentation using text-indent and the adjacent sibling combinator.
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.
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.