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.