text-indent

Sets the first-line indentation of a text block. Use ti2rem for paragraph indentation and neg-ti for hanging indentation.

Class List

Pattern: ti{N}px, ti{N}rem — use neg-ti prefix for negative values.

Class	CSS	Description
`ti16px`	text-indent: 16px	16px indentation
`ti2rem`	text-indent: 2rem	2rem (20px) indentation
`ti3-2rem`	text-indent: 3.2rem	3.2rem (32px) indentation
`ti4rem`	text-indent: 4rem	4rem (40px) indentation
`neg-ti2rem`	text-indent: -2rem	-2rem outdent (hanging indent)

Visual Comparison

See how the first-line indentation changes.

default value (0) —

Good typography creates comfortable reading. Indenting the first line clarifies paragraph separation and naturally guides the eye. Especially effective for long text.

16px — ti16px

Good typography creates comfortable reading. Indenting the first line clarifies paragraph separation and naturally guides the eye. Especially effective for long text.

2rem (20px) — ti2rem

Good typography creates comfortable reading. Indenting the first line clarifies paragraph separation and naturally guides the eye. Especially effective for long text.

4rem (40px) — ti4rem

Good typography creates comfortable reading. Indenting the first line clarifies paragraph separation and naturally guides the eye. Especially effective for long text.

-2rem (hanging indent) — neg-ti2rem pl2rem

Good typography creates comfortable reading. Indenting the first line clarifies paragraph separation and naturally guides the eye. Especially effective for long text.

Class Details

`ti16px`text-indent: 16px

Indents the first line by 16px. For small indentation.

<!-- Small indent -->
<p class="ti16px fs16px cFAFAFA lh1-7">
  The first line of this paragraph is indented by 16px.
  From the second line onward, no indentation is applied.
</p>

`ti2rem`text-indent: 2rem

Indents the first line by 2rem (20px). The most common paragraph indentation.

<!-- Standard paragraph indent -->
<p class="ti2rem fs16px cFAFAFA lh1-7">
  The first line of this paragraph is indented by 2rem (20px).
  This is the most commonly used indent value in paragraphs.
</p>

`ti4rem`text-indent: 4rem

Indents the first line by 4rem (40px). For wider indentation.

<!-- Wide indent -->
<p class="ti4rem fs16px cFAFAFA lh1-7">
  This paragraph has a wide indent of 4rem (40px).
  Can be used for visual emphasis or quote blocks.
</p>

`neg-ti2rem`text-indent: -2rem

Outdents the first line by -2rem (hanging indent). Used with pl2rem for bibliographies, glossaries, etc.

<!-- Hanging indent (bibliography style) -->
<p class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7">
  Kim, J. (2024). "Efficiency Analysis of Atomic CSS Patterns."
  Web Development Journal, 15(3), 45-62.
</p>

<!-- Glossary style -->
<dl>
  <dd class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7 mb16px">
    <strong>Atomic CSS</strong> — A utility-first CSS methodology that maps
    one CSS property to one class.
  </dd>
</dl>

Tips & Notes

Only affects the first line

text-indent only applies to the first line of a block element. To indent all lines, use pl2rem (padding-left).

Hanging indent pattern

The neg-ti2rem pl2rem combination creates a hanging indent where only the first line protrudes to the left.

padding margin text-align