font-family<\/code>-Angaben. Da man sich (auch heutzutage) nie sicher sein kann, welche Schriftarten auf einem Endger\u00e4t installiert sind, gibt man eine Abfolge an weit verbreiteten vorinstallierten Schriftarten an. Ein Font Stack sieht z.B. so aus:<\/p>\nfont-family: \"Open Sans\", Helvetica, Arial, sans-serif;\n<\/pre>\nDer Browser \u00fcberpr\u00fcft nach der Reihe, ob die angegebene Schrift am Ger\u00e4t vorhanden ist. Falls nicht, geht er solange in der Liste weiter, bis er die erste Schriftart findet, die installiert ist. Sollte es gar keine der angegebenen font-family<\/code> geben, kann man mit Keywords f\u00fcr generische Schriftfamilien (wie sans-serif<\/code>) die Standard-Schriften des Betriebssystems bzw. Browsers darstellen.<\/p>\nWarum ist es sinnvoll einen Font Stack zu definieren?<\/h2>\n
Auch wenn Webfonts es erm\u00f6glichen, Schriften auf Ger\u00e4ten anzuzeigen, auf denen sie nicht installiert sind, sollte man immer eine Ausweichl\u00f6sung haben, falls etwas nicht funktioniert. Denn in fast allen Situationen ist ein guter Fallback wichtig:<\/p>\n
Wenn Webfonts nicht gleich dargestellt werden<\/h3>\n
Das liegt daran, dass sie noch geladen werden. In diesem Moment wird im Idealfall die n\u00e4chste definierte Systemschrift dargestellt (besser irgendein Inhalt als gar kein Inhalt) und dann durch den Webfont ausgetauscht. Dieser Austausch wird Flash of Unstyled Text, abgek\u00fcrzt FOUT<\/a>, genannt. Meistens springt das Layout dabei, da der Webfont andere Abmessungen als die Systemschrift hat. Mit einer m\u00f6glichst \u00e4hnlichen Fallback-Schrift l\u00e4sst sich dieser Effekt verringern.<\/p>\n![\"Beim](\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/05\/flash-of-unstyled-text-fout-webfont-loading-1-1.gif\")
FOUT \u2013 Flash of Unstyled Text: Beim langsamen Laden der Seite sieht man wie die Systemschrift durch den Webfont ersetzt wird und das Layout sich dadurch ver\u00e4ndert.<\/figcaption><\/figure>\nWenn Webfonts gar nicht dargestellt werden<\/h3>\n
Ursachen daf\u00fcr k\u00f6nnen eine langsame Internetverbindung, ein Ladefehler<\/strong> oder tempor\u00e4re Unerreichbarkeit eines Third-Party Services (wie Fontdeck oder Typekit) sein. Aber auch, wenn der Browser das gew\u00e4hlte Font Format nicht unterst\u00fctzt<\/a>, spezifische Browsereinstellungen oder Inhalts-Blocker<\/a> k\u00f6nnen Gr\u00fcnde daf\u00fcr sein, warum Webfonts gar nicht dargestellt werden. Mobil kann es h\u00e4ufiger bei schlechten Verbindungen zu unvollst\u00e4ndig oder nicht geladenen Webfonts kommen. Hier ist Zeit kostbar und der Font Stack sollte eine gute Alternative liefern.<\/p>\nWenn auf Webfonts bewusst verzichtet wird<\/h3>\n
Das mag vor allem daran liegen, dass Webfonts aus Performance-Gr\u00fcnden<\/strong> (Ladezeit) als zu viel Ballast betrachtet werden bzw. man gestalterisch ohne auskommt. Dann muss man sehen mit welchen websicheren Systemschriften man die gew\u00fcnschte Anmutung am besten erzeugt, im Prinzip Webdesign wie vor zehn Jahren. Vor allem hier gilt es den Fallback gut zu \u00fcberlegen, alle Alternativen durchzuspielen und zu bedenken, dass es auf Android keine der g\u00e4ngigen websicheren Schriften gibt (mehr dazu sp\u00e4ter).<\/p>\nDoch wie erstellt man nun einen guten Font Stack?<\/strong> Hierf\u00fcr m\u00f6chte ich eine Anleitung in vier Schritten anhand eines konkreten Beispiels geben:<\/p>\n1. Den gew\u00fcnschten Webfont angeben<\/h2>\n
F\u00fcr dieses Beispiel w\u00e4hle ich den Webfont PT Serif<\/i>. Da diese Schriftart prim\u00e4r dargestellt werden soll, muss sie an die erste Stelle meines CSS Font Stacks:<\/p>\nfont-family: \"PT Serif\";<\/pre>\n2. \u00c4hnliche Alternativen w\u00e4hlen<\/h2>\n
Nun geht es darum, eine dem Webfont im Stil m\u00f6glichst entsprechende Systemschrift<\/strong> auszuw\u00e4hlen. Hierf\u00fcr gibt es einige Listen und Tools, bei denen man nachsehen kann, welche Schriften es auf den verschiedenen Betriebssystemen gibt:<\/p>\n\n- CSS Font Stack<\/a> \u2013 zeigt welche Systemschriften auf Windows und Mac OS zu finden sind. Immer noch eine sehr gute Quelle, wenn auch schon etwas \u00e4lter, daher fehlen auch die Angaben zu den mobilen Betriebssystemen.<\/li>\n
- Font Family Reunion<\/a> \u2013 zeigt, ob eine Schrift auf einem Betriebssystem installiert ist und was die Standard Schrift ist.<\/li>\n
- Wikipedia Listen von vorinstallierten Schriften auf Mac OS<\/a> und Schriften auf Windows<\/a>.<\/li>\n
- Complete Guide to Pre-Installed Fonts<\/a> f\u00fcr Linux, Mac und Windows \u2013 eine sehr lange Tabelle von aPaddedCell, die zwar die Schriftart selbst mit Bildern zeigt, dadurch aber leider nicht durchsuchbar ist.<\/li>\n<\/ul>\n
Ich w\u00e4hle f\u00fcr unser Beispiel Cambria<\/em>. Diese Systemschrift entspricht der PT Serif<\/em> im Stil ziemlich gut, ist nach CSS Font Stack<\/a> auf Windows vorinstalliert und durch Microsoft Office auch auf einigen Macs.<\/p>\nAls n\u00e4chste Alternative w\u00e4hle ich aus den websicheren Schriften<\/strong> die Georgia. <\/em>Diese entspricht der PT Serif<\/em> auch noch ziemlich gut und hat sehr \u00e4hnliche Abmessungen.<\/p>\n![\"\"](\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/05\/css-font-stack-beispiel-font-families-1.png\" "\\"\\"")
Die verschiedenen Schriften im Font Stack im Vergleich<\/figcaption><\/figure>\nAn dieser Stelle muss man auf die Reihenfolge achten.<\/strong> St\u00fcnde Georgia<\/em> vor Cambria,<\/em> dann w\u00fcrde Cambria<\/em> nie angezeigt werden. Das liegt daran, dass Georgia<\/em> als websichere Systemschrift auf fast allen Ger\u00e4ten installiert ist. Damit auch die systemspezifische Schrift nach Verf\u00fcgbarkeit zum Einsatz kommen kann, sollte sie vor der websicheren Schrift angegeben werden. In diesem Fall also Cambria<\/em> vor Georgia<\/em>. Mein CSS Font Stack nun so aus:<\/p>\nfont-family: \"PT Serif\", Cambria, Georgia;<\/pre>\nEs zahlt sich aus das ganze Layout oder l\u00e4ngere Texte nur in den Alternativschriften anzusehen<\/strong> und so zu beurteilen, ob sie sich wirklich bew\u00e4hren.<\/p>\n3. Generische Schriftfamilie als Abschluss<\/h2>\n
Dieser Punkt ist vor alle f\u00fcr Mobilger\u00e4te relevanter denn je, die immerhin einen Anteil von etwa 40 % des Webbrowsens ausmachen. Manche websicheren Schriften sind auf iOS nicht installiert, auf Android<\/strong> hingegen findet sich gar keine <\/strong>der g\u00e4ngigen Alternativen. Deshalb ist es wichtig, am Ende des Font Stacks ein Keyword f\u00fcr eine generische Schriftfamilie anzugeben:<\/p>\n\nsans-serif<\/code>\u2013 die Standard-Serifenlose des Betriebssystems (am Mac Helvetica,<\/em> auf Windows Arial<\/em> oder auf Android Roboto<\/em>)<\/li>\nserif<\/code> \u2013 die Standard-Serifenschrift des Betriebssystems (am Mac Times,<\/em> auf Windows Times New Roman<\/em> oder auf Android Noto Serif<\/em>)<\/li>\nmonospace<\/code> \u2013 die Standard-Festbreitenschrift<\/a> des Betriebssystems (am Mac Courier,<\/em> auf Windows Courier New<\/em> oder auf Andorid Dorid Sans Mono<\/em>)<\/li>\n<\/ul>\nWelche die Standard-Schriften sind, kann man auf fontfamily.io<\/a> nachsehen, indem man die entsprechenden Keywords eingibt. Neben diesen drei bekannten CSS Keywords gibt auch noch die weniger bekannten fantasy<\/code> und cursive<\/code>. Doch vor der Verwendung dieser sollte man sich h\u00fcten, da sie je nach Browser und Betriebssystem sehr unterschiedliche Schriften darstellen und so extrem unterschiedliche Ergebnisse liefern. Wer mehr zu solchen Feinheiten erfahren m\u00f6chte sollte diesen Artikel von Zach Leatherman<\/a> lesen.<\/p>\nMit der Erg\u00e4nzung des Standard Font-Family-Keywords sieht mein CSS nun so aus:<\/p>\n
font-family: \"PT Serif\", Cambria, Georgia, serif;<\/pre>\n4. Bonus: Auf die optische Gr\u00f6\u00dfe achten<\/h2>\n
Es ist sinnvoll darauf zu achten, ob die Alternativschriften in den Abmessungen der Prim\u00e4rschrift m\u00f6glichst entsprechen. 16 px sind nicht gleich 16 px, denn jede Schrift hat leicht andere Gr\u00f6\u00dfenverh\u00e4ltnisse und \u00fcberhaupt ist das Bemessen der Schriftgr\u00f6\u00dfe<\/a> eine komplizierte Sache. Was aber wesentlich zum optischen Eindruck der Schriftgr\u00f6\u00dfe beitr\u00e4gt, ist das Verh\u00e4ltnis der Kleinbuchstabenh\u00f6he (oder x-H\u00f6he) zum Gesamtkegel. Ist dieses Verh\u00e4ltnis sehr unterschiedlich, wird die Alternativschrift einen auffallend abweichenden Eindruck machen. Um dieses Gr\u00f6\u00dfenverh\u00e4ltnis herauszufinden, gibt es einen praktischen x-Height Calculator<\/a>. Dieser funktioniert jedoch nur mit Schriften, die am System installiert sind.<\/p>\n![\"\"](\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/05\/font-size-adjust-example-1.png\")
Links die PT Serif und rechts die Alternativschrift Cambria mit einer niedrigeren x-H\u00f6he. Dadurch sieht Cambria optisch kleiner aus. Mit font-size-adjust<\/code> kann man diesen Unterschied ausgleichen.<\/figcaption><\/figure>\nBei unserem Beispiels sieht man eine Abweichung der x-H\u00f6he bei PT Serif<\/em> und Cambria.<\/em> Der x-Height Calculator ergibt f\u00fcr font-size-adjust<\/code> ein Verh\u00e4ltnis von 0.5<\/code>. Das muss ich in meinem CSS nun nur nach der font-family<\/code> erg\u00e4nzen, schon wird es in Betracht gezogen und alle Alternativschriften werden entsprechend vergr\u00f6\u00dfert:<\/p>\nfont-family: \"PT Serif\", Cambria, Georgia, serif;\nfont-size-adjust: 0.5; \/* Wert der Prim\u00e4rschrift *\/<\/pre>\nDas w\u00e4re nun wunderbar einfach, doch nun die schlechte Nachricht: font-size-adjust<\/code> wird leider nur von Firefox unterst\u00fctzt<\/a>, und das hat sich seit 2008 nicht ge\u00e4ndert. Chrome unterst\u00fctzt das Feature nur unter einer Flag.<\/a> Damit der Support steigt votet f\u00fcr font-size-adjust<\/strong> bei Microsoft Edge<\/a> (ist schnell, einfach und ohne Registrierung).<\/p>\nAuch wenn man nicht wirklich auf font-size-adjust<\/code> setzen kann, schadet es nicht es anzugeben und wer wei\u00df, was die Zukunft bringt. Was dieses Beispiel aber nochmal klar macht, ist das man bei der Auswahl der Alternativschriften auch ohne font-size-adjust<\/code> auf eine \u00e4hnliche x-H\u00f6he achten sollte. Hier gibt es noch mehr zum Thema:<\/p>\n\n- font-size-adjust auf CSS-Tricks<\/a> mit praktischen Code-Pen-Beispielen (funktionieren nur in Firefox)<\/li>\n
- W3C font-size-adjust Candidate Recommendation<\/a> mit weiteren Beispielen und Veranschaulichungen<\/li>\n<\/ul>\n
\nEin ganz sch\u00f6ner Prozess, der nicht immer einfach ist. Man muss sich durch viele Listen und Tools w\u00fchlen, um gute Alternativschriften zu finden und die wichtigsten F\u00e4lle zu bedenken. Es zahl sich aus viel auszuprobieren, um die Atmosph\u00e4re der nicht vorhandenen Wunschschrift noch am ehesten zu vermittelt. Nat\u00fcrlich werden die Systemschriften immer ein Kompromiss sein (sonst h\u00e4tte der Webfont ja keine Eigenst\u00e4ndigkeit), aber darauf gilt es sich einzulassen. Der Lohn daf\u00fcr ist ein robuster Font Stack der f\u00fcr die Unkontrollierbarkeit aber auch wundbare Flexibilit\u00e4t des Webs gewappnet ist.<\/p>\n
M\u00f6chtest du mehr dazu erfahren?<\/strong> Dann sieh dir doch meinen Inhouse Workshop Web Typografie<\/a> an.<\/p>\n