Typografie in der UI: Nach welchen Schriftarten sollte ich 2022 suchen?

Um wirklich zu verstehen, was eine gute UI- und eine Bildschirmschrift ausmacht, ist es am besten, mit dem zu beginnen, was jetzt verfügbar ist und was sie dazu bringt, verwendet zu werden.

 

Ich habe es eine Weile versucht, bevor ich mir eine Typografie ausgedacht habe, von der ich dachte, dass sie sich auf dem Bildschirm gut liest. Aber jetzt möchte ich weiter in das Gebiet der Typografie eintauchen und überlegen; Was eine Typografie besonders gut für das Screen- und UI-Design (User Interface) macht.

Bekannte Beispiele

Segoe UI

Ein Großteil der Schriftart „Segoe“ wurde zuerst von Microsoft mit dem Windows Vista Os Bildschirm und Funktionen für Windows 7 und sogar mit dem aktuellen Produkt Windows 8 verwendet.

Segoe UI war schon immer Gegenstand von Kontroversen unter Designern über die Ähnlichkeit in der Form zwischen ihm und dem weltberühmten Frutiger.

Lucida Grande

„Lucida Grande“ ist die UI-Schriftart, die für Apples Mac OS X ausgewählt wurde. Es basiert auf Lucida Sans und Lucida Sans Unicode von Charles Bigelow und Kris Holmes.

Lucida Grande hat eine kleinere Punktgröße und ist auf dem Bildschirm leichter zu lesen. Überraschenderweise hat Lucida Grande nie Kursivschrift aufgenommen.

Ubuntu

Unbutu ist eine Schriftart, die von Dalton Maag entwickelt wurde. Natürlich Ubuntu Linux OS. Es wurde 2010 vollständig angekündigt, als es weithin beliebt war, nicht nur durch Ubuntu OS, sondern auch durch die Google Web Fonts-Liste.

Helvetica Neue

Helvetica Neue wurde um die 1980er Jahre herum entworfen und wurde erst dann wirklich berühmt, als Apple das iPhone auf den Markt brachte und diese Schriftart verwendete, dann die Schriftarten in Apples UI-Auswahl für iOS.

Droiden-Sans

Entwickelt von Steve Matteson. „Droid Sans“ wird für Android-Smartphones verwendet. Es wurde speziell entwickelt, um auf dem kleinen Bildschirm deutlich sichtbar zu sein, und die Droid-Schriftfamilie umfasst auch Droid Serif und Droid Mono.

Tests

Wenn wir uns die Typografie für das UI-Design und die Bildschirmlesbarkeit ansehen, gibt es eine Reihe von Faktoren, die wir berücksichtigen müssen, wie zum Beispiel: Mangel an gutem Rhythmus zum Lesen, ständiges Tippen von Buchstaben, hohe x-Höhe.

Unklar

Was meine ich also mit „unklar – Mangel an Mehrdeutigkeit“?

Die Schriftart, die für die UI und das Lesen auf dem Bildschirm verwendet wird, ist nur mit etwa 9-12 Punkten besonders klein. Nicht nur, dass es abhängig von der Auflösung Ihres Bildschirms angezeigt wird.

Zugegeben, Smartphone-Modelle (Smartphones) haben bereits größere Möglichkeiten, Auflösungen anzuzeigen (iPhone4 ist ein Beispiel mit einer Auflösung von 323 ppi), aber es gibt viele viel größere Anzeigegeräte wie Windows-PCs, Macs und Laptops.

Das bedeutet, dass bei kleiner Punktgröße und geringer Auflösung einzelne Schriftbuchstaben von jedem Gerät aus klar und lesbar sein sollten.

Dies ist eine Möglichkeit, dies zu beweisen;

Hier ist das Wort „Analphabet“ (Großbuchstabe I), eine gute UI-Schriftart, die einen Unterschied zwischen den Buchstaben benötigt, damit das menschliche Auge nicht verwirrt wird. Ein häufiges typografisches Problem besteht darin, wie man Großbuchstaben I und Kleinbuchstaben l steuert. Gerade bei einem Wort wie dem obigen Beispiel, wenn man es nicht genau liest, kann es völlig falsch sein.

Es ist sehr interessant, dass wir sehen, wie jede Schriftart damit umgeht.

Sowohl Segoe UI als auch Droid Sans zeichnen sich dadurch aus, dass sie ein kleines Groß- und Kleinbuchstaben I (Serifen) hinzufügen  . Die Ubuntu-Schriftart verwendet eine andere Möglichkeit, wenn der Kleinbuchstabe l einen kleinen Schwanz erhält.

Leider haben weder Lucida Grande noch Helvetica Neue diesen Test bestanden. Danach gibt  Lucida Grande  ein etwas höheres kleines l an, aber in kleinen Größen ist dieser Unterschied unbedeutend.

Helvetica Neue löst dieses Schlimmste, wenn es schwierig ist, den Unterschied zwischen diesen beiden Wörtern zu erkennen.

Das ist kein Problem, wenn wir den Inhalt sorgfältig lesen. Aber beim Überfliegen wie beim Überfliegen einer heruntergekommenen Liste ist es wichtig, Klarheit zwischen den Wörtern zu haben.

Noch ein Test? In Ordnung;

Diesmal mit dem Wort „Anagogie“, das in fünf Typografien angewendet wird.

Mit diesem Test werden wir sehen, wie Typografie das Problem von Buchstaben mit Abstiegen und ähnlichen runden Strichen in einem Wort löst.

Es ist sehr gut, dass Schriften, die einen Kleinbuchstaben mit „2 Ebenen“(a) haben, alle diesen Test bestehen. Die geometrischen serifenlosen Seiten, die sich mit dem Unterschied zwischen den Buchstaben a und o befassen, sind jedoch nicht gut (klicken Sie hier und schauen Sie sich die ITC Avant Garde Gothic an. Geben Sie „a Doggy“ ein und reduzieren Sie die Schriftgröße, Sie werden verstehen, was ich meine).

Ein typografisches Problem, das hier zu berücksichtigen ist, ist die Platzierung von Buchstaben mit Absteigenden, wie z. B. reguläres g und y. Bei kleinen Größen scheinen die meisten Schriftseiten die Abseiler zusammenzukleben.

Lucida Grande unterscheidet sich durch die Begradigung des Abstiegs des Buchstabens y. Droid Sans verwendet den Buchstaben g „2 Stufen“ (g).

Mit diesem Wort betrachten wir gleichzeitig auch die Gesamtformen jedes Wortes. Sie werden feststellen, dass zum Beispiel bei Helvetica Neue jeder Buchstabe abgerundet ist. Es ist ein Merkmal der Typografie, aber mit der Bildschirmgröße und der UI-Einstellung bei einer kleinen Auflösung ist die Unterscheidung zwischen unverbindlichen Buchstaben mit ähnlich „runden“ Buchstaben die gleiche.

Das war schon immer eine Angelegenheit von Helvetica Neue; Neben dem Problem der serifenlosen Groteskenschriften ist es so konzipiert, dass es in großen Größen angezeigt werden kann.

In kleineren Grössen wie ui für Monitore wurde Helvetica nie für den Einsatz in kleinen Grössen entwickelt.

Segoe UI hat das gleiche Problem, wenn die Größe klein gelassen wird. Mit „humanistischen“ Eigenschaften wie Lucida und Ubuntu ist dies besser gelöst. Besonders bei Unbuntu, wenn man den Buchstaben g mit einem horizontalen Schwanz belässt.

Droid Sans verwendet ein gekrümmtes g am unteren Rand, wodurch der Text einzigartig und anders aussieht als andere Buchstaben, wodurch zwischen den Textseiten unterschieden wird und dem Benutzer Lesbarkeit verleiht.

Lesen Sie in einem guten Rhythmus – Guter Leserhythmus

Unser zweites Problem nach der Lesbarkeit des Textes auf dem Bildschirm ist die Notwendigkeit eines guten Rhythmus zum Lesen. Was meine ich damit?

Dafür finde ich es notwendig, dass Sie Ludwig Ubele kennen, der die extrem gut lesbare Schrift FF Tundra entworfen hat. Im Thema I Love Typography merkt Ludwig an:

Ich habe Tundra als Namen der neuen Serifenschrift nicht wegen des Designprozesses, sondern wegen der ursprünglichen Konzeptualisierung gewählt. Ich dachte an ein weites und flaches Land. Es ist die ursprüngliche Idee. Tundra soll die Augen des Betrachters zu fernen Horizonten führen.

Eine Schrift hat zwei grundlegende Richtungen. Der Horizont (die Horizontale), die Striche, durch die sich das Auge bewegt; und die vertikale Linie besteht aus separaten Buchstaben, die durch den Körper definiert werden.

Der Körper ist dafür verantwortlich, den Rhythmus der Schrift in den Kurven (Schalen, Schläge, Schläge usw.) zu erzeugen, aus denen jedes Wort selbst besteht.

Insgesamt gilt: Je schmaler der Text, desto weniger ausgeprägt ist er. Zum einen erzeugt der Schriftzug einen Zaun und unangenehme Unterbrechungen, wenn die Striche nahe beieinander platziert werden. Das schafft Müdigkeit und Dummheit, es ist nicht leicht zu lesen. Dies ist wie Bäume, die zu nahe beieinander liegen oder zu spärlich sind.

Kurz gesagt, eine Horizontalität einer Schrift führt das Auge des Lesers in eine Linie, während vertikale Striche Rhythmus erzeugen; Diese Punkte helfen dem Auge, sich auszuruhen, um die Form anderer Wörter fortzusetzen.

Wie Ludwig bemerkte, schafft ein zu schmaler Buchstabe eine „Barriere“, die das Auge ermüdet, Buchstaben, die zu breit sind, haben das gleiche Problem.

Eine gute UI-Schriftart benötigt ein visuelles Gleichgewicht zwischen zu schmalen und zu breiten Räumen, die dazu führen, dass das Auge starken Strichen durch zwei horizontale Richtungen folgt (Grundlinie und x-Höhe) und Rhythmus durch den Textkörper hat.

 

Oben sind 5 Schriften mit Text lorem ipsum. Sie können auf das Bild klicken, um eine größere Größe zu sehen. Werfen wir einen kurzen Blick durch die Linien.

Was denkst du?

Sofort haben Sie vielleicht einen Gedanken im Kopf, Helvetica Neue hat hier ein Problem. Es ist nicht nur ein breites Buchstabengesicht – das Lücken zwischen den Körpern schafft -, sondern es scheint monoton (gleich) zu sein, jede Form des Textes wird leicht rundlich gleich dargestellt.

Im Allgemeinen fühlt es sich an, als ob die Wörter den gleichen Abstand zu haben scheinen, emotional schafft Helvetica Neue auf diese Weise einen schlecht gelesenen Rhythmus, er ist nicht vielfältig genug.

Der Rest der Schriften fühlt sich besser an mit Buchstaben, die schmaler in der Breite sind und ein humanistisches Aussehen haben. Ich liebe die Art und Weise, wie Ubuntu die Augen des Lesers in horizontalen Linien und einem kleinen Schwanz auf den Buchstaben L und einem kleinen horizontalen Strich auf dem Buchstaben t richtet.

Die Eigenschaften der Segoe-UI ermöglichen es den Buchstaben o, b, d, g und p, größere Gegenräume zum Atmen und Erzeugen verschiedener Rhythmen zu haben.

Lucida Grandes a hat einen langen Schwanz, um mehr mit anderen Buchstaben zu verbinden. Droid Sans zeigt auch einen guten Leserhythmus, besonders mit dem Serifenstil des Buchstabens t.

Große X-Höhe

Die X-Höhe einfacher Buchstaben ist die Höhe des Kleinbuchstabens x. Es verwendet ein Maß, um die Höhe von Kleinbuchstaben zu beschreiben, die sich von der Höhe von Großbuchstaben unterscheidet.

Wie bereits erwähnt, sollte die leicht lesbare Typografie, die bei der Anzeige von Monitoren verwendet wird, mit kleinen Pixelpunkten kompatibel sein. Wir haben nicht viele Pixel zu verwenden, also müssen wir manchmal zählen.

Es bedeutet, dass eine große x-Höhe die Höhe der Buchstaben ausmacht und ihnen mehr Platz zum Atmen gibt, wodurch sie unterscheidbar und vor allem leicht zu lesen sind.

 

Das Bild oben zeigt jede Schriftart, die Striche werden in Baseline, x-Höhe und Cap-Höhe (Großbuchstabenhöhe) gezeichnet.

Die x-Höhe gibt dem Droid Sans einen guten Rhythmus, während die Segoe UI und helvetica Neue mit der x-height klein sind, während lucida Grande und Ubuntu etwas kleiner sind als die Droid Sans, was sie natürlich auf dem Bildschirm kleiner macht.

Wer ist also der Gewinner?

Natürlich ist Droid Sans die beste der fünf Optionen und nicht überraschend; Es wurde speziell entwickelt, um sich an die Benutzeroberfläche anzupassen und auf dem Bildschirm leicht zu lesen.

Wir weisen auch darauf hin, dass Helvetica Neue nicht für Spezialschriften für UI (kleiner Grösse) geeignet ist. Jeder seiner Buchstaben ist in seiner Form zu ähnlich, so dass er schwer zu erkennen ist und gleichzeitig eine große Breite hat. Im Allgemeinen wird Helvetica geliebt, aber es ist so konzipiert, dass es grosse, nicht Text im Körper anzeigt.

Aber warum hat Apple sie für die Benutzeroberfläche von iOS ausgewählt? Meine Vermutung ist, dass sie eher Stil als Funktionalität wählen. Ich persönlich finde Lucida Grande auf iOS effektiver.

Segoe UI, Lucida Grande und Ubutu sind in vielerlei Hinsicht eine seltsame ausgezeichnete Wahl für UI. Ubuntus Eigenschaften mit gleichmäßigen Distanzstrichen, niedriger L-Auflösung und  einem guten Großbuchstaben I, wie auch immer der Preis es hat, hat ein g entworfen „2 Tier“.

Lucida Grande hat einen sehr guten Leserhythmus, aber die Buchstaben scheinen schwer zu erkennen, besonders L und ich, wie ich oben sagte. Segoe UI hat einen breiten Zählerabschnitt (Platz in den Buchstaben a, b, d, o,..), der ihm einen angenehmen Rhythmus und eine kleine Serife im Großbuchstaben I gibt, um das Problem der Differenzierung zu lösen.

Mein Rat

Nichts von alledem! Es gibt ein paar Optionen für eine gute UI und leicht lesbare Typografie für den Bildschirm genau dort. Dies sind also die drei Optionen, die ich persönlich sehr relevant und wahrscheinlich die besten finde, nämlich;

Ich habe Aller Sans, mit der Begründung, dass es großartig für UI und Lesbarkeit ist. Es leiht sich viele der Eigenschaften von Ubuntu (was keine Überraschung ist, wenn man weiß, dass sowohl Ubuntu als auch Aller Sans von Dalton Maag entworfen wurden);

Der horizontale Abstand zwischen den Strichen ist gleich, ein zierlicher Schwanz im Buchstaben a, etwas mehr Schwanz im Kleinbuchstaben l und eine große x-Höhe.

Darüber hinaus erhält Aller ein zusätzliches g „2 Stufen“ und ein ausgefallenes Q, eine vollständige Querstange im unteren t.

Die nächste Option ist Azuro, entworfen von Georg Seifert, komplett von Jens Kutilek und gehört zu FontShop.

Diese Schrift erhielt viel Aufmerksamkeit und Beiträge. Sie können über die Entwicklung dieser Schriftart lesen. Es wurde unter Windows, Mac OS X und iOS professionell und sorgfältig bis ins Detail getestet.

Ich liebe das kleine l und den Schwanz des Großbuchstabens Q und die Zahlen im klassischen Stil. Mit leicht schmalen Eigenschaften, die entsprechende Neigung. Auf jeden Fall empfehle ich dringend, diese Schriftart zu wählen – Azuro.

PT Sans wurde 2009 angekündigt und von Alexandra Korolkova, Olga Umpeleva und Vladimir Yefimov von ParaType entworfen, um die Verwendung mit einer Open-Use-Lizenz zu erleichtern.

Wie die meisten Schriftarten für Bildschirme und Benutzeroberfläche ist PT Sans etwas schmal mit humanistischen Merkmalen, Unterschieden im Abstieg in den Buchstaben g, j, y, und es ist großartig, dass es Unicode unterstützt.

Darüber hinaus hat PT Sans auch PT Sans Caption, PT Sans Narrow sowie Serifenversion, PT Serif.

Was halten Sie von den obigen Kommentaren? Oder haben Sie eine andere Meinung? Viel zu besprechen über Bildschirmlesbarkeit und UI . Lassen wir interessante Links für alle, auf die sie sich beziehen können.