CSS Fonts: CSS-Schriften (Fonts) ermöglichen es Ihnen, das Erscheinungsbild und die Lesbarkeit von Text auf einer Webseite zu steuern. Durch das Anpassen von Schriftarten, Größen und Stilen können Sie das Design und die Persönlichkeit einer Webseite stark beeinflussen. In diesem Abschnitt erfahren Sie alles Wissenswerte über die Grundlagen der CSS-Fonts sowie die Optionen für deren Anpassung.
Grundlagen zu CSS-Schriften
CSS bietet verschiedene Eigenschaften zur Steuerung von Schriftarten, die das Erscheinungsbild des Textes beeinflussen. Die wichtigsten Eigenschaften umfassen die Schriftartfamilie (font-family), Schriftgröße (font-size), Schriftschnitt (font-weight) und weitere Stilmerkmale.
1. Die font-family-Eigenschaft
Mit der font-family-Eigenschaft legen Sie die Schriftart(en) für ein Text-Element fest. Es wird empfohlen, mehrere Schriftarten anzugeben, falls die bevorzugte Schrift auf dem System des Nutzers nicht verfügbar ist. Websichere Schriftarten und Google Fonts bieten eine breite Auswahl an Schriften.
p {
font-family: Arial, Helvetica, sans-serif;
}2. Die font-size-Eigenschaft
Die font-size-Eigenschaft legt die Größe des Textes fest. Sie kann in verschiedenen Maßeinheiten angegeben werden, z. B. Pixel (px), Prozent (%), Em (em) oder Rem (rem).
p {
font-size: 16px; /* Standard-Schriftgröße */
}
h1 {
font-size: 2em; /* Skaliert relativ zur Standard-Schriftgröße */
}3. Die font-weight-Eigenschaft
Mit der font-weight-Eigenschaft können Sie die Dicke (Stärke) der Schrift definieren. Standardwerte sind normal, bold, bolder, lighter oder numerische Werte von 100 bis 900.
p {
font-weight: bold;
}
h1 {
font-weight: 600; /* Semibold */
}4. Die font-style-Eigenschaft
Die font-style-Eigenschaft definiert den Stil der Schrift, z. B. normal, italic oder oblique.
em {
font-style: italic;
}5. Die font-variant-Eigenschaft
Mit der font-variant-Eigenschaft lässt sich Text als Kapitälchen anzeigen, was üblicherweise in Titeln oder besonderen Textabschnitten eingesetzt wird.
p.small-caps {
font-variant: small-caps;
}6. Die line-height-Eigenschaft
Die line-height-Eigenschaft legt den Zeilenabstand fest, um den Textabstand und die Lesbarkeit zu verbessern. Sie kann als relativer Wert (1.5) oder in Pixeln (24px) angegeben werden.
p {
line-height: 1.6;
}Die Kurzschreibweise für Schriften
CSS ermöglicht es, mehrere Schrift-Eigenschaften in einer Zeile zu definieren. Die Reihenfolge der Kurzschreibweise ist wie folgt: font-style, font-weight, font-size/line-height, font-family.
p {
font: italic bold 16px/1.5 Arial, sans-serif;
}Häufig verwendete Schriftarten
Einige web-sichere Schriftarten werden häufig verwendet und können ohne zusätzliche Einbindung eingesetzt werden. Zu diesen gehören Arial, Helvetica, Times New Roman und Georgia.
Beispiel für Websichere Schriftarten
body {
font-family: Arial, Helvetica, sans-serif;
}Schriften von externen Quellen einbinden
Webfonts wie Google Fonts erlauben es Ihnen, spezielle Schriftarten einzubinden, die ansonsten nicht auf jedem System verfügbar wären. Die Einbindung erfolgt über ein <link>-Tag im HTML-<head> oder via @import in CSS.
<!-- HTML-Einbindung -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">/* CSS-Verwendung */
body {
font-family: 'Roboto', sans-serif;
}Häufig gestellte Fragen
Wie wähle ich die richtige Schriftgröße für meine Webseite?
Eine empfohlene Schriftgröße für Fließtext beträgt zwischen 16px und 18px. Für Titel sollten größere Schriftgrößen verwendet werden, um Hierarchie und Struktur zu schaffen.
Was ist der Unterschied zwischen em und rem?
em ist relativ zur Schriftgröße des übergeordneten Elements, während rem relativ zur Schriftgröße des Root-Elements ist. rem wird oft bevorzugt, da es konsistente Skalierungen ermöglicht.
Kann ich mehrere font-family-Werte angeben?
Ja, Sie können eine Liste von Schriftarten angeben. Wenn die erste Schriftart nicht verfügbar ist, wird die nächste in der Liste verwendet.
Wie viele Schriften sollte ich auf einer Webseite verwenden?
Es wird empfohlen, nicht mehr als 2–3 verschiedene Schriftarten zu verwenden, um ein klares und einheitliches Erscheinungsbild zu bewahren.
Zusammenfassung
CSS-Schriften bieten vielseitige Möglichkeiten, um das Design und die Lesbarkeit von Texten zu gestalten. Mit der richtigen Kombination aus font-family, font-size, font-weight und weiteren Eigenschaften können Sie ein attraktives und professionelles Text-Layout schaffen.