Verwendung von Systemschnittstellenschriftarten im Webdesign. Was ist das Geheimnis der neuen Apple San Francisco-Schriftarten?

Tatsächlich gibt es viele solcher Geheimnisse und sie werden nicht nur für Drucker und Kalligrafie-Kenner von Interesse sein.

Anklickbar

Schriftarten Helvetica werden seit jeher von Apple verwendet. Darüber hinaus wurde auf dem Mac zunächst die Schriftart verwendet Lucida Grande, und Helvetica ersetzte es in . Aber die Unternehmensleitung hat erneut beschlossen, die übliche Schriftart in den Schnittstellen von Mobil- und Computer-Betriebssystemen zu ändern?

Helvetica ist in kleinen Texten schwer zu erkennen

Es stellt sich heraus, dass Helvetica für das Schreiben von Texten in kleiner Schrift völlig ungeeignet ist. Mit der Umstellung auf diese Schriftart in OS X Yosemite begannen sich Entwickler über unklaren Text zu beschweren.

Hier ist ein Beispiel, bei dem die kleine Schriftart Helvetica völlig unleserlich ist; der Text verschmilzt einfach zu einem wolkigen Fleck. Sie sagen, dass Apple beschlossen hat, die Schriftart San Francisco zu verwenden, um Benutzern das Lesen von Nachrichten auf der Apple Watch komfortabler zu machen.

Aufgrund der Auflösung von Smartphone-Displays ist das Lesen von Inhalten heutzutage jedoch manchmal einfacher und angenehmer als bei manchen gedruckten Texten auf Papier. Und das iPhone-Display ist viel größer als der Apple Watch-Bildschirm. Warum hat der Hersteller bei allen Produkten – dem iPhone und dem Mac – komplett auf San Francisco umgestellt?

Die Schriftart „San Francisco“ ist für iOS-Geräte und Computer unterschiedlich

San Francisco verfügt über eine Reihe von Funktionen, die die Verwendung dieser Schriftart in Apple-Produktschnittstellen komfortabler machen. Beispielsweise verwendet die Apple Watch einen Typ dieser Schriftart, während iOS-Geräte und Macs einen anderen verwenden. Insbesondere San Francisco wird in iOS verwendet und für die Apple Watch haben sich Apple-Entwickler entschieden San Francisco Compact. Sie unterscheiden sich dadurch, dass die Buchstabenlinien bei SF Compact weniger abgerundet sind als bei Standard SF.

Anklickbar

Aufgrund dieses Unterschieds gibt es bei den von SF Compact geschriebenen Texten etwas mehr Abstand zwischen den Buchstaben. Dies sorgt für eine bessere Textklarheit auf kleinen Apple Watch-Displays.

Darüber hinaus sind sowohl SF als auch SF Compact in zwei weitere Unterkategorien von Schriftarten unterteilt - « Text" Und " Anzeige" Apple nennt diese Funktion „optische Größe“. Für sehr kleine Texte werden „Text“-Schriftarten und für größere „Display“-Schriftarten verwendet.

Wie bereits deutlich wird, scheinen bei serifenlosen Schriftarten wie der Helvetica nebeneinanderliegende Buchstaben zu verschmelzen und die Zeichen „a“, „e“ und „s“ sind in besonders kleinen Texten in der Regel nur schwer voneinander zu unterscheiden.

In San Francisco sind insbesondere bei den Schriftarten „Text“ mit kleiner Punktgröße größere Abstände zwischen Buchstaben in Wörtern impliziert als bei der Schriftartengruppe „Display“. Und die Wörter selbst wirken etwas langgezogener, was sie bei Verwendung einer kleinen Schriftart auch besser lesbar macht.

Anklickbar

Die Dynamik der San Francisco-Schriftarten

Eines der besten Dinge an San Francisco ist, wie die Schriftart ihr Design dynamisch optimiert. Abhängig von der Textgröße wählt das System automatisch zwischen den Typen „Text“ und „Anzeige“. Die Schriftart mit 20 pt befindet sich also direkt am Text-/Anzeigerand.

Anklickbar

Designer und Ingenieure müssen sich keine Gedanken darüber machen, welche Schriftart sie verwenden sollen. Sie müssen lediglich die Schriftartklasse festlegen UILabel, und das System wählt automatisch die entsprechende Schriftart aus.

Auffällig ist auch die Art und Weise, wie der Doppelpunkt in San Francisco-Schriftarten dargestellt wird. Normalerweise befindet es sich direkt auf der Zeile, aber in SF wird dieses Satzzeichen automatisch ausgerichtet, ragt über die Zeile und wird zwischen den Zahlen zentriert.

San Francisco – Schriftart des digitalen Zeitalters

Wie wir sehen, sind San Francisco-Schriftarten speziell dafür konzipiert, Text in jeder Größe und auf jedem Gerät leicht lesbar zu machen.

Die Schriftart Helvetica wurde 1957 in der Schweiz erfunden, als es noch keine Spur von elektronischen Geräten gab. Auch heute noch wird sie in vielen Unternehmen als offizielle Schriftart verwendet und wird sicherlich auch in Zukunft so etwas wie ein Klassiker bleiben.

San Francisco ist eine Schriftart von Apple, die erstmals Ende 2014 ihrem Publikum vorgestellt wurde. Bis zu diesem Zeitpunkt verwendete das Unternehmen die Schriftart „ “, die laut Apple Schwächen aufgrund der schlechten Lesbarkeit kleiner Texte aufwies.

Nun ruht die gesamte Apple-Produktlinie selbstbewusst auf der eigenen Schriftart „San Francisco“, die Sie unter diesem Artikel kostenlos herunterladen können. Die „San Francisco“-Familie ist in zwei Unterfamilien unterteilt, nämlich „Text“ und „Display“. Der Unterschied besteht im größeren Buchstabenabstand bei der ersten Option. Diese Eigenschaft verleiht der Unterfamilie eine bessere Lesbarkeit kleiner Schriftgrößen und dieser Typ wird auf den kleinen Geräten des Unternehmens wie der iWatch verwendet.

Unterstützung für das kyrillische Alphabet (russische Sprache) sowie für Englisch ist zweifellos vorhanden.

Kostenlose Schriftart „San Francisco“ herunterladen

Das Archiv, das Sie am Ende des Artikels herunterladen können, enthält 21 Stile (fast die Hälfte für jede Unterfamilie) in drei verschiedenen Formaten.

Unterfamilie“ Text" - Das: Deutlich, Fett Kursiv, Schwer, Starke Kursivschrift, Kursiv, Licht, Leichte Kursivschrift, Mittel, Mittlere Kursivschrift, Regulär, Halbfett Und Halbfett kursiv.

Die Unterfamilie wiederum „ Anzeige" - das sind die Stile: Schwarz, Deutlich, Schwer, Licht, Mittel, Regulär, Halbfett, Dünn Und Ultraleicht.

beachten Sie, dass die Schriftart von Apple lizenziert ist, was bedeutet, dass Sie das Recht haben, sie bei der Entwicklung von Software für Apple-Produkte sowie in Screenshots ähnlicher Produkte zu verwenden.

Denken Sie daran und viel Glück bei Ihren kreativen Unternehmungen!

Jetzt, vielleicht zum ersten Mal seit dem allerersten Macintosh, ist es sinnvoll, sich für die Verwendung von Systemschriftarten für die Benutzeroberfläche zu interessieren. Sie sind eine unterhaltsame und frische Alternative zur Webtypografie – und erfordern kein Hosting auf Ihrem Server oder dem eines Dritten. Wie kann ich Systemschriftarten auf einer Website verwenden und welche Probleme können dabei auftreten?

In den letzten Jahren sind viele interessante Systemschriftarten für die Benutzeroberfläche erschienen. Google veröffentlicht Roboto(und entwickelt diese Schriftart mit regelmäßigen Updates weiter), Apple veröffentlichte San Francisco und Designer Eric Spiekerman erstellte die Schriftart Fira Sans für Mozilla. Und das ist noch nicht alles, vergessen Sie nicht Microsoft. Sie starteten diesen Trend mit der Veröffentlichung von Windows Phone mit der Metro-Designsprache, die eng mit der Typografie im Allgemeinen und der Segoe-Schriftart im Besonderen verbunden ist.

Es ist keine Überraschung, dass die Idee, diese Schriftarten im Web zu verwenden, immer beliebter wird. Vielleicht möchten Sie den Unterschied zwischen Inhalt und Benutzeroberfläche hervorheben, Ihre Website wie eine App aussehen lassen oder einfach nur schöne Schriftarten ohne Verzögerung verwenden.

Aber ihre Verwendung ist nicht so einfach, wie wir es gerne hätten. Die CSS-Unterstützung für diese Schriftarten ist etwas psychedelisch.

Hinweis: „Systemschnittstellenschriftart“ ist eine Schriftart, die zum Rendern der Betriebssystemschnittstelle verwendet wird. Sie sollte nicht mit Systemschriftarten verwechselt werden, d. h. Schriftarten, die auf dem System des Benutzers installiert sind.

Zwei Ansätze

Derzeit gibt es zwei Möglichkeiten, die Schriftart der Systemschnittstelle in der Typografie zu verwenden.

Erster Weg

Es besteht aus der Verwendung einer kurzen „magischen“ CSS-Deklaration:

Schriftart: Menü;

Zweiter Weg

Die zweite Möglichkeit besteht darin, die Namen aller Schriftarten aufzulisten:

Es hat auch Nachteile:

Andere Optionen

Es könnte für Sie interessant sein, beide oben genannten Ansätze zu kombinieren, um bessere Ergebnisse zu erzielen. Leider ist dies nicht einfach, da sich die Eigenschaften von Schriftart und Schriftfamilie gegenseitig ausschließen – eine überschreibt immer die andere. Es ist möglich, dass durch die Manipulation von Medienabfragen etwas erreicht werden kann, aber diese Methode ist ein Hack.

Sie können auch versuchen, je nach Benutzeragent unterschiedliche CSS-Werte vom Server zu senden oder dasselbe mit JavaScript zu tun (z. B. nur Font-Family: „Fira Sans“, sans-serif; für Firefox OS senden). Diese Option ist jedoch umständlich, schwierig zu unterstützen und, was am wichtigsten ist, sie löst nicht alle Probleme.

Was nun?

Medium verwendet derzeit die zweite Methode:

Schriftfamilie: -apple-system, BlinkMacSystemFont, „Segoe UI“, „Roboto“, „Oxygen“, „Ubuntu“, „Cantarell“, „Fira Sans“, „Droid Sans“, „Helvetica Neue“, serifenlos ;

Es wurde ausgewählt, weil es weniger große Probleme aufweist. (Die erste Methode funktioniert auf mobilen Geräten nicht, mit völlig inakzeptablen Folgen; die zweite Methode hat auch Probleme, aber es gibt weniger davon und sie sind nicht so kritisch. Ihre Einschätzung dieser Methoden kann unterschiedlich ausfallen.)

Durch gemeinsame Anstrengungen können wir diese Technik verbessern. Unten finden Sie einen Block mit Text, der in der Schnittstellenschriftart Ihres Systems angezeigt werden soll. Wenn es nicht funktioniert oder Sie irgendwelche Gedanken dazu haben, hinterlassen Sie bitte einen Kommentar.

Dies sollte in der UI-Schriftart Ihres Systems gerendert werden. Der schnelle Braunfuchs springt über den faulen Hund. Dieser Text sollte in der Schriftart der Systemschnittstelle angezeigt werden.

Detaillierte Übersicht über die Schriftartenliste

Derzeit weist diese Methode folgende Probleme auf:

• Bis mindestens Dezember 2015 wird Firefox auf Mac OS X Neue Helvetica anstelle von San Francisco verwenden.
• Auch unter Mac OS X wird Neue Helvetica anstelle von Lucida Grande in Versionen vor Yosemite angezeigt.
• Bei weniger verbreiteten Betriebssystemen und komplexeren Konfigurationen ist die Auswahl der richtigen Schriftart noch schwieriger.

Wenn Sie an den Details interessiert sind, schauen wir uns an, wie diese Liste aussehen sollte, damit sie ordnungsgemäß funktioniert:

Schriftfamilie: -apple-system, BlinkMacSystemFont, „Segoe UI“, „Roboto“, „Oxygen“, „Ubuntu“, „Cantarell“, „Fira Sans“, „Droid Sans“, „Helvetica Neue“, serifenlos ;

Die erste Gruppe enthält Eigenschaften, die sich auf Schriftarten der Systemschnittstelle beziehen. Sie sind recht zuverlässig und es besteht keine Gefahr, dass der Browser sie mit anderen verwechselt:

• -apple-system deckt San Francisco in Safari auf Mac OS X und iOS sowie auf älteren Versionen von Mac OS X, Neue Helvetica und Lucida Grande ab. Dieser Wert wählt abhängig von der Schriftgröße automatisch zwischen „San Francisco Text“ und „San Francisco Display“ aus.
• BlinkMacSystemFont entspricht dem vorherigen Wert und funktioniert in Chrome unter Mac OS X.

Die folgende Gruppe hebt bekannte Systemschnittstellenschriftarten hervor:

• Die Segoe-Benutzeroberfläche deckt Windows und Windows Phone ab.
• Roboto ist Android und das neue Chrome OS. Es wird nach der Segoe-Benutzeroberfläche platziert, um Android-Entwicklern gerecht zu werden, die unter Windows mit installiertem Roboto arbeiten, sodass Roboto die Segoe-Benutzeroberfläche nicht ersetzt.
• Oxygen ist eine KDE-Schriftart, Ubuntu ist natürlich Ubuntu und Cantarell ist GNOME. Drei Schriftarten für Linux auf einmal, aber angesichts der Fülle an Distributionskits lösen sie das Problem nicht.
• Fira Sans-Schriftart Firefox OS.
• Droid Sans – alte Versionen von Android.
• Beachten Sie, dass wir nicht den Namen der Schriftart „San Francisco“ angeben. Unter iOS und Mac OS X erscheint San Francisco als „versteckte Schriftart“ und nicht als öffentliche Schriftart.
• Und wir geben San Francisco auch nicht an, sondern verwenden .SFNSText-Regular, den internen PostScript-Namen für San Francisco unter Mac OS X. Er funktioniert nur in Chrome und ist weniger flexibel als BlinkMacSystemFont.

In der dritten Gruppe haben wir Schriftarten, die als Fallbacks verwendet werden:

• Helvetica Neue wird in Mac OS X vor El Capitan verwendet. Aufgrund ihrer weiten Verbreitung steht die Schriftart ganz am Ende der Liste.
• Sans-Serif ist der traditionelle Ersatz für die Standard-Sans-Serif-Schriftart.

Die Entwicklung der Systemschnittstellenschriftarten unter Windows ist dramatischer als auf dem Mac – von der monospaced Bitmap-Schriftart von Windows 1.0 im Jahr 1985 bis zur hochauflösenden Segoe UI-Schriftart in Windows 10. (größere Version)

Zukunft

Hier gibt es noch etwas zu bearbeiten. Beginnen wir mit der Tatsache, dass die Technik nur mit westlicher Typografie funktioniert. Sie werden auch Probleme haben, wenn Sie den Abstand oder die Zeilenhöhe an die von Ihnen verwendete Schnittstellenschriftart anpassen möchten. In diesem Fall müssen Sie einen Hybridansatz verwenden oder Schriftarten nach dem Rendern erkennen.

Dennoch sind die erzielten Ergebnisse gut. Hoffentlich wird das alles in Zukunft weniger kompliziert sein. Wenn auch Sie daran interessiert sind, informieren Sie bitte Ihren Browser-Anbieter.

Die letzten drei Versionen von Mac OS X verwenden drei verschiedene Schnittstellenschriftarten: Lucida Grande unter Mac OS 10.9 (Mavericks); Sonderversion von Neue Helvetica auf Mac OS 10.10 (Yosemite); spezielle Version von San Francisco auf Mac OS 10.11 (El Capitan). Es ist logisch anzunehmen, dass San Francisco in zukünftigen Versionen verwendet wird. (

Apple verwendet seit der Veröffentlichung des ersten iPhones den Helvetica-Schriftsatz als Systemschriftart für iOS. Sie ersetzten auch Lucida Grande in Mac OS X ab Version 10.10 Yosemite. Warum hat Apple nun beschlossen, die beliebteste Schriftart der Welt abzuschaffen?

iOS 9 ist jetzt offiziell für alle verfügbar und eine neue Schriftfamilie namens San Francisco hat Helvetica Neue subtil ersetzt.

Helvetica (links) und San Francisco (rechts)

Zu diesem Zeitpunkt wurden sie bereits in der Apple Watch verwendet. Jetzt ist San Francisco zu einer einzigen Standardschriftart für alle Plattformprodukte geworden: Apple Watch, iPhone, iPad und Mac.

Seit der Veröffentlichung des ersten iPhone verwendet Apple die Helvetica-Familie als Systemschriftart für iOS. Sie ersetzten auch Lucida Grande in Mac OS X ab Version 10.10 Yosemite. Warum hat Apple nun beschlossen, die beliebteste Schriftart der Welt abzuschaffen?

Kleine Grössen sind der Schwachpunkt von Helvetica

Es besteht die Meinung, dass Helvetica nicht für kleine Texte geeignet ist. Als Helvetica die Vorgängerfamilie in Mac OS X Yosemite ersetzte, empfanden viele Designer den Ersatz als ungeeignet.

„Helvetica scheiße“ aus dem Blog von Erik Spiekermann.

Sie können die geringe Lesbarkeit von Helvetica wie folgt überprüfen. Geben Sie kleinen Text ein und verwischen Sie ihn. Einige seiner Fragmente werden „vermischt“, so dass es schwierig wird, ihren Inhalt zu erkennen. Sie sagen, Apple habe die San Francisco-Familie genau deshalb entwickelt, um kleine Texte auf der Apple Watch besser lesbar zu machen.

Allerdings übersteigt die Auflösung moderner Smartgeräte die Auflösung gedruckter Publikationen und Texte sind im iPhone nicht immer so klein wie in der Apple Watch. Warum hat Apple dann nicht nur bei der Apple Watch, sondern auch bei iOS und Mac OS X einen Ersatz vorgenommen?

San Francisco – vielfältig

San Francisco-Schriftarten verfügen über viele Funktionen, die sie leicht lesbar machen. Tatsächlich handelt es sich bei der San Francisco-Version für Apple Watch und der Version für iOS/Mac um zwei unterschiedliche Schriftarten.

Für iOS/Mac wird eine Schriftfamilie namens „SF“ verwendet, während die Apple Watch „SF Compact“ verwendet. Sie können den Unterschied an abgerundeten Buchstaben wie „o“ und „e“ erkennen. Die vertikalen Linien des SF Compact sind flacher als die des SF.

Dieser Unterschied führt dazu, dass mit SF Compact eingegebener Text mehr Abstand zwischen den Zeichen hat, was dazu führt, dass der Text besser lesbar ist, wenn er auf kleinen Geräten wie der Apple Watch gelesen wird.

Darüber hinaus ist jede der Familien in zwei weitere Unterfamilien unterteilt: „Text“ und „Display“. Apple nennt dies „Optische Größen“. Die Text-Unterfamilie ist für kleinformatige Texte konzipiert, während die Display-Unterfamilie für großformatige Texte gedacht ist.

Schriftfamilie San Francisco

Wie oben erwähnt, „verschmelzen“ in serifenlosen (oder serifenlosen) Schriftarten wie Helvetica zwei benachbarte Buchstaben und Buchstaben wie „a“, „e“, „s“ werden bei kleinem Text einander sehr ähnlich Größen.

Vergleich der Einrückungen zwischen Zeichen in Schriftarten der Unterfamilien Display und Text

Vergleich der Schriftarten der Unterfamilien Display und Text am Beispiel eines einzelnen Zeichens

Gleichzeitig ist die Text-Unterfamilie so konzipiert, dass die Einzüge zwischen den darin enthaltenen Zeichen im Vergleich zu den Zeichen in der Display-Unterfamilie vergrößert und die Lücken darin vergrößert werden, um die Lesbarkeit bei kleinen Textgrößen zu verbessern.

San Francisco ist dynamisch

Eines der großartigen Dinge an San Francisco ist, dass das Headset dynamisch optimiert ist. Anzeige und Text ersetzen einander entsprechend der Größe des angezeigten Textes. Der Schwellenwert ist hier auf 20pt festgelegt.

Designer und Ingenieure müssen sich keine Gedanken über die Wahl der richtigen Option aus der Familie machen. Wir fügen beispielsweise einfach die Systemschriftart zum UILabel hinzu. Das System bestimmt selbst, welches Headset Sie benötigen.

Das wirklich Beeindruckende an San Francisco-Schriftarten ist jedoch die Darstellung von Doppelpunkten. Normalerweise sehen wir ihn in anderen Schriftarten direkt über der unteren Zeile. Wenn er sich also zwischen Zahlen befindet, ist der Doppelpunkt nicht vertikal zentriert. In der Schriftartenfamilie San Francisco erfolgt diese Ausrichtung jedoch automatisch.

Richten Sie den Doppelpunkt automatisch vertikal zur Mitte aus

San Francisco kam aus dem digitalen Zeitalter zu uns

Wie Sie sehen, sind San Francisco-Schriftarten so konzipiert und konzipiert, dass Text jeder Größe und auf jedem Gerät leicht lesbar ist.

Helvetica, das sie ersetzten, wurde 1957 in der Schweiz gegründet, als es noch keine digitalen Geräte gab. Sie wird jedoch noch immer von vielen Unternehmen als Unternehmensschriftart verwendet und wird zweifellos auch in Zukunft als gute klassische Schriftart verwendet werden.

San Francisco hingegen ist eine moderne Schriftart. Sein Schriftbild verändert sich dynamisch, je nach Kontext. Man kann sie als eine Art „native Schriftart“ des digitalen Zeitalters bezeichnen.