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.

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

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.

Beschreibung

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;

Beschreibung

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;

Beschreibung

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 Schriftstärken unter 400 vermeiden. Auch mit Angaben wie lighter aufpassen.
Das Ergebnis ist auf einigen Systemen kaum lesbar.

Helvetica mit font-weight:200:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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.

Beschreibung

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.

Beschreibung

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.

Beschreibung

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.

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 */

Download als CSS-Datei am Ende der Seiten.

Die Listen werden regelmäßig angepaßt.

Mehr zum Thema

Weiterführende Informationen

Rechtliche Informationen

Downloads

	CSS - Websichere Font Stacks V1.6
			Download
	30.06.2022 1.8 KB		90

	EB Garamond
	10 Styles + 2 Variable Fonts + Initialen (otf-format, nicht vollständig, nur: ADFGLNOQT). ttf und woff2 Sparsam beim Drucken		Download
	12.02.2023 4.1 MB SIL Open Font License Georg Duffner		140

	Anton
	ttf, eot, woff und woff2 Ersatz für Impact.		Download
	12.02.2023 375.76 KB SIL Open Font License The Anton Project Authors		94