Thorsten H. Willert

CSS - Font Stacks

Verschiedene Typen aus dem Schriftsatz

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 ( ω ) = 1 2 π ∫ − ∞ ∞ 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, CO2 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.

Mehr zum Thema

Weiterführende Informationen

Software

Rechtliche Informationen

  1. Dejure.org: Urteil zur Nutzung von Google Fonts / LG München I, 20.01.2022 - 3 O 17493/20,
  2. jsDelivr-Blog: Auswirkungen des Urteils des LG München auf jsDelivr
  3. eRecht24: Datenschutzerklärung für Font Awesome

Downloads

Schriften zum Download.
Details