text-transform & text-indent

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.

Steckbrief text-transform

Syntax: text-transform: none | uppercase | lowercase | capitalize | full-width
Initialwert: none
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 11
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 03.07.2026

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

11 Werte

text-transform

Wert	Beschreibung	Beispiel
`none`	Keine Transformation (Standard).	text-transform: none
`uppercase`	Alle Buchstaben werden zu Großbuchstaben.	text-transform: uppercase
`lowercase`	Alle Buchstaben werden zu Kleinbuchstaben.	text-transform: lowercase
`capitalize`	Erster Buchstabe jedes Wortes wird großgeschrieben.	text-transform: capitalize
`full-width`	Zeichen werden in voller Breite dargestellt (für CJK-Schriften).	text-transform: full-width
`inherit`	Erbt den Wert explizit vom Elternelement.	text-transform: inherit

text-indent

Wert	Beschreibung	Beispiel
`<length>`	Fester Einzug in einer CSS-Einheit wie px, rem oder em.	text-indent: 2rem
`<percentage>`	Einzug relativ zur Breite des Containers.	text-indent: 5%
`0`	Kein Einzug (Standard).	text-indent: 0
`each-line`	Einzug für jede Zeile nach einem erzwungenen Umbruch, nicht nur für die erste.	text-indent: 2rem each-line
`hanging`	Invertiert den Einzug: Alle Zeilen außer der ersten werden eingerückt.	text-indent: 2rem hanging

Beispiele

4 Beispiele

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

text-transform Werte

.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 mit etwas letter-spacing ist ein beliebtes Pattern für Buttons und Navigationslinks. Der zusätzliche Zeichenabstand verbessert die Lesbarkeit bei Großbuchstaben deutlich.

Uppercase für Buttons und Navigation

.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>

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

Texteinzug mit text-indent

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>

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.

Hängender Einzug für Bibliografien

.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

5 Fehler

01 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.

02 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.

03 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.

04 text-indent auf Inline-Elemente setzen

text-indent wirkt nur auf Block-Elemente. Auf einem <span> hat die Eigenschaft keinen Effekt.

05 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

5 von 5

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.

Chrome

Komplett

each-line und hanging ab Version 146
Firefox

Komplett
Safari

Komplett
Edge

Komplett

each-line und hanging ab Version 146
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

text-transform funktioniert. text-indent wird teilweise ignoriert
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da