CSS Font – Kurz für die Schrift

Mar 2026

CSS font ist die Kurzschrift für alle Eigenschaften der Schrift in einer CSS-Regel: line-height, font-family, font-size, font-weight und font-variant.

CSS font – Schriftart, -größe und -stil

CSS font ist eine Kurzschrift, die alle sechs Eigenschaften der verwendeten Schrift in einer Anweisung abdeckt. Die Kurzschrift gestaltet die CSS-Datei übersichtlicher und schafft ein Höchstmaß an Konsistenz für die Schrift der Webseite.

font: 
	<font-style>
	<font-variant>
	<font-weight>
	<font-stretch>
	<font-size>
	<line-height>
	<font-family>

Dabei sind nur font-size und font-family erforderlich, alle anderen Merkmale sind optional.

font-family (Schriftfamilie, Schriftart): eine Liste von Schriftarten, die für den vorliegenden Text in Frage kommen
font-size (Schriftgröße): Angaben in Pixeln, Prozentwerten oder relativen Schriftgrößen wie em oder ex
line-height (Zeilenhöhe): Abstand der Textzeilen innerhalb eines Absatzes
font-variant und font-variant-numeric (Schriftvarianten): Groß- und Kleinschreibung, Darstellung von Ziffern
font-weight (Schriftgewicht): font-weight (Schriftgewicht) normal oder fett

                                             Schriftfamilie  ┐
                                                             │
                                    Alternativschrift  ┐     │ 
                                                       │     │
                                  Wunschschrift  ┐     │     │
                                                 ▼     ▼     ▼
p { font: italic small-caps bold 1.2em/1.5em Georgia,Times,serif;} 
            ▲         ▲       ▲    ▲     ▲    
            │         │       │    │     │
            │         │       │    │     └- line-height (Zeilenabstand)
            │         │       │    │
            │         │       │    └- font-size (Schriftgröße)
            │         │       │
            │         │       └- font-weight (Schriftgewicht)
            │         │
            │         └- font-variant (Schriftvariante)
            │
            └- font-style (Schriftstil)

Der Schrägstrich vor /line-height muss gesetzt werden und trennt die Schriftgröße von der Zeilenhöhe (line-height).

Die Schriftfarbe wird nicht über ein font-Merkmal gesetzt, sondern über CSS color.

Mit der Kurzschrift font müssen font-size und font-family notiert werden, sonst hat font keine Wirkung.

font-family

CSS kann die Schriftfamilie, Schriftgröße und -farbe vorgeben, aber die Wahl der Schrift für Webseiten ohne ladbare Schriften war einst ein Würfelspiel ohne Sechsen: Ohne @font-face können Browser nur Schriften benutzen, die auf dem Rechner des Besuchers installiert sind. Wer Webseiten entwirft, musste sich damit abfinden, dass er nur eine Empfehlung für die Schrift aussprach. Darum erlaubt CSS neben der Wunschschrift auch Alternativen.

Wenn keine Angaben für die Schrift vorliegen, verwenden die Browser ihre voreingestellte Schrift für die gesamte Webseite – das war i.d.R. Times auf dem Desktop-Rechner, eine Helvetica Light auf iPad und iPhone und Roboto auf Android.

3 x font-family in cards — Sichere Schriften: Systemschriften / system fonts

Das body-Tag ist der bevorzugte Platz, die generellen CSS-Regeln für die Schrift einer Webseite festzulegen. Für einzelne Passagen – z.B. für Überschriften oder für die Schrift in der Navigationsleiste – müssen dann nur noch die Abweichungen der generellen Merkmale für die Schrift angegeben werden.

body { 
	font: 1.2em/140% Georgia, 
	Times, 'Times New Roman',
	serif;
} 
h1 { 
	font-size: 2rem; 
	font-weight: normal;
}

Systemschriften

Mit CSS3 und ladbaren Schriften (»Webfonts«) scheinen die Systemschriften in Vergessenheit zu geraten. Werfen wir einen Blick auf die großen Portale (Facebook und Pinterest, um nur zwei Beispiele zu nennen): Dort ist Helvetica immer noch an der Spitze. Helvetica ist einfach gut lesbar, dabei sparsam und kommt auf jedem Typ von Monitor gut herüber.

Arial hatte jahrelang zwar einen schlechten Ruf, ist aber längst überarbeitet und genauso wie Helvetica für den Monitor optimiert und gut lesbar. Schließlich ist Arial eine Kopie der Helvetica. Google ist Arial-Fan.

Lesbarkeit von Georgia, Arial, Verdana — Systemschriften

Georgia ist nie richtig zum Zuge gekommen. Bevor die Monitore groß und immer hoch auflösender wurden, waren die Schriftgrößen zu klein, um eine Serifenschrift ohne Anstrengung zu lesen. Heute ist Georgia selbst als Brotschrift auf Smartphones ein edler Hingucker.

Bis @font-face mit den Webfonts auf den Plan trat, war Verdana der King für die Brotschrift: für die Wiedergabe auf dem Monitor optimiert, schlicht und besonders gut lesbar.

Lesbarkeit von Times, Helvetica, Roboto — Systemschriften

Variable Fonts

Statt verschiedener Schriftdateien für reguläre, dünne und fette Schriftschnitte nutzen variable Schriften eine Schriftdatei mit Variationen anhand einer Achse. Variable Schriften können z.B. die Schriftstärke nicht einfach durch numerische Werte von 100 bis 900 aufweisen, sondern alle Schriftstärken in einem Bereich von 1 bis 999 in einer einzigen Schriftdatei ausliefern.

Neben font-weight sind width, slant, italic und optical-size typische Kandidaten variabler Schriften.

Lorem Ipsum

.bolder {
	font-weight: 400;
}

.wdth {
	font-variation-settings: ;
}

Ein modernes Font-Setup

Heute bilden selbst-gehostete variable Fonts eine gute Basis, die Schriftgröße wird im rem (leichter skalierbar) festgelegt. system-ui nutzt native Schriftarten je Betriebssystem als Fallback (gute Lesbarkeit).

@font-face {
	font-family: "MyFont";
	src: url("/fonts/myfont-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
  /* Fonts */
  --font-sans: "MyFont", system-ui, sans-serif;

  /* Font scale */
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.75rem, 5cqw, 3rem);

  /* Colors (OKLCH) */
  --color-bg: oklch(97% 0.01 95);
  --color-text: oklch(25% 0 0);
}

Globale Schriftgröße – fast immer in rem

Auch die Schriftgröße unterliegt nicht unbedingt den Vorgaben des Webdesigners. Der Besucher kann in allen Browsern die Schriftgröße ändern.

CSS bringt verschiedene Maße für die Bestimmung der Schriftgröße ins Spiel: Schriften können in Pixel (px), in Prozent (%), in rem oder em und für den Druck in Punktgrößen (pt) festgelegt werden.

Üblich ist heute die Größenangabe von Schriften in rem (Root EM). rem bezieht sich immer auf font-size für html, das Wurzelelement der Webseite. html { font-size: 16px; }

Dann gilt

h1 { font-size: 2rem; }

Denn 2 × 16 = 32px, egal wie tief das Element verschachtelt ist, egal, wie font-size für das Elternelement notiert ist.

rem oder em? Wann ist em noch sinnvoll?

em bezieht sich auf die Schriftgröße des Elternelements. Das macht Sinn, wenn eine Komponente wie button oder card relativ zu sich selbst skalieren soll.

.button {
  font-size: 1rem;
  padding: 0.75em 1.5em;
}

Kommt eine zweite Button-Größe hinzu, skaliert das padding automatisch mit.

.button--large {
  font-size: 1.25rem;
}

Serifenschriften auf dem Monitor

Während im Druck meist Schriften mit Serifen genutzt werden, sehen wir auf Webseiten nahezu ausschließlich Schriften ohne Serifen.

Die Vorbehalte gegen Serifenschriften rührten allerdings aus der niedrigen Auflösung und geringen bis keinerlei typografischer Feinheiten. Heute haben Smartphones 300 bis 500 dpi und wir können auf Variable Fonts mit Optical Size zurückgreifen.

Georgia

Serifenschriften waren auf Monitoren mit geringer Auflösung nicht gut lesbar.

Due Retina-Monitore mit hoher Auflösung können ein hervorragendes Schriftbild mit Serifenschriften vorweisen.

Times

Der Trend geht zu größeren Schriften. Mit größeren Schriften können wir Serifenschriften besser lesen.

Die Monitore der mobilen Geräte sind größer geworden.

Serifenschriften wirken, wenn sie etwas mehr Raum und auch mehr Luft zwischen den Zeilen bekommen:

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.7;
  font-optical-sizing: auto;
}

Einsatz als Kurzschrift – Nachteile

Die Kurzschrift font setzt alle font-Eigenschaften zurück.

font-kerning
font-variant-ligatures
font-feature-settings
font-variation-settings

Darum wird font heute eher für Performance-optimierte Setups eingesetzt, aber nicht, wenn viele OpenType-Features aktiv sind.