Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Textformatierungstechniken für bessere Lesbarkeit | Textgestaltung in CSS
Learn
Kurse
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS-Grundlagen

bookTextformatierungstechniken für bessere Lesbarkeit

line-height

line-height steuert den vertikalen Abstand zwischen Textzeilen. Browser legen einen Standardwert basierend auf der Schriftart fest, aber dieser kann mit verschiedenen Formaten angepasst werden:

line-height: multiplier | value in px | value in em | percent
  • multiplier einheitenloser Wert wie 1.5 multipliziert die font-size;
  • value in px spezifische Höhe, z. B. 24px;
  • value in em relativer Wert, ähnlich wie Multiplikator (1.4em = font-size × 1.4);
  • percent funktioniert wie Multiplikator (120% = font-size × 1.2).
index.html

index.html

styles.css

styles.css

copy

Ausgabe

letter-spacing

letter-spacing legt den horizontalen Abstand zwischen Zeichen fest.

letter-spacing: normal | value in px | value in em
  • normal: Standardabstand;
  • value in px: fester zusätzlicher Abstand;
  • value in em: Abstand relativ zur font-size.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

word-spacing

Der word-spacing-Eigenschaft passt den Abstand zwischen Wörtern an.

word-spacing: value | inherit | normal
  • value: benutzerdefinierter Abstand;
  • inherit: übernimmt den Abstand des Elternelements;
  • normal: Standardabstand.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

text-shadow

text-shadow fügt Text Schatten hinzu. Es akzeptiert vier Werte:

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set: horizontale Verschiebung;
  • Y set: vertikale Verschiebung;
  • blur radius: Weichheit des Schattens (0 = scharf);
  • color: jede gültige Farbe, standardmäßig die aktuelle Textfarbe.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

Note
Hinweis

Bei der Textformatierung gibt es keine festen Regeln, die vorschreiben, welche Werte in bestimmten Situationen verwendet werden müssen. Die Auswahl der Textformatierungseigenschaften und -werte hängt von den individuellen Anforderungen jedes Projekts und der gestalterischen Vision ab.

1. Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der dem Text einen Schatten hinzufügt?

2. Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?

question mark

Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der dem Text einen Schatten hinzufügt?

Select the correct answer

question mark

Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain the difference between line-height, letter-spacing, and word-spacing?

How do I choose the right values for these text properties in my design?

Can you show more creative uses of text-shadow?

bookTextformatierungstechniken für bessere Lesbarkeit

Swipe um das Menü anzuzeigen

line-height

line-height steuert den vertikalen Abstand zwischen Textzeilen. Browser legen einen Standardwert basierend auf der Schriftart fest, aber dieser kann mit verschiedenen Formaten angepasst werden:

line-height: multiplier | value in px | value in em | percent
  • multiplier einheitenloser Wert wie 1.5 multipliziert die font-size;
  • value in px spezifische Höhe, z. B. 24px;
  • value in em relativer Wert, ähnlich wie Multiplikator (1.4em = font-size × 1.4);
  • percent funktioniert wie Multiplikator (120% = font-size × 1.2).
index.html

index.html

styles.css

styles.css

copy

Ausgabe

letter-spacing

letter-spacing legt den horizontalen Abstand zwischen Zeichen fest.

letter-spacing: normal | value in px | value in em
  • normal: Standardabstand;
  • value in px: fester zusätzlicher Abstand;
  • value in em: Abstand relativ zur font-size.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

word-spacing

Der word-spacing-Eigenschaft passt den Abstand zwischen Wörtern an.

word-spacing: value | inherit | normal
  • value: benutzerdefinierter Abstand;
  • inherit: übernimmt den Abstand des Elternelements;
  • normal: Standardabstand.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

text-shadow

text-shadow fügt Text Schatten hinzu. Es akzeptiert vier Werte:

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set: horizontale Verschiebung;
  • Y set: vertikale Verschiebung;
  • blur radius: Weichheit des Schattens (0 = scharf);
  • color: jede gültige Farbe, standardmäßig die aktuelle Textfarbe.
index.html

index.html

styles.css

styles.css

copy

Ausgabe

Note
Hinweis

Bei der Textformatierung gibt es keine festen Regeln, die vorschreiben, welche Werte in bestimmten Situationen verwendet werden müssen. Die Auswahl der Textformatierungseigenschaften und -werte hängt von den individuellen Anforderungen jedes Projekts und der gestalterischen Vision ab.

1. Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der dem Text einen Schatten hinzufügt?

2. Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?

question mark

Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der dem Text einen Schatten hinzufügt?

Select the correct answer

question mark

Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2
some-alt