CSS-Schriftarten
Schriftarten spielen eine grundlegende Rolle im Erscheinungsbild von Webseiten. Die richtige Wahl der Schriftart beeinflusst Lesbarkeit, Design und Benutzererlebnis erheblich.
Grundsyntax: font-family
Mit der Eigenschaft <font-family> geben wir an, welche Schriftart ein Element verwenden soll. Es ist ratsam, immer mehrere Alternativen (Fallbacks) anzugeben, falls die Hauptschriftart nicht verfügbar ist.
Standardschriftarten
Browser enthalten mehrere integrierte Schriftarten, wie Arial, Times New Roman oder Courier New. Diese können leicht eingestellt werden.
Schriftstil und Typografie
In CSS können weitere typografische Einstellungen vorgenommen werden: <font-weight> für die Stärke, <line-height> für den Zeilenabstand und <letter-spacing> für den Zeichenabstand.
Verwendung von Google Fonts
Mit Google Fonts können kostenlose und moderne Schriftarten importiert werden. Dazu verwenden wir das <link>-Element im <head>-Bereich und verweisen dann in CSS darauf.
@font-face und benutzerdefinierte Schriftarten
Eigene Schriftarten können mit der @font-face-Regel hinzugefügt werden. Dabei wird die Schriftdatei (z. B. WOFF2) hochgeladen und in CSS angegeben.
Tipps zur Verwendung von Schriftarten
Eine gute Typografie verbessert die Lesbarkeit und das Benutzererlebnis. Diese Tipps helfen dabei:
- Gib immer Fallback-Schriftarten an.
- Vermeide zu viele verschiedene Schriftarten auf einer Seite.
- Achte auf responsive Typografie, damit Texte sowohl auf Mobilgeräten als auch auf Desktop gut lesbar sind.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
