CSS-Textformatierung

Mit CSS-Textformatierung können wir das Erscheinungsbild von Texten anpassen: Farbe, Größe, Ausrichtung, Zeichenabstand, Verzierungen und Zeilenabstand. Diese Einstellungen sind entscheidend für Lesbarkeit und visuelles Erlebnis.

Grundlegende Textformatierungseigenschaften

Für Texte können wir Farbe, Schriftgröße und Ausrichtung angeben. Diese Eigenschaften bestimmen den ersten visuellen Eindruck des Textes.

Im folgenden Beispiel erhält der Absatz eine dunkelblaue Farbe, eine Schriftgröße von 18px und eine zentrierte Ausrichtung:

Textausrichtung

Mit der Eigenschaft <text-align> können Texte links, rechts, zentriert oder im Blocksatz ausgerichtet werden.

Texttransformation und -verzierung

Mit <text-transform> können wir Text in Großbuchstaben, Kleinbuchstaben oder Satzanfang transformieren. Mit <text-decoration> können wir z. B. unterstreichen oder durchstreichen, und mit <letter-spacing> den Zeichenabstand steuern.

Im folgenden Beispiel ist der Text vollständig in Großbuchstaben, unterstrichen und mit zusätzlichem Zeichenabstand dargestellt:

Zeilenhöhe und Wortabstand

Die Eigenschaft <line-height> stellt den Zeilenabstand ein, während <word-spacing> den Abstand zwischen Wörtern steuert. Diese sind wichtig, um die Lesbarkeit von Texten zu verbessern.

Im folgenden Beispiel wird ein Zeilenabstand von 1,8 und ein Wortabstand von 5px festgelegt:

Textschatten (text-shadow)

Mit <text-shadow> kannst du einem Text einen Schatten hinzufügen, um ihn hervorzuheben oder zu verzieren.

Erweiterte typografische Einstellungen

Mit den Eigenschaften <white-space> und <word-break> kannst du steuern, wann Text umbrechen soll oder wie lange Wörter behandelt werden.

Tipps zur Textformatierung

Diese Tipps helfen, Texte lesbar und ästhetisch zu gestalten:

• Achte immer auf ausreichenden Kontrast zwischen Hintergrund und Text.
• Vermeide zu viele Verzierungen, da diese den Text unruhig machen können.
• Verwende geeignete Zeilenhöhen, damit Texte auf verschiedenen Geräten besser lesbar sind.