Text-Styling

Text-Styling beschreibt die visuelle Gestaltung von Text durch Farbe, Ausrichtung, Dekoration, Transformation und Schatten-Effekte. Es geht darum, wie Text aussieht und wirkt, nicht welche Schrift verwendet wird.

color

Textfarbe

Die color-Eigenschaft legt die Farbe des Textes fest. Sie gehört zu den am häufigsten verwendeten CSS-Eigenschaften.

p { color: #3498db;}

Alle Farbformate (Hex, RGB, HSL) und ihre Anwendung werden ausführlich erklärt unter: Farben in CSS

Barrierefreiheit: Ausreichender Kontrast zwischen Text und Hintergrund ist wichtig. Der WCAG-Standard empfiehlt ein Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für grossen Text (18pt+ oder 14pt+ fett).

Tools zum Prüfen

WebAIM Contrast Checker oder colorable

text-align

Textausrichtung

Mit text-align wird die horizontale Ausrichtung von Text innerhalb seines Containers bestimmt.

p { text-align: center;}

Werte

  • leftLinksbündig (Standard für LTR-Sprachen)
  • rightRechtsbündig
  • centerZentriert
  • justifyBlocksatz (beide Seiten bündig)
  • startAm Textanfang (bei LTR = links, bei RTL = rechts)
  • endAm Textende (bei LTR = rechts, bei RTL = links)
  • text-align-last Steuert die Ausrichtung der letzten Zeile (z. B. bei Blocksatz)

Hinweis: start und end richten sich nach der Schreibrichtung (direction). In links-nach-rechts-Sprachen (LTR) entspricht start meist left, in rechts-nach-links-Sprachen (RTL) dagegen right.

text-align: left;
Linksbündiger Text. Die Standardausrichtung in den meisten westlichen Sprachen.

text-align: right;
Rechtsbündiger Text. Wird oft für Zahlen in Tabellen verwendet.

text-align: center;
Zentrierter Text. Beliebt für Überschriften und kurze Texte.

text-align: justify;
Blocksatz. Der Text wird so verteilt, dass sowohl die linke als auch die rechte Kante bündig sind. Bei kurzen Zeilen können unschöne Lücken entstehen.

text-align-last steuert die Ausrichtung der letzten Zeile eines mehrzeiligen Textes. Die Eigenschaft wird hauptsächlich in Kombination mit text-align: justify verwendet und ist im modernen Webdesign eher selten.

Hinweis: justify funktioniert am besten mit langen Texten. Bei kurzen Zeilen entstehen oft zu grosse Wortabstände. Die Kombination mit hyphens: auto; kann bessere Ergebnisse liefern.

Wie Texte umbrechen steht unter Text Umbruch in CSS

text-decoration

Unterstreichungen & mehr

text-decoration ist eine Shorthand-Eigenschaft für mehrere Untereigenschaften. Sie ermöglicht Unterstreichungen, Überstreichungen, Durchstreichungen mit voller Kontrolle über Farbe, Stil und Dicke.

a {
  text-decoration: underline wavy red 2px;
}

text-decoration-line

Bestimmt, wo die Linie erscheint.

  • noneKeine Dekoration (Standard)
  • underline
    Unterstreichung
  • overline
    Überstreichung (Linie über dem Text)
  • line-through
    Durchstreichung

Über- und Unterstrichen kombiniert

The quick brown fox jumps over the lazy dog.

text-decoration: underline overline;

Kurzschreibweise

text-decoration ist eine Shorthand-Eigenschaft, die mehrere Werte kombinieren kann:

text-decoration: line | style | color | thickness;

Was kann kombiniert werden:

  • text-decoration-line (underline, overline, line-through)
  • text-decoration-style (solid, wavy, dotted, dashed, double)
  • text-decoration-color (Farbe)
  • text-decoration-thickness (Dicke)
  • text-underline-offset – muss separat geschrieben werden!

Beispiel:

/* line + color + thickness (style optional) */
text-decoration: underline #e74c3c 3px;

Funktioniert NICHT

text-decoration: underline dashed red 2px 5px;

Richtig

text-decoration: underline dotted red 2px;
text-underline-offset: 5px;

Wichtig: text-underline-offset funktioniert NICHT in der Kurzschreibweise:

text-decoration-style

Bestimmt, wie die Linie aussieht.

  • solid
    Durchgezogene Linie (Standard)
  • double
    Doppelte Linie
  • dotted
    Gepunktete Linie
  • dashed
    Gestrichelte Linie
  • wavy
    Wellenförmige Linie

The quick brown fox jumps.

text-decoration: line-through wavy;

text-decoration-color

Bestimmt die Farbe der Linie, unabhängig von der Textfarbe.

Roter Underline, schwarzer Text 

text-decoration: underline red;

Wellige rote Unterstreichung 

text-decoration: underline wavy red;

text-decoration-thickness

Bestimmt die Dicke der Linie.

Hauchdünne Linie

text-decoration: underline solid 1px;

Mittlere Linie

text-decoration: underline solid 3px;

Dicke rote Linie

text-decoration: underline red 5px;

text-underline-offset

Bestimmt den Abstand zwischen Text und Unterstreichung.

Kleiner Abstand 

text-decoration: underline;
text-underline-offset: 2px;

Mittlerer Abstand 

text-decoration: underline wavy red;
text-underline-offset: 5px;

Grosser Abstand, dicke pink Linie 

text-decoration: underline pink 3px;
text-underline-offset: 10px;

Praxis-Tipp für Links: Moderne Websites verwenden oft text-underline-offset, damit die Unterstreichung nicht zu nah am Text klebt.

a {
  text-decoration: underline 2px;
  text-underline-offset: 3px;
}

text-decoration-skip-ink verhindert, dass Unterstreichungen Buchstabenformen wie g oder y schneiden.

text-transform

Gross-/Kleinschreibung

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

.uppercase {text-transform: uppercase;}

Werte

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

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.

Häufige Anwendung:

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

text-shadow

Schatten-Effekte

text-shadow fügt Schatten zu Text hinzu und ermöglicht Effekte wie Glühen, 3D-Text, bessere Lesbarkeit auf Bildern und mehr.

Syntax

text-shadow: offset-x | offset-y | blur-radius | color

Hinweis: offset-x und offset-y sind Pflichtwerte, blur-radius und color sind optional.

Die vier Werte

  • offset-xHorizontaler Versatz (+ = rechts, - = links) – Pflicht
  • offset-yVertikaler Versatz (+ = unten, - = oben) – Pflicht
  • blur-radiusUnschärfe (0 = scharf, höher = weicher) – Optional
  • colorSchattenfarbe – Optional
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Kombinationen

  • text-shadow: 2px 2px ... → Schatten rechts-unten (klassisch)
  • text-shadow: -2px -2px ... → Schatten links-oben
  • text-shadow: 0 0 ... → Schatten zentriert (Glow-Effekt)

Beispiele

Scharfer Schatten

text-shadow: 2px 2px 0 red;

Leicht verschwommen

text-shadow: 2px 2px 5px red;

Stark verschwommen

text-shadow: 2px 2px 10px red;

Glow-Effekt

text-shadow: 0 0 20px red;

Klassischer Schatten

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

3D-EFFEKT

text-shadow: 
  1px 1px 0 #c0392b,
  2px 2px 0 #c0392b,
  3px 3px 0 #c0392b,
  4px 4px 0 #c0392b,
  5px 5px 0 #c0392b,
  6px 6px 10px rgba(0,0,0,0.4);

NEON GLOW

text-shadow: 
  0 0 10px #00f3ff,
  0 0 20px #00f3ff,
  0 0 30px #00f3ff,
  0 0 40px #00d4ff,
  0 0 70px #00d4ff,
  0 0 80px #00d4ff;

REGENBOGEN

text-shadow: 
  0 0 5px #ff0000,
  0 0 10px #ff7f00,
  0 0 15px #ffff00,
  0 0 20px #00ff00,
  0 0 25px #0000ff,
  0 0 30px #8b00ff;

Performance-Tipp: Viele text-shadow-Effekte können die Performance beeinträchtigen, besonders bei langen Texten. Komplexe Schatten werden daher eher für Überschriften und wichtige Elemente verwendet, nicht für Fliesstext.

-webkit-text-stroke

Konturierte Buchstaben

-webkit-text-stroke zeichnet eine Kontur um die Buchstaben – vergleichbar mit der Trennung von Füllung (Fill) und Kontur (Stroke) in Layoutprogrammen. Trotz des Präfixes unterstützen alle gängigen Browser die Eigenschaft. Eine standardisierte Version ohne Präfix gibt es bisher nicht.

Syntax

-webkit-text-stroke: width color;

Kurzschreibweise für -webkit-text-stroke-width und -webkit-text-stroke-color, die auch einzeln gesetzt werden können.

Beispiele

Nur Kontur

-webkit-text-stroke: 2px indigo;
-webkit-text-fill-color: transparent;

Kontur + Füllung

-webkit-text-stroke: 2px hotpink;

Hinweis: -webkit-text-fill-color übernimmt die Füllung anstelle von color – und vererbt sich an Kind-Elemente. Wird die Eigenschaft weiter oben im DOM gesetzt, kann sie z.B. einen Hover-Farbwechsel auf einem verschachtelten Link überschreiben.

Achtung: Die Kontur wächst zentriert auf der Buchstabenkante – anders als in Illustrator/InDesign, wo Konturen meist nach aussen erweitert werden. Bei dicken Strokes können enge Formen (z.B. runde Buchstaben) innen zulaufen.

text-indent

Erste Zeile einrücken

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

p {
  text-indent: 2em;
}

Werte

  • pxPixel: text-indent: 30px;
  • emRelativ zur Schriftgrösse: text-indent: 2em;
  • %Prozent (relativ zur Container-Breite): text-indent: 10%;
  • negative WerteHängender Einzug: text-indent: -20px;

Beispiel

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

text-indent: 40px;

Praxis-Tipp: Hängende Einzüge sind geeignet für:

  • Bibliographien und Quellenangaben
  • Benutzerdefinierte Listen
  • Zitate mit Attributionen

Für Listen oder komplexe Layouts sind oft padding oder list-style-position besser geeignet als text-indent.

Kurz gesagt

  • color legt die Textfarbe fest (Named, Hex, RGB, RGBA, HSL)
  • text-align steuert die horizontale Ausrichtung (left, right, center, justify)
  • text-decoration ermöglicht Unterstreichungen mit voller Kontrolle über Stil, Farbe, Dicke und Offset
  • text-transform ändert Gross-/Kleinschreibung ohne HTML zu ändern
  • text-shadow fügt Schatten hinzu – für 3D, Glow, Lesbarkeit und mehr
  • -webkit-text-stroke zeichnet eine Kontur um die Buchstaben – trotz Präfix in allen gängigen Browsern nutzbar
  • text-indent rückt die erste Zeile ein (auch negativ für hängende Einzüge)
  • Barrierefreiheit wird durch ausreichenden Kontrast und sparsamen Einsatz von GROSSBUCHSTABEN gewährleistet