Text und Schriften

Wähle eine Schrift mit font-family und passe dann Größe, Stärke und Zeilenabstand an, damit der Text angenehm zu lesen ist.

9 Min. · 3 Fragen

Eine Schrift ist die Gestaltung der Buchstaben: Arial, Georgia oder Times New Roman sind Schriften. In CSS wählt die Eigenschaft font-family die Schrift eines Textstücks. Du gibst ihr eine Liste von Schriften, durch Kommas getrennt: Der Browser probiert die erste; ist sie auf dem Gerät des Besuchers nicht installiert, geht er zur nächsten über, und so weiter. Es ist ein Plan A, ein Plan B, ein Plan C.

body {
  font-family: Georgia, "Times New Roman", serif;
}

Das letzte Wort in der Liste ist eine generische Familie: serif bedeutet Schriften mit Serifen (die kleinen Füßchen an den Enden der Buchstaben, wie in einer gedruckten Zeitung), sans-serif bedeutet Schriften ohne Serifen (moderner wirkend, wie Arial), und monospace bedeutet Schriften mit fester Breite, bei denen jeder Buchstabe gleich breit ist (ideal für Code). Beachte die Anführungszeichen um "Times New Roman": Sie sind immer dann nötig, wenn ein Schriftname Leerzeichen enthält.

Die Textgröße wird mit font-size festgelegt. Pixel kennst du schon (16px ist die Standardgröße der Browser). Es gibt auch die Einheit rem: 1rem entspricht der Grundgröße der Seite, also ist 1.5rem das Anderthalbfache dieser Größe. Die Stärke, also wie dick die Striche der Buchstaben sind, wird mit font-weight festgelegt: normal für normalen Text, bold für fett, oder eine Zahl von 100 (sehr dünn) bis 900 (sehr dick), wobei 400 dem normal und 700 dem bold entspricht.

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

Eine letzte Einstellung, oft übersehen und doch entscheidend für angenehmes Lesen: line-height, die Zeilenhöhe. Sie steuert den senkrechten Abstand zwischen den Zeilen eines Absatzes. Zu eng, und die Zeilen wirken erdrückend; zu weit, und das Auge verliert sich. Bewährte Praxis ist ein Wert ohne Einheit, der die Textgröße vervielfacht: line-height: 1.5; macht jede Zeile anderthalbmal so hoch wie die Schriftgröße.

p {
  font-size: 16px;
  line-height: 1.5;
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Warum gibst du font-family mehrere Schriften, durch Kommas getrennt?
   • Um Schriften innerhalb eines einzigen Wortes zu mischen
   • Damit der Browser die nächste probiert, wenn eine Schrift fehlt
   • Weil die CSS-Syntax mindestens drei Werte verlangt
2. Welcher font-weight-Wert entspricht dem klassischen Fett (bold)?
   • 100
   • 400
   • 700
   • 900
3. Wie hoch ist jede Zeile bei font-size: 20px und line-height: 1.5?
   • 20 Pixel
   • 25 Pixel
   • 30 Pixel
   • 35 Pixel