Klare serifenlose Fonts für App-Oberflächen
Serifenlose Schriftfamilien mit offener Lizenz, die in Buttons, Menüs, Tabellen und Einstellungsseiten gut lesbar bleiben und die Strichstärken mitbringen, die eine Oberfläche braucht.
Save changes
Eine Oberfläche verlangt von einer Schrift mehr als eine Überschrift. Der größte Teil ihres Textes ist kurz und klein: Beschriftungen mit 12 oder 13 Pixeln, Tabellenzellen, Hinweiszeilen unter einem Feld. Bei diesen Größen kommt es auf offene Öffnungen in Buchstaben wie a, e und s an, auf eine großzügige x-Höhe und auf Ziffern, die sich leicht unterscheiden lassen. Ein großes I, ein kleines l und die Ziffer 1 sollten in einem Passwortfeld nicht gleich aussehen.
Das Spektrum der Strichstärken ist fast ebenso wichtig. Ein Produkt braucht meist eine Regular für den Fließtext, eine Medium oder SemiBold für Buttons und eine Bold für Hervorhebungen, jeweils mit einem Unterschied, den man auf einen Blick erkennt. Familien mit variabler Stärkenachse erlauben es, genaue Zwischenstufen zu wählen, statt sich mit dem nächstgelegenen benannten Schnitt zu begnügen. Kursive Schnitte sind in Oberflächen weniger wichtig als in Artikeln, deshalb stehen hier auch einige Familien ohne Kursive, die entsprechend gekennzeichnet sind. Erscheint dein Produkt in mehreren Sprachen, prüfe die bei jeder Familie vermerkte Schriftsystem-Abdeckung, bevor du dich festlegst.
-
Inter
Für Bildschirme gezeichnet, mit neun Strichstärken, Kursiven und einer Achse für die optische Größe, die die Buchstaben zwischen kleinen und großen Größen anpasst.
-
Roboto
Neun Strichstärken mit Kursiven plus eine Breitenachse, sodass eine Familie dichte Tabellen, Fließtext und große Titel abdeckt.
-
Figtree
Für Web- und Mobile-Apps gemacht: sieben Strichstärken von Light bis Black mit Kursiven auf einer variablen Achse.
-
DM Sans
Geometrische Buchstaben mit geringem Kontrast und einer Achse für die optische Größe von 9 bis 40, für Beschriftungen und Überschriften gleichermaßen.
-
Plus Jakarta Sans
Offene Punzen und eine etwas hohe Kleinbuchstabenhöhe halten kleine Beschriftungen lesbar; sieben Strichstärken von ExtraLight bis ExtraBold mit Kursiven.
-
Manrope
Eine variable Stärkenachse von ExtraLight bis ExtraBold mit Kyrillisch und Griechisch für mehrsprachige Produkte; nur aufrechte Schnitte.
-
IBM Plex Sans
Sieben Strichstärken mit Kursiven und eine Breitenachse, die die Buchstaben für kompakte Panels verschmälert.
-
Source Sans 3
Als Oberflächenschrift ohne Serifen entworfen: acht Strichstärken von ExtraLight bis Black mit Kursiven, Kyrillisch und Griechisch.
-
Work Sans
Abgestimmt auf Bildschirmtext von 14 bis 48 Pixeln, in neun variablen Strichstärken mit Kursiven.
-
Ubuntu
Für eine Desktop-Oberfläche gemacht und von Hand für Bildschirme gehintet; vier Strichstärken mit Kursiven.
-
Nunito Sans
Vier variable Achsen, darunter optische Größe und Höhe der Kleinbuchstaben, erlauben es, die Dichte anzupassen, ohne die Familie zu wechseln.
-
Geist
Hohe Kleinbuchstaben und Punzen, die selbst in Black offen bleiben, sodass auch fette Beschriftungen klar lesbar sind; neun Strichstärken mit Kursiven und Kyrillisch.
-
Public Sans
Eine neutrale serifenlose Schrift für ein staatliches Designsystem, in neun variablen Strichstärken mit Kursiven.
-
Onest
Liegt zwischen geometrisch und humanistisch, mit Buchstaben, die in kleinem Navigationstext unterscheidbar bleiben sollen; Thin bis Black mit Kyrillisch, nur aufrechte Schnitte.
-
Albert Sans
Fast kreisrunde Bäuche und nahezu gleichmäßige Striche in neun Strichstärken mit Kursiven; nur Latein, mit vollständigen türkischen und polnischen Buchstaben.
-
Be Vietnam Pro
Auf Technikprodukte ausgerichtet, mit vorrangig gezeichneten vietnamesischen Diakritika; neun Strichstärken mit Kursiven als statische Dateien.
-
Hanken Grotesk
Neun variable Strichstärken mit Kursiven, abgestimmt auf Beschilderung, Bücher und Oberflächen.
-
Wix Madefor Text
Der Textschnitt eines Produkt-Schriftsystems, für Oberflächen gebaut: fünf Schnitte mit Kursiv und Kyrillisch.
Die Schriftproben laden von jeder Familie ein lateinisches Basis-Subset. Jede Familie hier hat eine offene Lizenz. Auf ihrer Seite stehen die Bedingungen und die Originaldateien.
Fragen zu Klare serifenlose Fonts für App-Oberflächen
Kann ich diese Fonts in einer kommerziellen App ausliefern?
Jede Familie hier steht unter einer offenen Lizenz, meist der SIL Open Font License. Sie erlaubt die Nutzung in kommerziellen Produkten und das Einbetten in Apps. Der Lizenztext liegt jedem Download bei; die genauen Bedingungen stehen auf der Seite der jeweiligen Familie.
Sollte eine Oberfläche einen Variable Font oder statische Dateien verwenden?
Eine variable Datei liefert alle Strichstärken in einem Download und erlaubt Zwischenwerte, was hilft, wenn ein Designsystem eine 450 oder eine 550 braucht. Statische Dateien bleiben eine solide Wahl, wenn du nur zwei oder drei Strichstärken einsetzt.
Brauche ich Kursive für Oberflächentexte?
Selten. Oberflächen setzen für Hervorhebungen auf Strichstärke und Farbe. Kursive werden nützlich, wenn das Produkt längere Inhalte wie Artikel oder Dokumentation in derselben Schriftfamilie zeigt.
Wie kombiniere ich eine serifenlose Oberflächenschrift mit einem Code-Font?
Mehrere der hier aufgeführten Familien haben eine dicktengleiche Schwester mit denselben Proportionen. Mit ihr bleiben Höhen und Strichstärke zwischen Fließtext und Code einheitlich.