CSS - Font Stacks – Thorsten H. Willert

Was sind Font Stacks?

Font Stacks sind eine Lösung in CSS, um alternative Schriften für Websites anzugeben.
Die hier vorgestellten Font Stacks sind systemübergreifende, websichere Lösungen ohne zusätzliche Schriften laden zu müssen. Damit wird Ihre Website schlanker und schneller.

In absteigender Priorität können Sie hier Schriften angeben. Wird die erste Schrift nicht auf dem System des Besuchers gefunden, wird versucht eine nach der anderen zu laden. Ist keine davon vorhanden, wird eine generische Fallback-Schrift genommen, z. B. sans-serif.
Diese letzte Angabe ist wichtig, damit der Browser erkennt, welche installierte Standardschrift er benutzen soll.

Oft werden die Font Stacks in der falschen Reihenfolge dargestellt.
Wenn ich z. B. die Schriftart Garamond möchte, muss diese an den Anfang der Liste (links), nicht an das Ende!

Alle folgenden Font Stacks sind systemübergreifend für Windows, Linux und Mac.
Evtl. (Laufweiten-) Unterschiede zwischen den Schriften werden über CSS ausgeglichen.

Systemschrift


font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Einige Systeme (Linux) haben mehrere Schriften davon installiert. Hier kann man die Reihenfolge noch anpassen, je nachdem man welche Schrift bevorzugt.

Die benutzten Schriften

system-ui: Eine generische Schriftart, die von verschiedenen Betriebssystemen bereitgestellt wird.
-apple-system: Eine spezielle Schriftart für Apple-Systeme, die in neueren Versionen von macOS und iOS verwendet wird.
BlinkMacSystemFont: Eine generische Schriftart, die auf macOS-Systemen verwendet wird.
"Segoe UI": Eine Schriftart von Microsoft, die auf Windows-Systemen vorinstalliert ist.
Ab Windows-Vista – davor Tahoma.
Roboto: Eine Schriftart von Google, die für Android-Systeme entwickelt wurde und auch auf vielen Webseiten zu finden ist.
"Noto Sans": Eine Schriftart von Google, die auf vielen Betriebssystemen verfügbar ist.
Oxygen-Sans: Eine Schriftart, die für die Benutzeroberfläche von KDE entwickelt wurde.
Ubuntu: Eine Schriftart, die speziell für das Betriebssystem Ubuntu Linux entwickelt wurde.
Cantarell: Eine Schriftart, die für die Benutzeroberfläche von GNOME entwickelt wurde.
"Helvetica Neue": Eine Schriftart von Apple, die auf vielen Apple-Systemen vorinstalliert ist.
sans-serif: Sorgt dafür, dass eine Standardschriftart der Familie Sans-Serif verwendet wird, wenn keine der spezifizierten Schriftarten verfügbar ist.

Serif Schriften

Times New Roman


font-family: Times, "Times New Roman", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Tinos, serif;

Entwurf.

Georgia


font-family: Georgia, _Nimbus-RR, _Liberation-S, Gelasio, serif;

Die benutzten Schriften

Gelasio: Eine freie Schriftart. Gelasio hat kompatible Metriken zu Georgia.
Nimbus Roman: Eine Schriftart, die eng mit Times New Roman verwandt ist und auf vielen Linux-Distributionen installiert ist.
Liberation Serif: Eine weitere Schriftart, die von Times New Roman inspiriert ist und auf Linux-Systemen weit verbreitet ist.
serif: Eine generische Schriftfamilie, die eine Standardschriftart der Familie Serif verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Garamond


font-family:  Garamond, "Apple Garamond", "ITC Garamond Narrow", "URW Palladio L", Palatino, Palladio, "EB Garamond", serif;

Die benutzten Schriften

Apple Garamond: Eine Schriftart, die von Apple Computer für das Mac OS-Betriebssystem entwickelt wurde. Sie basiert auf der Schriftart Garamond und weist ähnliche Designmerkmale auf.
ITC Garamond Narrow: Eine engere Version von Garamond, die von International Typeface Corporation (ITC) entwickelt wurde.
EB Garamond: Eine freie Garamond-Alternative, die auf den historischen Garamond-Schriften basiert.
URW Palladio L: Eine Schriftart, die von Hermann Zapf entwickelt wurde und von der Schriftart Palatino inspiriert ist. Sie ist eine beliebte Alternative zu Garamond auf Linux-Systemen.
Palatino: Eine Schriftart, die eng mit Garamond verwandt ist und auf vielen Betriebssystemen installiert ist.
Palladio: Eine Schriftart, die eng mit Garamond verwandt ist und auf vielen Betriebssystemen installiert ist.
serif: Eine generische Schriftfamilie, die eine Standardschriftart der Familie Serif verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Sans Serif Schriften

Helvetica


font-family: Helvetica, "Helvetica Neue", Roboto, "Liberation Sans", "DejaVu Sans Condensed", "Nimbus Sans", "Nimbus Sans L", sans-serif;

Entwurf.

Bei Helvetica (oder ähnlichen Schriften) Schriftstärken unter 400 vermeiden. Auch mit Angaben wie lighter aufpassen.
Das Ergebnis ist auf einigen Systemen kaum lesbar.

Helvetica mit font-weight:200:
Beispiel-Text in Helvetica mit font-weight 200

Verdana


font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans",  sans-serif;

Entwurf.

Trebuchet


font-family: "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans-serif;

Entwurf.

Impact


font-family: Impact, Haettenschweiler, _Nimbus-BC, _LiberationSansNarrow-B, "Arial Black", Anton, sans-serif;

siehe: Vorgefertigte Klassen.

Die benutzten Schriften

Impact: Eine fette, serifenlose Schriftart, die auf vielen Windows- und Mac-Systemen verfügbar ist. Sie eignet sich gut für Überschriften und kurze Texte.
Anton: Eine von Google entwickelte serifenlose Schriftart. Ein guter direkter Ersatz für Impact
Haettenschweiler: Eine von Microsoft entwickelte serifenlose Schriftart, die auf vielen Windows-Systemen verfügbar ist.
"Liberation Sans Narrow Bold": Eine fette, serifenlose Schriftart von Red Hat, die auf vielen Linux-Systemen verfügbar ist.
NimbusSansL-Bold-Condensed: Eine von Adobe Systems entwickelte serifenlose Schriftart, die auf vielen Linux-Systemen verfügbar ist.
sans-serif: Eine generische Schriftfamilie, die eine Standardschriftart der Familie ohne Serifen verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Monospace

Im Gegensatz zu anderen Font Stacks habe ich diese hier in Schriften mit und ohne Serifen aufgeteilt.
Der Default-Wert bleibt in beiden Fällen allerdings Browser- und Systemabhängig.

Serif


font-family: Courier, "Courier New", "FreeMono", "Nimbus Mono PS", Cousine, monospace;

siehe: Vorgefertigte Klassen.

Die benutzten Schriften

Courier: Eine Monospace-Schriftart, die auf vielen Systemen verfügbar ist.
"Courier New": Eine von Microsoft entwickelte Monospace-Schriftart, die auf vielen Windows-Systemen installiert ist.
"FreeMono": Eine freie Monospace-Schriftart, die von GNU-Projekten entwickelt wurde und auf vielen Betriebssystemen verfügbar ist.
"Nimbus Mono PS": Eine PostScript-kompatible Monospace-Schriftart, die auf vielen Linux-Systemen verfügbar ist.
Cousine: Eine von Google entwickelte Monospace-Schriftart, die als Ersatz für Courier New dient.
monospace: Eine generische Schriftfamilie, die eine Standardschriftart der Familie Monospace verwendet, wenn keine der spezifizierten Schriftarten verfügbar ist.

Sans-Serif


font-family: _Consolas, "Lucida Console", "Noto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;

siehe: Vorgefertigte Klassen.

Die benutzten Schriften

Consolas:: Eine moderne, gut lesbare Monospace-Schrift von Microsoft, die auf Windows-Systemen vorinstalliert ist.
Lucida Console:: Eine Monospace-Schriftart von Bigelow & Holmes, speziell für Terminal- und Konsolenanwendungen entwickelt.
Noto Mono:: Eine Schriftart von Google, die eine breite Palette an Zeichen und Sprachen abdeckt, einschließlich Unicode.
Liberation Mono:: Eine Schriftart von Red Hat, die für eine hohe Lesbarkeit auf Bildschirmen optimiert wurde und Standard in vielen Linux-Distributionen ist.
DejaVu Sans Mono:: Eine Schriftart, die auf der Bitstream Vera basiert und eine breite Palette an Zeichen und Sprachen umfasst. DejaVu Sans Mono ist auf vielen Betriebssystemen verfügbar, einschließlich Linux, Windows und macOS.
Monospace:: Eine generische Schriftart-Familie, die als Fallback-Option dient und alle installierten Monospace-Schriftarten auf dem System umfasst.

Formeln (MathML)

Für eine vollständige und korrekte Darstellung bedarf es hier spezieller Fonts.
Bei einfachen Formeln können Sie evtl. auf diese Fonts verzichten.

$F (ω) = \frac{1}{\sqrt{2 π}} \int_{- \infty}^{\infty} f (t) e^{- i ω t} d t$


font-family: "STIX Two Math", DejaVuMathTeXGyre-Regular, "DejaVu Math TeX Gyre", "Cambria Math", serif;

Entwurf.

Hierbei handelt sich um Schriften die häufig vorinstalliert sind.

Die benutzten Schriften

STIX Two Math:: STIX Two Math ist eine mathematische Schriftart, die speziell für wissenschaftliche und mathematische Dokumente entwickelt wurde. Sie bietet eine umfassende Abdeckung von mathematischen Zeichen und ist auf verschiedenen Plattformen verfügbar, darunter TeX-Distributionen wie TeX Live und MikTeX.
DejaVu Math TeX Gyre: DejaVu Math TeX Gyre ist eine mathematische Schriftart, die auf der TeX Gyre Schriftfamilie basiert und für die optimale Darstellung von mathematischen Formeln und Symbolen in TeX-Dokumenten entwickelt wurde. Sie bietet eine breite Palette von mathematischen Zeichen und ist auf verschiedenen Betriebssystemen verfügbar, einschließlich Linux, Windows und macOS.
Cambria Math: Cambria Math ist eine mathematische Schriftart von Microsoft, die speziell für die Darstellung von mathematischen Formeln in Microsoft Office-Anwendungen entwickelt wurde. Standardmäßig in Microsoft Office-Anwendungen auf Windows-Systemen verfügbar.

CSS-Klassen zum direkten Benutzen

Damit Sie nicht den entsprechenden Elementen jedesmal die komplette font-family zuweisen müssen, legen Sie stattdessen CSS-Klassen an.

Das hat mehrere Vorteile:

Es vereinfacht die Verwendung,
lässt die Seite schneller laden
und hält den Quellcode kleiner und übersichtlicher.

Vorgefertige Klassen


  /* www.thorsten-willert.de V1.62 */
.system { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;}
/* ========================================================================== */
.arial { font-family: Arial, FreeSans, "Liberation Sans", Arimo, sans-serif; }
/* Arimo: https://fonts.google.com/specimen/Arimo */

/* ========================================================================== */
.times { font-family: "Times New Roman", Times, Cambria, Tinos, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L", "Nimbus Roman No9 L Regular", serif;}
/* Tinos: https://fonts.google.com/specimen/Tinos */

/* ========================================================================== */
.georgia { font-family: Georgia, Gelasio, _Nimbus-RR, _Liberation-S, serif; }
@font-face {
    font-family:_Nimbus-RR;
    size-adjust: 101.5%;
    src:
		local("Nimbus Roman");
}
@font-face {
    font-family:_Liberation-S;
    size-adjust: 101%;
    src:
    	local("Liberation Serif");
}
/* Gelasio: https://fonts.google.com/specimen/Gelasio */

/* ========================================================================== */
.garamond { font-family:  Garamond, "Apple Garamond", "ITC Garamond Narrow", "EB Garamond", "URW Palladio L", Palatino, Palladio, serif; }
/* https://fonts.google.com/specimen/EB+Garamond */

/* ========================================================================== */
.helvetica { font-family: Helvetica, "Helvetica Neue", "DejaVu Sans Condensed", "Nimbus Sans", "Nimbus Sans L", Roboto, sans-serif; }

/* ========================================================================== */
.verdana { font-family: Verdana, "Verdana Ref", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;}

/* ========================================================================== */
.trebuchet { font-family: "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans-serif; }

/* ========================================================================== */
.impact { font-family: Impact, Anton, Haettenschweiler, _Helvetica_Compressed, _LiberationSansNarrow-B, _Nimbus-BC, sans-serif;}

@font-face {
    font-family: _LiberationSansNarrow-B;
    font-weight: bold;
    src:
		local("LiberationSansNarrow-Bold"),
		local("Liberation Sans Narrow Bold");
}

@font-face {
    font-family: _Nimbus-BC;
    font-weight: bold;
    src:
		local("Nimbus Sans L Bold Condensed"),
		local("NimbusSansL-Bold-Condensed");
}
/* https://fonts.google.com/specimen/Anton */

/* ========================================================================== */
.monospace-sans { font-family: _Consolas, "Lucida Console", "Noto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace; }
@font-face {
    font-family: _Consolas;
    size-adjust: 108%;
    src:local("Consolas");
}

/* ========================================================================== */
.monospace-serif { font-family: Courier, "Courier New", Cousine, "FreeMono", "Nimbus Mono PS", monospace; }
/* https://fonts.google.com/specimen/Cousine */

/* ========================================================================== */
/* nicht optimiert ! */
.formel{font-family: "STIX Two Math", DejaVuMathTeXGyre-Regular, "DejaVu Math TeX Gyre", "Cambria Math", serif;}

Die Links in der CSS-Datei führen zu einer gleichwertigen Ersatzschrift von Google-Fonts.

Die unterschiedlichen Schreibweisen für die gleiche Schrift, sind einmal der komplette Name (Schriftgruppe) und einmal der PostScript-Namen.
Verschiedene Browser und Systeme ziehen hier einen davon vor.

Screenshot mit Schrift-Namen vom Programm nexusfont

Namen und PostScript-Namen im Programm nexusfont

Zusammenfassung

Durch Font-Stacks lassen sich systemübergreifend, verschiedene Schriften benutzen, ohne dass diese heruntergeladen werden müssen.
Das spart Datenvolumen, Energie, CO₂ und läßt Ihre Seite schneller laden.

Checkliste

Die Schriftart ist für den Flietext zweitrangig? Nehmen Sie die Systemschriften.
Schrift für den Fließtext soll sich davon unterscheiden? Nehmen Sie die vorgefertigten Font-Stacks.
Eine spezielle Schrift ist für eine Überschrift gefordert? Benutzen sie Font-Subsetting und reduzieren damit die Zeichen der Schrift, auf die, die wirklich benutzt werden.
Sind spezielle Schriften und mehrere Schnitte gefordert? Verwenden Sie Variable-Fonts im woff2-Format.

CSS - Font Stacks

Was sind Font Stacks?

Systemschrift

Serif Schriften

Times New Roman

Georgia

Garamond

Sans Serif Schriften

Helvetica

Verdana

Trebuchet

Impact

Monospace

Serif

Sans-Serif

Formeln (MathML)

CSS-Klassen zum direkten Benutzen

Zusammenfassung

Checkliste

Mehr zum Thema

Weiterführende Informationen

Software

Rechtliche Informationen

Downloads