css mit Adi Prinz

Übersicht der Schrift-Eigenschaften

Die folgende Tabelle zeigt die wichtigsten klassischen und modernen Eigenschaften zur Schriftformatierung. Einige Eigenschaften werden im weiteren Verlauf ausführlich behandelt, während selten benötigte Eigenschaften in einer gemeinsamen Übersicht erklärt werden.

font-family

Mit der Eigenschaft font-family legen Sie fest, welche Schriftfamilie für den Text eines Elements verwendet werden soll. font-family wird standardmäßig an die Kindelemente vererbt.

Selektor {
  font-family: Schriftname, Ersatzschrift, generische Schriftfamilie;
}

In der Regel werden mehrere Schriftfamilien angegeben. Die einzelnen Einträge werden durch Kommas voneinander getrennt. Der Browser prüft die Liste von links nach rechts und verwendet die erste verfügbare Schriftart.

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

In diesem Beispiel versucht der Browser zuerst, die Schrift Arial zu verwenden. Ist sie nicht verfügbar, wird Helvetica verwendet. Ist auch diese Schrift nicht verfügbar, wählt der Browser eine installierte serifenlose Schrift aus der generischen Schriftfamilie sans-serif.

Schriftnamen mit Leerzeichen

Besteht der Name einer Schriftart aus mehreren Wörtern, sollte er in Anführungszeichen geschrieben werden.

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

Auch bei ungewöhnlichen Schriftbezeichnungen oder Namen mit Sonderzeichen sind Anführungszeichen sinnvoll.

.logo {
  font-family: "Roboto Condensed", Arial, sans-serif;
}

Generische Schriftfamilien werden dagegen ohne Anführungszeichen geschrieben.

p {
  font-family: sans-serif;
}

Generische Schriftfamilien

Eine generische Schriftfamilie bezeichnet keine konkrete Schriftart. Stattdessen weist sie den Browser an, eine auf dem System verfügbare Schrift aus einer bestimmten Schriftklasse auszuwählen.

Für gewöhnliche Webseiten werden vor allem serif, sans-serif, monospace und system-ui verwendet. Die weiteren generischen Familien sind für speziellere typografische, sprachliche oder technische Anforderungen vorgesehen.

Systemschriftarten verwenden

Mit system-ui kann die Standardschrift der Benutzeroberfläche des jeweiligen Betriebssystems verwendet werden. Das sorgt häufig für eine vertraute Darstellung und benötigt keine zusätzliche Schriftdatei.

body {
  font-family: system-ui, sans-serif;
}

Eine umfangreichere Schriftliste kann zusätzliche Ersatzschriften enthalten:

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

Der Browser verwendet wiederum den ersten Eintrag, der auf dem jeweiligen Gerät verfügbar ist.

Schriftfamilie für die gesamte Webseite festlegen

Da font-family vererbbar ist, wird die grundlegende Schriftfamilie einer Webseite meistens beim body-Element festgelegt.

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

Einzelne Bereiche können anschließend eine andere Schriftfamilie erhalten.

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

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
}

code,
pre {
  font-family: Consolas, "Courier New", monospace;
}

Vererbung

Die Eigenschaft font-family wird standardmäßig vererbt. Ein Kindelement übernimmt daher normalerweise die Schriftfamilie seines Elternelements.

article {
  font-family: Georgia, serif;
}

Absätze, Überschriften und andere Textelemente innerhalb des article-Elements übernehmen diese Schriftfamilie, sofern für sie keine eigene Schriftfamilie festgelegt wurde.

Schriftfamilie ausdrücklich übernehmen

Mit dem Wert inherit kann die Schriftfamilie ausdrücklich vom Elternelement übernommen werden.

button {
  font-family: inherit;
}

Diese Schreibweise wird häufig bei Formularelementen verwendet, da deren Standardschrift je nach Browser von der übrigen Seitenschrift abweichen kann.

Globale Werte

Vollständiges Beispiel

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
}

code,
pre {
  font-family: Consolas, "Courier New", monospace;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

Weiterführende Informationen finden Sie in den folgenden Referenzen:

MDN: font-family
W3C: CSS Fonts Module

@font-face

Mit der CSS-Regel @font-face können eigene Schriftarten in eine Webseite eingebunden werden. Die Schriftdateien werden auf dem Webserver gespeichert und beim Aufruf der Seite automatisch vom Browser geladen. Dadurch können auch Schriftarten verwendet werden, die auf dem Rechner des Besuchers nicht installiert sind.

Heute werden hauptsächlich Schriftdateien im Format .woff2 und .woff verwendet. Das Format .woff2 bietet die beste Komprimierung und sollte bevorzugt eingesetzt werden. Das ältere Format .woff kann zusätzlich als Fallback angegeben werden.

Syntax

@font-face {
  font-family: "MeineSchrift";
  src: url("fonts/meineschrift.woff2") format("woff2"),
       url("fonts/meineschrift.woff") format("woff");
}

Der Eigenschaft font-family wird ein frei wählbarer Name zugewiesen. Dieser Name wird anschließend wie jede andere Schriftfamilie verwendet.

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

Eigenschaften von @font-face

Beispiel

@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-regular.woff2") format("woff2"),
       url("fonts/roboto-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Web Fonts

Web Fonts sind Schriftarten, die beim Aufruf einer Webseite automatisch vom Webserver geladen werden. Dadurch können Schriftarten verwendet werden, die auf dem Computer oder Smartphone des Besuchers nicht installiert sind.

Im Gegensatz zu lokal installierten Schriftarten sieht eine Webseite dadurch auf nahezu allen Geräten gleich aus. Web Fonts gehören deshalb heute zum Standard moderner Webseiten.

Funktionsweise

Beim Laden einer Webseite liest der Browser zunächst die CSS-Dateien ein. Enthält das Stylesheet eine @font-face-Regel oder eine Verknüpfung zu einem Web-Font-Dienst, lädt der Browser zusätzlich die benötigten Schriftdateien herunter und verwendet sie anschließend zur Darstellung der Texte.

Browser
      │
      ▼
HTML-Datei laden
      │
      ▼
CSS-Datei laden
      │
      ▼
Schriftdatei (.woff2)
      │
      ▼
Text mit Web Font darstellen

Vorteile von Web Fonts

Nachteile von Web Fonts

Web Fonts lokal speichern

Aus Gründen des Datenschutzes und der Performance werden Web Fonts heute häufig zusammen mit der Webseite auf dem eigenen Webserver gespeichert. Die Einbindung erfolgt anschließend mit @font-face.

fonts/
├── roboto-regular.woff2
├── roboto-bold.woff2
└── opensans.woff2

Web Fonts über einen Dienst einbinden

Alternativ können Schriftarten über einen Web-Font-Dienst eingebunden werden. Dabei werden die Schriftdateien von einem externen Server geladen.

<link
  rel="preconnect"
  href="https://fonts.googleapis.com">

<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin>

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

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

Lokale oder externe Web Fonts?

font-size

Mit der Eigenschaft font-size legen Sie die Größe einer Schrift fest. Die Schriftgröße beeinflusst nicht nur die Lesbarkeit einer Webseite, sondern auch deren Erscheinungsbild und Benutzerfreundlichkeit. Moderne Webseiten verwenden überwiegend relative Größen, damit sich Texte flexibel an unterschiedliche Bildschirmgrößen und Benutzereinstellungen anpassen können.

Syntax

Selektor {
  font-size: Wert;
}

Mögliche Werte

Absolute Schriftgrößen

Absolute Größen besitzen einen festen Wert. Sie ändern sich nicht durch die Schriftgröße des Elternelements.

h1 {
  font-size: 32px;
}

Relative Schriftgrößen

Relative Größen passen sich an andere Werte an und eignen sich besonders für responsive Webseiten.

body {
    font-size: 1rem;
}

article {
    font-size: 1.2rem;
}

Viewport-Einheiten

Viewport-Einheiten orientieren sich an der Größe des Browserfensters.

Schlüsselwörter

p {
    font-size: large;
}

line-height

Mit der Eigenschaft line-height legen Sie die Höhe einer Textzeile fest. Dadurch wird der Abstand zwischen zwei aufeinanderfolgenden Textzeilen bestimmt. Eine geeignete Zeilenhöhe verbessert die Lesbarkeit eines Textes erheblich.

Die Zeilenhöhe wird häufig zusammen mit der Schriftgröße festgelegt. Während eine zu kleine Zeilenhöhe den Text gedrängt wirken lässt, erschwert eine zu große Zeilenhöhe das Lesen längerer Absätze.

Syntax

Selektor {
  line-height: Wert;
}

Mögliche Werte

Standardwert

p {
  line-height: normal;
}

Der Wert normal wird vom Browser abhängig von der verwendeten Schriftart bestimmt. In der Praxis entspricht er ungefähr dem 1,2-fachen der Schriftgröße.

Zeilenhöhe mit einer Zahl

Am häufigsten wird eine einheitenlose Zahl verwendet. Dieser Wert wird mit der aktuellen Schriftgröße multipliziert und eignet sich besonders für responsive Webseiten.

body {
  font-size: 1rem;
  line-height: 1.5;
}

Zeilenhöhe mit Längenangaben

p {
  line-height: 28px;
}

article {
  line-height: 2rem;
}

Feste Längenangaben werden heute nur noch selten verwendet, da sie weniger flexibel sind als einheitenlose Werte.

Zeilenhöhe mit Prozentwerten

p {
  line-height: 150%;
}

Ein Prozentwert bezieht sich auf die aktuelle Schriftgröße. 150% entspricht somit ungefähr dem Wert 1.5.

Empfohlene Werte

Vererbung

Die Eigenschaft line-height wird an Kindelemente vererbt. Deshalb genügt es häufig, die Zeilenhöhe einmal für das body-Element festzulegen.

body {
  line-height: 1.6;
}

Vollständiges Beispiel

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  line-height: 1.2;
}

article {
  max-width: 700px;
}

font-weight

Mit der Eigenschaft font-weight legen Sie die Stärke einer Schrift fest. Je nach verwendeter Schriftart stehen unterschiedliche Schriftstärken zur Verfügung. Moderne Schriften und Variable Fonts unterstützen häufig zahlreiche Abstufungen zwischen sehr dünnen und besonders kräftigen Schriftstärken.

Syntax

Selektor {
  font-weight: Wert;
}

Mögliche Werte

Schlüsselwörter verwenden

h2 {
  font-weight: bold;
}

p {
  font-weight: normal;
}

Die Schlüsselwörter normal und bold werden am häufigsten verwendet und reichen für viele Webseiten aus.

Numerische Schriftstärken

Numerische Werte bieten eine feinere Abstufung der Schriftstärke. Sie sind besonders bei modernen Schriftarten und Variable Fonts sinnvoll.

h1 {
  font-weight: 800;
}

p {
  font-weight: 300;
}

Relative Schriftstärken

Mit den Werten bolder und lighter wird die Schriftstärke relativ zum Elternelement bestimmt.

article {
  font-weight: 400;
}

strong {
  font-weight: bolder;
}

Welche Schriftstärke tatsächlich verwendet wird, hängt von den verfügbaren Schriftvarianten der verwendeten Schriftart ab.

Variable Fonts

Variable Fonts unterstützen häufig einen durchgehenden Bereich der Schriftstärke. Dadurch können beliebige Werte zwischen 1 und 1000 verwendet werden.

h1 {
  font-weight: 635;
}

Diese Möglichkeit besteht nur bei Schriftarten, die Variable Fonts unterstützen.

Vollständiges Beispiel

body {
  font-family: Arial, sans-serif;
  font-weight: 400;
}

h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

nav a {
  font-weight: 600;
}

small {
  font-weight: 300;
}

font-style

Mit der Eigenschaft font-style legen Sie den Schriftstil fest. Meist wird sie verwendet, um Texte kursiv darzustellen. Ob eine echte Kursivschrift angezeigt wird, hängt davon ab, ob die verwendete Schriftart eine entsprechende Variante besitzt.

Neben normaler und kursiver Schrift unterstützt CSS auch schräg gestellte Schriftarten (oblique). Moderne Variable Fonts ermöglichen dabei sogar die Angabe eines Neigungswinkels.

Syntax

Selektor {
  font-style: Wert;
}

Mögliche Werte

Normale Schrift

p {
  font-style: normal;
}

Der Wert normal ist die Standarddarstellung einer Schrift.

Kursive Schrift

em {
  font-style: italic;
}

Der Browser verwendet möglichst die originale kursive Variante der Schriftfamilie. Diese wurde vom Schriftdesigner speziell gestaltet und unterscheidet sich häufig deutlich von der normalen Schrift.

Schräg gestellte Schrift

blockquote {
  font-style: oblique;
}

Ist keine entsprechende Variante vorhanden, kann der Browser die normale Schrift künstlich schräg stellen.

Schrägstellung mit Winkel

h2 {
  font-style: oblique 15deg;
}

Moderne Variable Fonts erlauben häufig die Angabe eines individuellen Neigungswinkels. Die Unterstützung hängt jedoch von der verwendeten Schriftart und dem Browser ab.

italic oder oblique?

Vollständiges Beispiel

body {
  font-style: normal;
}

em {
  font-style: italic;
}

blockquote {
  font-style: oblique;
}

.logo {
  font-style: oblique 12deg;
}

font-variant

Mit der Eigenschaft font-variant können verschiedene typografische Varianten einer Schrift aktiviert werden. Am häufigsten wird sie verwendet, um Kleinbuchstaben als Kapitälchen (Small Caps) darzustellen.

In CSS 3 wurde font-variant erheblich erweitert. Die Kurzschreibweise fasst heute mehrere einzelne Eigenschaften zusammen, beispielsweise für Ligaturen, Ziffernformen oder ostasiatische Schriftsysteme. Im Alltag wird jedoch meist nur small-caps verwendet.

Syntax

Selektor {
  font-variant: Wert;
}

Mögliche Werte

Normale Darstellung

p {
  font-variant: normal;
}

Mit normal werden keine typografischen Varianten aktiviert.

Kapitälchen verwenden

h2 {
  font-variant: small-caps;
}

Bei small-caps bleiben Großbuchstaben unverändert. Kleinbuchstaben werden als kleinere Großbuchstaben dargestellt. Voraussetzung ist eine passende Schriftart. Andernfalls erzeugt der Browser häufig künstliche Kapitälchen.

Vergleich

Erweiterte Varianten

Die weiteren Werte wie all-small-caps, petite-caps oder titling-caps werden nur von wenigen Schriftarten unterstützt. In der Praxis kommen sie daher deutlich seltener zum Einsatz.

h1 {
  font-variant: all-small-caps;
}

Vollständiges Beispiel

body {
  font-variant: normal;
}

h2 {
  font-variant: small-caps;
}

blockquote {
  font-variant: small-caps;
}

Weitere Schrift-Eigenschaften

Neben den häufig verwendeten Eigenschaften wie font-family, font-size oder font-weight kennt CSS weitere Eigenschaften zur Schriftformatierung. Diese werden hauptsächlich bei modernen OpenType- und Variable Fonts eingesetzt und spielen im Alltag eine eher untergeordnete Rolle. Dennoch lohnt sich ein Überblick, da sie professionelle typografische Möglichkeiten bieten.

Kurze Beispiele

/* Schmale Schrift */
h2 {
    font-stretch: condensed;
}

/* Kerning aktivieren */
body {
    font-kerning: normal;
}

/* Ligaturen verwenden */
p {
    font-feature-settings: "liga";
}

/* Variable Font */
h1 {
    font-variation-settings: "wght" 650;
}

/* Automatische Größenanpassung */
body {
    font-optical-sizing: auto;
}

font (Kurzschreibweise)

Die Eigenschaft font ist die Kurzschreibweise mehrerer Schrift-Eigenschaften. Mit einer einzigen CSS-Anweisung können unter anderem Schriftstil, Schriftstärke, Schriftgröße, Zeilenhöhe und Schriftfamilie festgelegt werden.

Die Kurzschreibweise sorgt für übersichtlicheren CSS-Code und wird häufig verwendet. Dabei müssen jedoch bestimmte Angaben in einer festgelegten Reihenfolge erfolgen.

Syntax

Selektor {
  font:
    [font-style]
    [font-variant]
    [font-weight]
    [font-stretch]
    font-size
    [/line-height]
    font-family;
}

Zusammengefasste Eigenschaften

Einfache Beispiele

body {
    font: 16px Arial, Helvetica, sans-serif;
}

p {
    font: italic 1rem Georgia, serif;
}

h2 {
    font: bold 2rem Arial, sans-serif;
}

Zeilenhöhe angeben

Die Zeilenhöhe wird unmittelbar nach der Schriftgröße angegeben und durch einen Schrägstrich (/) getrennt.

body {
    font: 16px/1.6 Arial, Helvetica, sans-serif;
}

article {
    font: italic bold 18px/1.8 Georgia, serif;
}

Reihenfolge beachten

Die Angaben müssen in einer festgelegten Reihenfolge erfolgen. Die Reihenfolge der optionalen Eigenschaften font-style, font-variant, font-weight und font-stretch kann untereinander variieren. Die Pflichtangaben font-size und font-family stehen jedoch immer am Ende der Anweisung.

font: italic small-caps bold 1rem/1.5 Arial, sans-serif;

Systemschriften verwenden

Mit dem Schlüsselwort system-ui kann die Standardschrift des Betriebssystems verwendet werden.

body {
    font: 1rem/1.5 system-ui, sans-serif;
}

System-Schlüsselwörter

CSS kennt außerdem einige Schlüsselwörter, mit denen die Standardschriftarten des Betriebssystems übernommen werden können. Diese Werte werden heute nur noch selten verwendet.

Vollständiges Beispiel

body {
    font: 16px/1.6 Arial, Helvetica, sans-serif;
}

h1 {
    font: bold 2.5rem Georgia, serif;
}

h2 {
    font: italic 700 1.8rem/1.3 "Times New Roman", serif;
}

code {
    font: 0.95rem Consolas, "Courier New", monospace;
}