Text-Formatierung mit CSS

Text ist ein wesentlicher Bestandteil fast jeder Webseite. Mit CSS haben Sie umfangreiche Möglichkeiten, das Erscheinungsbild von Text zu steuern und somit die Lesbarkeit und das visuelle Erlebnis für Ihre Besucher zu verbessern.

Schriftarten (font-family)

Die font-family-Eigenschaft legt fest, welche Schriftart für Text verwendet werden soll. Sie können eine einzelne Schriftart oder eine Liste von Schriftarten angeben (Fallback-System):

p {
  font-family: Arial, Helvetica, sans-serif;
}

In diesem Beispiel versucht der Browser zuerst Arial zu verwenden. Wenn diese nicht verfügbar ist, wird Helvetica ausprobiert, und falls beide nicht vorhanden sind, wird eine generische sans-serif Schriftart verwendet.

Generische Schriftfamilien

CSS definiert fünf generische Schriftfamilien:

serif – Schriften mit Serifen (z.B. Times New Roman)
sans-serif – Schriften ohne Serifen (z.B. Arial)
monospace – Schriften mit fester Zeichenbreite (z.B. Courier)
cursive – Schriften, die handschriftlich wirken
fantasy – Dekorative Schriften

Webfonts

Sie können auch externe Schriftarten einbinden, z.B. über Google Fonts:

<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
    rel="stylesheet"
  />
</head>

body {
  font-family: "Roboto", sans-serif;
}

Schriftgrösse und -gewicht

Schriftgrösse (font-size)

Die Schriftgrösse kann in verschiedenen Einheiten angegeben werden:

h1 {
  font-size: 2rem; /* Relativ zur Schriftgrösse des Root-Elements */
}

p {
  font-size: 16px; /* Absolute Grösse in Pixeln */
}

.small-text {
  font-size: 0.8em; /* Relativ zur Schriftgrösse des Elternelements */
}

.large-text {
  font-size: 150%; /* Prozentualer Wert relativ zum Elternelement */
}

Einheiten für Schriftgrössen

Absolute Einheiten:

px (Pixel) - am häufigsten verwendet
pt (Punkt, 1pt = 1/72 Zoll)

Relative Einheiten (besser für Responsive Design):

em (relativ zur Schriftgrösse des Elternelements)
rem (relativ zur Schriftgrösse des Root-Elements)
% (Prozent, relativ zum Elternelement)
vw (1% der Viewport-Breite)

Schriftgewicht (font-weight)

Das Schriftgewicht bestimmt, wie fett oder dünn der Text erscheint:

h1 {
  font-weight: bold; /* Schlüsselwort: normal oder bold */
}

h2 {
  font-weight: 700; /* Numerische Werte: 100 bis 900 */
}

Die numerischen Werte reichen von 100 (sehr dünn) bis 900 (sehr fett), wobei:

400 entspricht normal
700 entspricht bold

Schriftstil (font-style)

Der Schriftstil kann normal, kursiv oder schräg sein:

.emphasis {
  font-style: italic; /* Kursiv */
}

.normal-text {
  font-style: normal; /* Normal */
}

Textausrichtung und Zeilenabstand

Textausrichtung (text-align)

Die Textausrichtung bestimmt, wie Text innerhalb eines Elements positioniert wird:

h1 {
  text-align: center; /* Zentriert */
}

p.right {
  text-align: right; /* Rechtsbündig */
}

p.left {
  text-align: left; /* Linksbündig */
}

p.justify {
  text-align: justify; /* Blocksatz */
}

Zeilenabstand (line-height)

Der Zeilenabstand bestimmt den Abstand zwischen den Textzeilen:

p {
  line-height: 1.5; /* Als Faktor (1.5-fache der Schriftgrösse) */
}

.tight-text {
  line-height: 1.2; /* Enger Zeilenabstand */
}

.wide-text {
  line-height: 2; /* Weiter Zeilenabstand */
}

.specific-height {
  line-height: 24px; /* Absolute Werte sind auch möglich */
}

Ein guter Zeilenabstand verbessert die Lesbarkeit erheblich. Für Fliesstext wird oft ein Wert zwischen 1.4 und 1.6 empfohlen.

Texteinrückung (text-indent)

Die erste Zeile eines Absatzes kann eingerückt werden:

p {
  text-indent: 2em; /* Rückt die erste Zeile um 2em ein */
}

Textfarbe und Textdekoration

Textfarbe (color)

Die Farbe des Textes wird mit der color-Eigenschaft festgelegt:

h1 {
  color: blue; /* Benannte Farbe */
}

p {
  color: #ff5733; /* Hexadezimal-Wert */
}

.highlight {
  color: rgb(255, 0, 0); /* RGB-Wert */
}

.transparent {
  color: rgba(0, 0, 0, 0.5); /* RGBA mit Transparenz */
}

Textdekoration (text-decoration)

Die Textdekoration ermöglicht Unterstreichungen, Überstreichungen und mehr:

a {
  text-decoration: none; /* Entfernt die standardmässige Unterstreichung von Links */
}

h2 {
  text-decoration: underline; /* Unterstreichung */
}

.strike {
  text-decoration: line-through; /* Durchstreichung */
}

.fancy {
  text-decoration: underline overline #ff3028; /* Kombination mit Farbe */
}

Texttransformation (text-transform)

Die Texttransformation ändert die Gross-/Kleinschreibung:

h1 {
  text-transform: uppercase; /* ALLES GROSSBUCHSTABEN */
}

h2 {
  text-transform: lowercase; /* alles kleinbuchstaben */
}

.title {
  text-transform: capitalize; /* Jedes Wort Beginnt Mit Grossbuchstaben */
}

Textschatten (text-shadow)

Mit der text-shadow-Eigenschaft können Sie Textschatten hinzufügen:

h1 {
  text-shadow: 2px 2px 4px #000000; /* horizontal-offset, vertical-offset, blur, color */
}

.glow {
  text-shadow: 0 0 10px #ffffff; /* Glüheffekt */
}

.multiple-shadows {
  text-shadow:
    2px 2px 4px #000000,
    /* Erster Schatten */ -2px -2px 4px #ff0000; /* Zweiter Schatten */
}

Abstände zwischen Buchstaben und Wörtern

Buchstabenabstand (letter-spacing)

Der Abstand zwischen einzelnen Buchstaben:

h1 {
  letter-spacing: 2px; /* Mehr Platz zwischen Buchstaben */
}

.tight {
  letter-spacing: -1px; /* Weniger Platz zwischen Buchstaben */
}

Wortabstand (word-spacing)

Der Abstand zwischen Wörtern:

p {
  word-spacing: 4px; /* Mehr Platz zwischen Wörtern */
}

Zusammenfassung der Text-Formatierung

Diese praktische Kurzreferenz fasst die wichtigsten Eigenschaften zur Textformatierung zusammen:

p {
  font-family: "Roboto", Arial, sans-serif; /* Schriftart */
  font-size: 16px; /* Schriftgrösse */
  font-weight: 400; /* Schriftgewicht */
  font-style: normal; /* Schriftstil */
  text-align: left; /* Textausrichtung */
  line-height: 1.5; /* Zeilenabstand */
  color: #333333; /* Textfarbe */
  text-decoration: none; /* Textdekoration */
  text-transform: none; /* Texttransformation */
  letter-spacing: normal; /* Buchstabenabstand */
  word-spacing: normal; /* Wortabstand */
}

Übung: Text-Formatierung

Erstellen Sie eine neue HTML-Datei mit folgendem Grundgerüst:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein Blogartikel</title>
    <link rel="stylesheet" href="blog-styles.css" />
  </head>
  <body>
    <article>
      <header>
        <h1 class="title">Die Kunst der Webentwicklung</h1>
        <p class="meta">
          Veröffentlicht am
          <time datetime="2025-04-15">15. April 2025</time> von
          <span class="author">Max Mustermann</span>
        </p>
      </header>

      <section class="intro">
        <p>
          Die Webentwicklung verbindet technisches Know-how mit kreativem
          Design. In diesem Artikel erkunden wir die Grundlagen und
          fortgeschrittenen Techniken.
        </p>
      </section>

      <section class="content">
        <h2>Die Grundlagen</h2>
        <p>
          HTML, CSS und JavaScript bilden das Fundament jeder modernen Website.
          Während <strong>HTML</strong> die Struktur definiert, sorgt
          <strong>CSS</strong> für das visuelle Erscheinungsbild.
        </p>

        <p>
          Ein gutes Verständnis dieser Technologien ist
          <em>unerlässlich</em> für erfolgreiche Webprojekte.
        </p>

        <blockquote>
          <p>
            Design ist nicht nur, wie es aussieht und sich anfühlt. Design ist,
            wie es funktioniert.
          </p>
          <cite>— Steve Jobs</cite>
        </blockquote>

        <h2>Fortgeschrittene Techniken</h2>
        <p>
          Nach den Grundlagen können Sie sich mit Frameworks wie React, Vue oder
          Angular befassen, die die Entwicklung komplexer Anwendungen
          erleichtern.
        </p>

        <p class="highlight">
          Vergessen Sie nicht: Die User Experience steht immer im Mittelpunkt!
        </p>
      </section>

      <footer>
        <p class="tags">
          Tags: <a href="#">HTML</a>, <a href="#">CSS</a>,
          <a href="#">Webdesign</a>
        </p>
      </footer>
    </article>
  </body>
</html>

Erstellen Sie eine neue Datei namens blog-styles.css im gleichen Ordner.
Gestalten Sie den Blogartikel mit folgenden Anforderungen:

Verwenden Sie eine gut lesbare Schriftart für den gesamten Artikel (z.B. eine von Google Fonts)
Gestalten Sie die Überschriften mit einer anderen Schriftart als den Fliesstext
Der Titel sollte auffällig gestaltet sein (grössere Schrift, Farbe nach Wahl)
Der Einleitungstext (intro) sollte sich vom restlichen Text abheben (z.B. durch Schriftgrösse oder -gewicht)
Verwenden Sie einen angenehmen Zeilenabstand für bessere Lesbarkeit
Links sollten eine besondere Gestaltung erhalten (Farbe, evtl. keine Unterstreichung)
Das Zitat (blockquote) sollte besonders hervorgehoben werden
Der hervorgehobene Text (highlight) sollte farblich markiert sein
Die Meta-Informationen (Datum, Autor) sollten dezenter erscheinen
Experimentieren Sie mit Textschatten bei den Überschriften

Erweitern Sie Ihre Gestaltung um eigene kreative Ideen!

Im nächsten Kapitel werden wir uns mit dem CSS Box-Modell beschäftigen und lernen, wie Sie Abstände, Rahmen und das Layout Ihrer Elemente kontrollieren können.