text-transform & text-indent

Zuletzt aktualisiert am 3. Juli 2026

text-transform ändert die Groß- und Kleinschreibung von Text rein visuell, ohne den Quelltext zu verändern. Mit uppercase werden alle Buchstaben zu Großbuchstaben, mit lowercase zu Kleinbuchstaben und mit capitalize wird der erste Buchstabe jedes Wortes großgeschrieben. text-indent ergänzt die Textformatierung um Einzüge: Die erste Zeile eines Blocks kann eingerückt oder sogar negativ verschoben werden, um typografische Effekte wie hängende Einzüge zu erzeugen.

Grundlagen

text-transform: uppercase ist besonders nützlich für Buttons, Navigation und Überschriften. Der Vorteil gegenüber Großbuchstaben direkt im HTML: Screenreader lesen den Text normal vor und du kannst die Darstellung jederzeit per CSS ändern, ohne den Quelltext anzufassen. Im HTML bleibt der Text in normaler Schreibweise, was auch für die Barrierefreiheit besser ist.

capitalize schreibt den ersten Buchstaben jedes Wortes groß. Aber Vorsicht: Es erkennt nur Wortgrenzen anhand von Leerzeichen und Satzzeichen. Ein Wort wie “iPhone” wird zu “IPhone”, weil der Algorithmus den ersten Buchstaben großschreibt, unabhängig davon ob er bereits groß ist. Für Eigennamen oder spezielle Schreibweisen ist capitalize daher ungeeignet.

text-indent rückt die erste Zeile eines Block-Elements ein. In der klassischen Typografie wird das für Absätze in Büchern verwendet. Mit negativen Werten erzeugst du hängende Einzüge, bei denen die erste Zeile links heraussteht und die Folgezeilen eingerückt sind. In Kombination mit padding-left entsteht ein sauberer Aufzählungseffekt.

Syntax & Werte

text-transform

text-indent

Beispiele

Text-Transformationen im Vergleich

Die drei wichtigsten Werte von text-transform im direkten Vergleich.

.none      { text-transform: none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.cap       { text-transform: capitalize; }

<div class="transform-demo">
<div class="t-none"><div class="label">none (Original)</div>Programmieren mit Mario</div>
<div class="t-upper"><div class="label">uppercase</div>Programmieren mit Mario</div>
<div class="t-lower"><div class="label">lowercase</div>Programmieren mit Mario</div>
<div class="t-cap"><div class="label">capitalize</div>willkommen auf der website</div>
</div>

Uppercase für Buttons und Navigation

uppercase mit etwas letter-spacing ist ein beliebtes Pattern für Buttons und Navigationslinks. Der zusätzliche Zeichenabstand verbessert die Lesbarkeit bei Großbuchstaben deutlich.

.btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

<div class="btn-demo">
<a href="#" class="btn btn-primary">Jetzt starten</a>
<a href="#" class="btn btn-outline">Mehr erfahren</a>
</div>
<div class="nav-demo" style="margin-top: 12px">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Kurse</a>
<a href="#">Kontakt</a>
</div>

Texteinzug für Absätze

text-indent rückt die erste Zeile eines Absatzes ein. Das ist ein klassisches typografisches Stilmittel aus dem Buchdruck.

article p {
  text-indent: 2rem;
}

/* Erster Absatz ohne Einzug */
article p:first-of-type {
  text-indent: 0;
}

<div class="indent-demo">
<div class="label">text-indent: 2rem auf jedem Absatz</div>
<p>Der erste Absatz hat einen Einzug von 2rem. Das ist ein klassisches typografisches Stilmittel, das besonders in Büchern und Zeitschriften verwendet wird.</p>
<p>Auch der zweite Absatz ist eingerückt. In der Web-Typografie wird text-indent seltener verwendet, weil Absätze meist durch Margin getrennt werden.</p>
</div>

Hängender Einzug

Ein negativer text-indent in Kombination mit padding-left erzeugt einen hängenden Einzug. Die erste Zeile steht links heraus, die Folgezeilen sind eingerückt. Das ist nützlich für Bibliografien, Glossare oder Definitionslisten.

.bibliography p {
  text-indent: -2rem;
  padding-left: 2rem;
}

<div class="hanging-demo">
<div class="label">Hängender Einzug (text-indent: -30px + padding-left: 44px)</div>
<p>Beispielautorin, A.: Musterbuch für Webdesign, Kapitel 1. Ein Platzhaltereintrag mit genug Text, damit die Zeile umbricht und der Einzug sichtbar wird.</p>
<p>Mustermann, B.: Musterbuch für Webdesign, Kapitel 2. Noch ein Platzhaltereintrag, der zeigt, wie die Folgezeilen unter der ersten Zeile eingerückt bleiben.</p>
</div>

Barrierefreiheit

Verwende text-transform: uppercase statt Großbuchstaben im HTML. Screenreader können Text in Großbuchstaben als Abkürzung interpretieren und jeden Buchstaben einzeln vorlesen: “B-L-O-G” statt “Blog”. Mit text-transform: uppercase bleibt der Quelltext in normaler Schreibweise und wird korrekt vorgelesen. Die visuelle Darstellung in Großbuchstaben erfolgt rein durch CSS.

text-transform hat keinen Einfluss auf den kopierten Text. Wenn ein Nutzer Text kopiert, der mit uppercase dargestellt wird, erhält die Zwischenablage den Originaltext in normaler Schreibweise. Das ist ein weiterer Vorteil gegenüber Großbuchstaben direkt im HTML.

Bei text-indent mit großen negativen Werten kann Text außerhalb des sichtbaren Bereichs rutschen. Das wird manchmal als Image-Replacement-Technik verwendet (text-indent: -9999px). Screenreader lesen diesen Text trotzdem vor, aber es gibt bessere Methoden für barrierefreies Verstecken wie clip-rect oder die .sr-only-Klasse.

Häufige Fehler

• Großbuchstaben im HTML statt text-transform: <h2>MEIN TITEL</h2> statt text-transform: uppercase. Screenreader können Großbuchstaben als Abkürzung interpretieren. CSS-Transformation ist die bessere Wahl.
• capitalize für Eigennamen verwenden: text-transform: capitalize kennt keine Grammatik. “iPhone” wird zu “IPhone”, “von der Leyen” zu “Von Der Leyen”. Für Eigennamen ist die korrekte Schreibweise im HTML notwendig.
• uppercase ohne letter-spacing: Großbuchstaben ohne zusätzlichen Zeichenabstand wirken gedrängt und sind schwer lesbar. Füge immer letter-spacing: 0.05em bis 0.1em hinzu.
• text-indent auf Inline-Elemente setzen: text-indent wirkt nur auf Block-Elemente. Auf einem <span> hat die Eigenschaft keinen Effekt.
• text-indent: -9999px als Versteck-Technik: Diese Methode ist veraltet und kann Performance-Probleme verursachen, weil der Browser eine sehr große unsichtbare Box rendert. Verwende stattdessen moderne Methoden.

Browser-Kompatibilität

text-transform und text-indent werden von allen Browsern vollständig unterstützt. Auch die Keywords each-line und hanging für text-indent funktionieren in allen modernen Browsern, in Chrome und Edge allerdings erst ab Version 146.

Email-Kompatibilität

text-transform funktioniert in allen wichtigen Email-Clients. text-indent wird teilweise unterstützt, ist aber in Emails selten nötig.

Verwandte Eigenschaften