Top-Schriften fürs UI Design und Coding

Für meine Crossfitkurse kann ich mich bequem im Internet ein- und auch wieder austragen. Su­per­prak­tisch. Weniger praktisch, dass ich kaum lesen kann, für was ich mich da eigentlich anmelde. Eine geome­trische Seri­fenlose in winziger Punktgröße, dazu in Hell- auf Dunkelgrau, Blau oder Rot – da hilft selbst die Lesebrille nicht mehr. Auch wenn für gute Web­typo­grafie weit mehr als die verwendete Schrift aus­schlag­gebend ist (siehe unseren Artikel »UI-Typo« in PAGE 10.19, Sei­te 44 ff.), soll es jetzt ausschließlich um Fonts gehen, die sich besonders gut fürs User In­terface Design und fürs Coding eignen. Sei es, weil sie extra sorgfältig gehintet oder die Zeichen dickten­gleich sind, also immer dieselbe Breite haben, oder weil sich kritische Buchstaben wie kleines l, großes I und die Ziffer 1 eindeutig unterscheiden. Aber wie geht man nun am besten vor, um die richtige Schrift für ein UI-Projekt zu finden?

Fonts: Ästhetische Kriterien im Vordergrund

Am Anfang steht die Frage der Anwendung: Soll die Schrift vorrangig im Bodytext oder eher in Headlines zum Einsatz kommen? Oder überall? Benötige ich viele verschiedene Schnitte und eine große Sprachunterstützung? Und wie sieht es mit dem Budget aus? Oft schränken diese Kriterien die möglichen Schriften schon stark ein. »In vielen Fällen haben wir gar nicht so viel Einfluss auf die Auswahl, wie wir gerne hätten, etwa weil der Kunde bereits eine Hausschrift hat«, sagt Raffael Stüken, Partner bei der Digitalagen­tur Humans & Machines in Berlin. »Manchmal aber gibt es schöne kleine Projekte, bei denen wir tatsäch­lich die Fonts selbst aussuchen können. Das machen wir äußerst sorgfältig, denn Schrift ist eines der aus­drucksstärksten Werkzeuge, um eine Stimmung zu er­zeugen, auch unterschwellig.«

Raffael Stüken kommt es zugute, dass er als Gra­fik­designer viel Wissen, Erfahrung und Feeling für Ty­pografie mitbringt. Zuerst legen er und sein Team ästhetische Kriterien an; was gefällt, was passt zum Kunden, welche Schrift ist neu und noch nicht so an­gesagt, dass man sie demnächst überall sehen wird. Dafür schauen sie sich in erster Linie bei ihren Lieblingsfoundries um: Klim Type zum Beispiel, Commercial Type, Grilli Type, Lineto, Dinamo oder auch Schick Toikka. Als Inspirationsquelle nutzen die Kre­ativen zudem Typewolf, aber ebenso Instagram und Pin­terest. »Wir haben eine Pinterest-Wall, auf der wir span­nende Dinge speichern, die uns begegnen. Quasi ein Moodboard für Schriften. Dieses Gucken und Ar­­chivieren bildet eine hilfreiche Grundlage, wenn es an das konkrete Aussuchen geht.« Da Hu­mans & Machines häufig umfangreiche E-Commerce-­Projekte umsetzt, achten die Gestalter nicht nur auf gute Les­barkeit der gewählten Schrift in den UI-Komponenten, sondern auch darauf, dass sie Tabellenziffern – also dicktengleiche Ziffern – enthält.

Lesbarkeit am Screen: Mehr Licht als Tinte

Hinsichtlich der Lesbarkeit am Screen ist man generell mit neueren Schriften gut bedient. Denn Typede­signer haben heute bei sämtlichen Entwürfen die digitalen Medien im Hinterkopf – und verwenden viel Zeit darauf, ihre Schriften daraufhin perfekt zu ge­stalten. »Beim Entwurf von Webfonts sollten wir eher an Licht als an Tinte denken«, sagt Pedro Arilla, Kre­ativdirektor bei der Foundry Font­smith. »Um Les­barkeitsprobleme zu vermeiden, müssen wir die Pixel intelligent anordnen. Eine große x-Höhe und offene Buchstabenformen sind wichtig. Auch manuelles Hinting kann dabei helfen, dass die Fonts auf dem Bildschirm optimal dargestellt werden.«

Tückisch können Schriften sein, in denen sich kri­tische Buchstaben wie l, I und 1 nur schlecht unterscheiden lassen. Indra Kupferschmid stellte für den Mietservice Fontstand eine Kollektion von 41 Schrift­familien fürs Interface Design zusammen. »Ich persönlich finde dennoch nicht, dass alle l einen Hockey­stock­bogen unten haben müssen«, so die Professorin für Typografie an der Hochschule der Bil­den­den Künste Saar. Für sie ist prinzipiell jede Schrift geeignet, die sehr gut auf dem Bildschirm rendert, deutli­che, klare Buchstabenformen und außerdem kei­­nen hohen Strichkontrast hat.

Schriften für User Interfaces

»In User Interfaces, aber auch in Formularen und anderen nicht linear gelesenen Dingen – egal, ob di­gi­­tal oder Print – kann man die Buchstaben nicht im­mer aus dem Kontext heraus erkennen«, so Kup­fer­schmid. »In einem ganzen Satz hingegen ist meist klar, ob das ein I oder l ist. Hat man aber einen mit ›A1‹ beschrifteten Button ist es schon schön zu wissen, ob es A1, Al oder AI heißen soll.« Für die Typografin darf eine größtmögliche Differenzierung zwi­schen l, I und 1 trotzdem nicht das einzige Kriterium sein, sonst würden viele hübsche und durchaus fürs Web geeignete Schriften unter den Tisch fallen.

Da auf Smartphones und in Menüs nicht viel Platz ist, sind kompakt laufende Schriften oft von Vorteil. »Das gilt besonders dann, wenn der Text dynamisch für meh­rere Sprachen lokalisiert wird«, so Indra Kup­fer­schmid. »Deutsche Menüpunkte passen dann sehr häufig nicht mehr in die von Amerikanern gestalte­ten UI-Kästchen.« Zu eng sollte es jedoch auch nicht sein, am besten wählt man eine Schriftamilie, die von Haus aus schon über meh­rere Breiten verfügt. Oder man entscheidet sich gleich für einen variablen Font, bei dem man diese selbst regulieren kann.

Favourite Font von Craig Thomas: FS Elliot
Meine Lieblingsschrift ist FS Elliot von Fontsmith. Vor einigen Jahren haben wir die Website der Londoner Foundry gestaltet und dabei diese Type verwendet, die sich sehr flexibel einsetzen lässt. Die leichteren Schnitte verleihen den Überschriften Raffinesse, während die kräftigeren Fonts in kleineren Größen gut lesbar und daher ideal für die Buttons und die Navigation sind. Schön zu sehen ist das auf der Site der Versicherungsagentur Azur. Wir haben auch schon mit variablen Fonts experimentiert, kratzen aber erst an der Oberfläche. Im UI Design werden sie sich aber ganz sicher durchsetzen, weil es so nützlich ist, differenzierte Abstufungsmöglichkeiten zu haben.

Craig Thomas, Mitgründer und Partner bei Taylor / Thomas, London
www.taylorthomas.co.uk

 

 

 

Mit oder ohne Serifen?

Dank immer besser auflösender Displays lassen sich Schriften mit Serifen heute ebenso gut darstellen wie serifenlose Schriften. Trotzdem sieht man im UI De­sign deutlich mehr Sans Serif. Auch Raffael Stüken setzt meist auf sie. »Gar nicht wegen der Lesbarkeit, sondern weil unsere Arbeiten von der Gestaltung her eher puristisch sind, dazu passen Se­rifenlose besser.«

Wer sich für eine Serifenschrift entscheidet, muss genau hinschauen, schließlich gibt es viele verschie­­dene Arten und ebenso viele Eigenschaften. »Besser sind gut leserliche mit nur wenig Strichkontrast, also keine Bodoni, keine Kursive und keine Schreib­schrift, weil diese schwerer zu ren­dern sind und feine Striche gerne wegbrechen«, emp­fiehlt Indra Kupferschmid. »Außerdem sind auch bei Serifenschriften eine große x-Höhe und offene Buch­sta­benformen förderlich.«

Warum UI Designer trotzdem meist zu Serifenlo­sen greifen, könnte auch damit zusammenhängen, dass Menüs und Buttons keine Lesetexte sind, sondern vielmehr wie Headlines gehandhabt werden. Und für diese werden klassischerweise oft Sans-Serif-Fonts ein­gesetzt. »Geometrische Serifenlose sind aber in jedem Fall ungeeignet, da man viele Zeichen leicht ver­­wechseln kann, sie generell nicht gut leser­lich sind und auch oft recht breit laufen«, erklärt Pro­fessorin Indra Kupferschmid.

 

Top 4 von Indra Kupferschmid: Alright, Queue, Logical, Nitti
Für normale Sites und User Interfaces mag ich sehr gerne die Alright von Okay Type. Die hat zwar keine speziellen Accessibility-Features, aber immerhin sind die Oberlängen höher als die Versalien. Queue von Tal Leming gehört auch zu meinen Favoriten, ebenso Logical von Edgar Walthert mit ihren super vielen Icons – das ist immer praktisch. Schön auch die Nitti-Familie von Pieter van Rosmalen, die es seit Kurzem ebenfalls in Condensed gibt. Die Caps sind im Vergleich zu den Oberlängen sehr niedrig, was sie gut unterscheidbar und angenehm im Versalsatz macht.

Indra Kupferschmid, Typografin und Professorin für Typografie, Bonn
http://kupferschrift.de  

Foto: Tânia Raposo

 

 

Multiplex oder Monospaced Fonts?

Wohl jeder (Web-)Designer kennt das Problem: Die Zwischen­headline in Bold wirkt doch ein wenig fett, man ersetzt ihn durch den Medium-Schnitt und zack, bricht der Text anders um und das ganze Layout zusammen. Für Abhilfe sorgen hier sogenannte Multi­plex-­Schrif­ten, in denen ein Buchstabe in sämtlichen Schnit­ten gleich breit ist, das a in Light also genauso viel Platz braucht wie das a in Bold. Neben Multiplex spricht man bei diesen Schriften auch von Duplex, uniwidth oder dicktenkompatibel.

Die Berliner Digitalagentur Humans & Machines setzt auf ihrer eigenen Website auf eine solche Mul­t­i­plex-Schrift: den in Zu­sammenarbeit mit Typedesigner Ralph du Carrois, auch bekannt als Carrois Apostrophe, entwickelten Custom Font Hu­mans Grotesk. »So praktisch das auch ist, dass man die Schnitte pro­blem­los wechseln kann, darf man aber nicht vergessen, dass die Dicktengleichheit der Buch­sta­ben natürlich auch Einfluss auf die Schrift an sich hat – der Light-Schnitt zum Beispiel dann schon relativ breit läuft«, erklärt Designer Raffael Stüken.

Nicht zu verwechseln sind diese Multiplex- mit Monospaced Fonts, bei denen alle Glyphen dieselbe Breite ha­ben. Diese eignen sich nicht so gut fürs UI Design, da sie in der Regel viel Platz benötigen. Sehr beliebt sind sie dagegen fürs Coding, da sie das Auge sicher durch die oft langen Codezeilen führen und der Quelltext an Übersichtlichkeit gewinnt. Ganz wichtig ist bei Coding-Fonts die gute Unterscheidbarkeit der einzelnen Buchstaben. Gleichfalls freut sich das Auge über etwas größer ange­legte Satzzeichen.

Top 4 von Lizy Gershenzon: Zangezi, Söhne, Elena, IBM Plex
Bei all den schönen Schriften da draußen schaffe ich es nicht, mich auf einen Favoriten festzulegen. Hier sind meine Top 4: Ich liebe die künstlerische und kribbelige Energie der Zangezi von Daria Petrova. Für Bodytext eignet sich diese Serifenschrift weniger, wohl aber für Headlines oder groß gesetzte Absätze. Söhne von Klim Type ist eine handwerklich ausgezeichnete, gut lesbare Serifenlose. Sie lässt sich sowohl in Lesegrößen als auch in Headlines einsetzen und ist mit vier Breiten, 64 Schnitten und umfangreicher Sprachunterstützung sehr variabel. An der Elena von Nicole Dotin mag ich die editorial vibes und die Tatsache, dass sie etwas Weichheit in digitale Umgebungen bringt. Wir haben sie zum Beispiel für die Site www.marmosetmusic.com  verwendet. Eine wirklich gut gemachte Open-Source-Option mit vielen Varianten – Sans, Serif, Mono, Condensed – ist IBM Plex von Bold Monday und Mike Abbink. Die umfangreiche Sprachunterstützung ist ebenso nützlich wie die schmalen Propor­tionen der Buchstaben für inhaltsintensive UI-Layouts.

Lizy Gershenzon, Designerin, Co-Founder FutureFonts.xyz und Scribble Tone, Portland
www.scribbletone.com

Foto: Sage Brown

 

 

Interface Design: Zwischenstufen erwünscht

Ideal fürs Interface Design sind variable Fonts, bei denen sich Größe, Breite, Fette und viele andere Parameter stufenlos verstellen lassen. Einen solchen hätte sich Raffael Stüken beim Redesign der Website von Nomos Glashütte gewünscht. Die Uhren­manu­­faktur ver­wendet Gotham als Hausschrift. »Die gesamte Gestaltung sollte leichter wer­den, aber Gotham Light war im Grunde grenzwertig dünn und drohte, auf nicht ganz so guten Dis­plays wegzubre­chen. Der Book-Schnitt wiederum war ein bisschen zu dick und erzeugte nicht den Look, den wir wollten. Eine variable Schrift hätte uns sehr geholfen.«

Dass heute alle gängigen Brow­ser das Variable-Fonts-Format unterstützen und neuerdings auch InDesign mit ihnen zusammenarbeitet, wird sicher ihre Verbreitung fördern. Ein nicht ge­lös­ter Knackpunkt aber ist die Preisge­staltung. Bislang gibt es den variablen Font meist beim Kauf einer Familie gra­tis dazu. Wobei es sich allerdings über­wiegend um eher hochpreisige Schriften han­delt, die das Budget vieler Web­projekte sprengen würden. Die Foun­dries werden sich da noch etwas einfal­len lassen müssen. 

Favourite Font von Roel Nieskens: Recursive
Meine momentane Lieblingsschrift für Webprojekte ist Recursive von Stephen Nixon. Es ist ein unglaublich vielseitiger variabler Font, der eine formal aussehende Serifenlose mit einer kurvigen Brush Script vereint. Außerdem gibt es – ideal fürs Coden – eine Monospaced-Variante und für alles schöne Italics. Das Web ist heute ein lebendiger und dynamischer Ort für Typografie, entsprechend braucht man eine Schrift, die sich jeder Situation anpasst – für mich ist das die Recursive. Leider sind alle Projekte, in denen ich sie verwende, noch im Frühstadium, aber die Websites  https://sia.codes/posts/webmentions-eleventy-in-depth  und  www.rochelleamour.com  nutzen alle Varianten, auch die für Code.

Roel Nieskens, Developer und Color-Font-Experte, Nederweert
https://pixelambacht.nl  

 

 

 

20 Schriften fürs UI Design und Coding

Lesbare und iconreiche Schriften

1. Niko von Ludwig Uebele. Humanis­tische Sans Serif mit exzellenter Lesbarkeit. 54 Schnitte, Einzelschnitt knapp 50 Euro.
www.ludwigtype.de

2. Protipo von Veronika Burian und José Scaglione. Vier Breiten, viele Icons, variabler Font verfügbar. 52 Schnitte, Einzelschnitt rund 35 Dollar.
www.type-together.com

3. Ivar von Göran Söderström. Serifenschriftfamilie mit den Varianten Text, Headline und Display. 24 Schnitte, Einzelschnitt etwa 39 Euro.
https://lettersfromsweden.se

4. Logical: Lesbar und mit vielen Icons. Die intelligente Schriftfamilie von Edgar Walthert ist warm, freundlich und verfügt über jede Menge Icons und Dingbats. 16 Schnitte, Einzelschnitt knapp 50 Euro
www.boldmonday.com

5. Elena von Nicole Dotin. Moderne Serifenschrift für Lesetexte. Acht Schnitte, Einzelschnitt etwa 39 Dollar.
https://processtypefoundry.com

Indra Kupferschmids Fontempfehlungen fürs UI Design unter https://is.gd/ui_fonts

Multiplex-Fonts

1. Halvar: Multiplex Font. Die serifenlose Riesenfamilie Halvar der Foundry Typemates gibt es in den Varianten Eng, Mittel und Breit – insgesamt 81 Schnitte. Dabei handelt es sich um Multiplex-Fonts, das heißt, ein Buchstabe ist über alle Schnitte gleich breit – sehr praktisch für nachträgliche Änderungen im Layout. Von Jakob Runge, Nils Thomsen und Lisa Fischbach. 81 Schnitte, Einzelschnitt knapp 60 Euro.
www.typemates.com

2. Action Condensed von Erik van Blokland. Vier Strichstärken in jeweils drei Abstufungen (Grades). 24 Schnitte, Einzelschnitt etwa 50 Dollar.
https://commercialtype.com

3. Sinews Sans von Jakob Runge. Industrielle Physis, humanistischer Charakter. 14 Schnitte, Einzelschnitt knapp 60 Euro.
www.typemates.com

4. FF Hertz von Jens KutÍlek. Serifenschrift mit geringem Kontrast. Zwölf Schnitte, Einzelschnitt knapp 60 Euro.
www.myfonts.com

5. Apud von Dino dos Santos. Eng laufende Serifenschrift mit eckigen Punkten. Acht Schnitte, Einzelschnitt rund 20 Euro.
www.dstype.com

Noch mehr dicktengleiche Fonts unter https://is.gd/identi_equal  und  https://is.gd/fontshop_uniwidth

Monospaced Fonts fürs Coding

1. Nitti von Pieter van Rosmalen. Breite Sprachunterstützung. Zwölf Schnitte, Einzelschnitt knapp 60 Euro.
www.boldmonday.com

2. Gintronic: Monospaced fürs Coding.Mit der Gintronic von Mark Frömberg ermüden die Augen beim Coden nicht so schnell, da sich die Buchstaben sehr gut voneinander unterscheiden. Die freundliche, wenig technisch aussehende Schrift sieht auch in Displayanwendungen toll aus. Zwölf Schnitte, Einzelschnitt rund 50 Euro.
https://markfromberg.com

3. Dank Mono von Phil Plückthun. Mit Ligaturen und einer Italic-Variante. Zwei Schnitte, zusammen circa 40 britische Pfund.
https://dank.sh

4. Monoid von Andreas Larsen. Lesbar und kompakt mit extragroßen Satzzeichen. Vier Schnitte, Open Source.
https://larsenwork.com/monoid

5. Hack von Source Foundry. Mit vielen Alternativzeichen individualisierbar. Vier Schnitte, Open Source.
https://sourcefoundry.org/hack

Variable Fonts

1. IBM Plex Sans von Bold Monday und Mike Abbink. Zeitlos, prägnant und freundlicher als die Helvetica. Achsen: Weight und Width. Open Source.
https://is.gd/github_IBM

2. FS Untitled von Jason Smith. Modern und pixelfreundlich. Achse: Weight. Etwa 320 britische Pfund.
www.variable-fonts.com

3. Marble von Alessia Mazzarella und Vaibhav Singh. Moderne, klare Serifenlose mit freundlichem Charakter. Achsen: Weight, Width und Optical Size. Circa 400 Euro.
www.asterisktype.com

4. FS Industrie: Variable Font. Die Fontsmith-Schrift gestalteten Phil Garnham und Fernando Mello. Es ist eine funktionale Serifenlose, inspiriert von technischen deutschen Schriften aus den 1930er Jahren. Achsen: Size, Weight und Width. Etwa 600 britische Pfund. zu beziehen über Fontsmith.
www.variable-fonts.com

5. Nocturno Stencil von Nikola Djurek. Stencil-Variante zur kalligrafischen Nocturno. Achsen: Stencil und Weight. Etwa 150 Euro.
www.typotheque.com