Mit dem Aufkommen von Webfonts war es dann m\u00f6glich Schriften anzuzeigen, die nicht auf dem Betriebssystem vorinstalliert sind. Wozu braucht man dann heute noch websichere Systemschriften, wenn es ohnehin Webfonts gibt? Man sollte sie immer als Fallback<\/strong> im CSS Font Sack<\/a> anwenden, falls Webfonts nicht funktionieren oder falls man bewusst darauf verzichtet.<\/p>\n Die Tabelle zeigt, dass z.B. Schriften wie Arial Narrow<\/em> oder Arial Black<\/em> weit verbreitet sind, aber auch, dass man bei Lucida Sans<\/em> auf Windows als die Version Lucida Sans Unicode<\/em> und auf Mac als Lucida Grande<\/em> ansprechen muss. Die Daten dieser Tabelle beruhen auf diesen sehr praktischen Quellen:<\/p>\n Die Tabelle macht auch deutlich, dass es websichere Schriften so nicht mehr gibt, wenn man damit meint, dass sie auf allen Plattformen installiert sein m\u00fcssen. Was damals f\u00fcr den Desktop weitgehend funktioniert hat, funktioniert in Zeiten des mobilen Browsens wegen iOS und vor allem Android nicht<\/strong> mehr. Diese haben teilweise ein anderes Set an vorinstallierten Schriften bzw. hat Android gar keine der g\u00e4ngigen websicheren Fonts. Das muss auf jeden Fall bedacht werden, immerhin hat Android europaweit einen Anteil von \u00fcber 28 % aller Betriebssysteme, Desktop mit eingeschlossen (Juli 2017, Quelle<\/a>). Android ist somit der Ausrei\u00dfer, aber f\u00fcr die verbleibenden drei Viertel kann man weiterhin von websicheren Schriften reden.<\/p>\n Diese Schriften sind auf Windows und<\/em> Mac OS ziemlich \u00fcberall installiert:<\/p>\n sans-serif<\/strong><\/p>\n serif<\/strong><\/p>\n monospace<\/strong><\/p>\n Alle der websicheren Schriftarten von Mac OS und Windows gibt es auch auf iOS mit zwei Ausnahmen: Lucida Grande<\/em> und Tahoma<\/em> finden sich nicht auf iOS.<\/strong> Nat\u00fcrlich gibt es auch noch eine Vielzahl anderer Schriften, auf die man bei iOS zugreifen kann. Auf iOS Fonts<\/a> findet man eine ausf\u00fchrliche Liste der 58 vorinstallierten Schriften. Das kann dann interessant sein, wenn man f\u00fcr iOS im CSS Font Stack eine einem Webfont m\u00f6glichst entsprechende Alternative anbieten m\u00f6chte.<\/p>\n Mit Android ist der Verlass auf die bew\u00e4hrten websicheren Schriften zu Ende gegangen, denn dort findet sich keine<\/strong> dieser Schriften. Es gibt Roboto<\/a> (die serifenlose Systemschrift seit Android 4), Noto Serif<\/a> (vormals Droid Serif) und Droid Sans Mono<\/a>.<\/strong><\/p>\n Dabei ist es auf Android nicht m\u00f6glich<\/strong> diese vorinstallierten Systemschriften \u00fcber den Namen anzusteuern.<\/strong> Die Angabe Es gibt daf\u00fcr auf Android aber auch noch zus\u00e4tzliche Keywords, <\/strong>damit man die verschiedenen Schnitte (wie Condensed oder Black) anw\u00e4hlen kann:<\/p>\n Ich rate davon ab diese Keywords zu nutzen, wenn es darum geht auch f\u00fcr Plattformen au\u00dferhalb Androids zu gestalten. Damit kommt es n\u00e4mlich zu Steuerung der Auf Stack Overflow gibt es eine Liste der auf Android verf\u00fcgbaren Schriften<\/a> und wie man sie in CSS ansteuert. Mehr zu den verf\u00fcgbaren Android Schriften gibt es in den Material Design Guidelines zu Typografie<\/a>.<\/p>\n In manchen F\u00e4llen bietet es sich an mit der eigentlichen Systemschrift des Betriebssystems<\/strong> zu gestalten. Z.B. ist das bei Windows die Schrift Segoe UI<\/a> <\/em>oder auf Mac OS und iOS San Franciso<\/a><\/em>. Diese Systemschrift im Webdesign zu verwenden kann mitunter sehr sinnvoll sein, da die Schriften h\u00e4ufig weit ausgebaut und gut \u00fcberlegt sind (mit der Ausnahme von Helvetica Neue<\/cite> damals bei Mac OS Yosemite \u2013 das waren finstere Zeiten<\/a>). Weiters vermittelt man dadurch den Eindruck die Website w\u00e4re ein nativer und vertrauter Teil des Betriebssystems, wenn man das m\u00f6chte. Medium<\/a> oder die Admin-Oberfl\u00e4che von WordPress machen das zum Beispiel. Wer die eigentliche Schrift des jeweiligen Betriebssystems<\/strong> verwenden m\u00f6chte findet hierzu einen guten Artikel auf CSS-Tricks<\/a>.<\/p>\n Websichere Schriften bieten entweder einen wichtigen und sinnvollen Fallback, falls Webfonts nicht funktionieren oder man bewusst darauf verzichten m\u00f6chte. Demnach sind sie immer noch relevant und geh\u00f6ren zum sauberen Aufbau der Typografie in CSS. Android macht es notwendig die Browser Keywords wie Welche websicheren Schriften gibt es?<\/h2>\n
![\"Tabelle](\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/08\/websichere-schriften-windows-mac-os-ios-android-1.png\")
\nTabelle downloaden (pdf)<\/a><\/p>\n\n
Websicheren Schriften gibt es so nicht mehr<\/h2>\n
Websichere Desktop-Schriften<\/h2>\n
\n
\n
\n
Websichere Schriften auf iOS<\/h2>\n
Keine websicheren Schriften auf Android<\/h2>\n
font-family: Roboto;<\/code> funktioniert nicht (es sein denn Roboto<\/em> wird als Webfont integriert). Wenn man auf den Systemfont zugreifen m\u00f6chte, funktioniert dies \u00fcber die Browser Keywords f\u00fcr generischen Schriftfamilien sans-serif<\/code>, serif<\/code> oder monospace<\/code>.<\/p>\n\n
sans-serif-thin<\/code><\/li>\n<\/code>sans-serif-medium<\/code><\/li>\n<\/code>sans-serif-black<\/code><\/li>\n<\/code>sans-serif-condensed<\/code><\/li>\n<\/code>sans-serif-condensed-light<\/code><\/li>\n<\/ul>\nfont-weight <\/code>\u00fcber die font-family<\/code>, was in einer unsauberen typografischen CSS-Struktur resultiert.<\/p>\nMit den Systemschriften gestalten<\/h2>\n
Zusammengefasst<\/h2>\n
serif<\/code> zu verwenden, da es dort keine der g\u00e4ngigen Systemschriften aus Desktop-Zeiten gibt. Wie man einen sinnvollen CSS Font Stack erstellt beschreibe ich in diesem Artikel<\/a> ausf\u00fchrlich.<\/p>\n