Text-Styling

Text-Styling beschreibt die visuelle Gestaltung von Text durch Buchstaben- und Wortabstände, Transformation, Varianten und Einzüge. Es geht darum, wie Text aussieht und wirkt, nicht welche Schrift verwendet wird.

text-transform – Gross- und Kleinschreibung
letter-spacing – Buchstabenabstand
word-spacing – Wortabstand
font-variant – Schriftvarianten
text-indent – Texteinzug

text-transform

Mit text-transform wird die Gross- und Kleinschreibung von Text geändert, ohne den HTML-Inhalt zu verändern.

.uppercase {text-transform: uppercase;}

noneKeine Transformation (Standard)
capitalize
Erster Buchstabe jedes Wortes gross
uppercase
Alles in Grossbuchstaben
lowercase
Alles in Kleinbuchstaben

Grossbuchstaben wirken ohne zusätzlichen Abstand oft zu gedrängt. Ein kleiner letter-spacing von 0.05em bis 0.1em verbessert die Lesbarkeit deutlich.

Grossbuchstaben

h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Eine Eyebrow ist eine kurze Zeile über einer Überschrift. Sie wird häufig in Grossbuchstaben mit leicht vergrössertem Buchstabenabstand gestaltet.

Neue Kollektion

Mode und Design aus Zürich

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Häufige Anwendung

uppercase für Buttons oder Labels
capitalize für Überschriften aus Datenbanken
lowercase für E-Mail-Adressen (Normalisierung)

Barrierefreiheit: Grossbuchstaben können die Lesbarkeit und Barrierefreiheit beeinträchtigen. Screenreader lesen Texte in uppercase teilweise buchstabenweise (z. B. „H-E-L-L-O“ statt „Hello“), abhängig von Screenreader und Einstellungen. Deshalb wird diese Schreibweise sparsam eingesetzt, etwa für kurze Überschriften oder Buttons.

letter-spacing

letter-spacing legt den zusätzlichen Abstand zwischen Buchstaben fest. Standardmässig ist dieser Wert 0 (normal).

h1 { letter-spacing: 0.1em;}

normalStandard-Abstand (entspricht 0)
emRelativ zur Schriftgrösse: 0.05em
pxAbsolut: 2px
Negative WerteMöglich: -0.05em (engere Buchstaben)

Positive Werte vergrössern den Abstand zwischen den Buchstaben.

Der schnelle braune Fuchs springt

letter-spacing: 0.2em; /* locker */

Negative Werte können bei manchen Schriften zu unlesbaren Überlappungen führen.

Der schnelle braune Fuchs springt

letter-spacing: -0.05em; /* enger */

Kleine Schriften sind mit einem leichten letter-spacing besser lesbar.

Kleiner Text mit letter-spacing: 0.05em – besser lesbar

font-size: 0.75rem;
letter-spacing: 0.05em;

Alphabetische Übersichten können mit grossen Buchstabenabständen klar gegliedert werden.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

letter-spacing: 1.2em;

Hinweise

Fliesstext: Normaler Absatztext braucht meist keinen zusätzlichen Buchstabenabstand
Enge Layouts: Mehr Buchstabenabstand benötigt mehr Platz
Handschriftliche Schriften: Zusätzliche Abstände können verbundene Buchstaben auseinanderreissen.
Verwende relative Werte wie em, damit der Abstand mit der Schriftgrösse skaliert
Teste die Wirkung mit der verwendeten Schrift und in verschiedenen Schriftgrössen

word-spacing

word-spacing legt den zusätzlichen Abstand zwischen Wörtern fest. Diese Eigenschaft wird deutlich seltener verwendet als letter-spacing.

p {
  word-spacing: 0.2em;
}

normalStandard-Wortabstand (entspricht 0)
emRelativ: 0.5em
pxAbsolut: 10px
Negative WerteMöglich: -0.2em (engere Wörter)

Positive Werte vergrössern den Abstand zwischen den Wörtern.

Der schnelle braune Fuchs springt über den faulen Hund

word-spacing: 0.7em; /* locker */

Negative Werte verringern den Abstand zwischen den Wörtern und können die Lesbarkeit verschlechtern.

Der schnelle braune Fuchs springt über den faulen Hund

word-spacing: -0.2em; /* enger */

Hinweise

Fliesstext: Der normale Wortabstand ist meistens gut lesbar
Responsive Layouts: Veränderte Wortabstände können bei unterschiedlichen Zeilenbreiten problematisch werden
Verwende word-spacing sparsam und nur für eine gezielte typografische Wirkung
Teste die Wirkung mit der verwendeten Schrift und bei verschiedenen Bildschirmgrössen

font-variant – Kapitälchen

Mit font-variant: small-caps werden Kleinbuchstaben als kleinere Grossbuchstaben dargestellt. Unterstützt die verwendete Schrift echte Kapitälchen, nutzt der Browser die dafür gestalteten Zeichen – andernfalls werden sie meist künstlich erzeugt.

normalNormale Darstellung
small-capsKleinbuchstaben werden als verkleinerte Grossbuchstaben dargestellt

The Quick Brown Fox Jumps Over The Lazy Dog

.caps { font-variant: small-caps; }

text-indent

text-indent rückt die erste Zeile eines Textblocks ein – wie in klassischen Büchern.

pxPixel: text-indent: 30px;
emRelativ zur Schriftgrösse: text-indent: 2em;
%Prozent, relativ zur Breite des Containers: text-indent: 10%;
negative WerteDie erste Zeile wird nach links verschoben

Bucheinzug: Die erste Zeile wird nach rechts eingerückt, während die folgenden Zeilen am linken Rand beginnen.

Dies ist ein Absatz mit einem Einzug von 40px. Nur die erste Zeile wird eingerückt, alle weiteren Zeilen beginnen am linken Rand.

text-indent: 40px;

Hängender Einzug: Die erste Zeile beginnt weiter links als die folgenden Zeilen. Diese Darstellung wird häufig für Quellenangaben und Literaturverzeichnisse verwendet.

Müller, Anna: Grundlagen der Typografie. Gestaltung, Lesbarkeit und visuelle Hierarchien im digitalen Raum. Eine Einführung in Schriftwahl, Abstände und typografische Systeme für responsive Websites. Zürich, 2026.

padding-left: 30px;
text-indent: -20px;

Kurz gesagt

text-transform ändert die Gross- und Kleinschreibung, ohne das HTML zu verändern
letter-spacing steuert den Abstand zwischen Buchstaben
word-spacing steuert den Abstand zwischen Wörtern
font-variant ermöglicht typografische Varianten wie Kapitälchen
text-indent steuert den Einzug der ersten Zeile