App und Font: Wie wählt man die richtige Schriftart?

App und Font: Wie wählt man die richtige Schriftart?

Ciro Esposito Veröffentlicht am 10/1/2018

In seinem bekannten Werk The Elements of Typographic Style1 beschreibt der kanadische Autor und Typograf Robert Bringhurst, was Typografie für den Leser leisten sollte:

  • dazu einladen, sich dem Text zu nähern
  • Tonfall und Bedeutung des Textes aufzeigen
  • Textstruktur und -aufbau verdeutlichen
  • eine Verbindung zwischen dem Text und den anderen Elementen der Seite herstellen
  • einen Zustand aufmerksamer Ruhe schaffen – der Idealzustand beim Lesen

Diese „Leistungen“ sind sowohl einem gedruckten Text als auch einem Text, der am Bildschirm angezeigt wird, von Nutzen.

Ellen Lupton räumt in ihrem Buch Thinking with Type mit der gängigen Meinung auf, dass es anstrengender sei, am Bildschirm zu lesen. Eine Studie aus den 1980er-Jahren über die Mensch-Maschinen-Interaktion erbrachte den Nachweis, dass „ein schwarzer Text auf weißem Hintergrund sowohl am Bildschirm als auch auf Papier mit der gleichen Effizienz gelesen werden kann“2 — und zu jener Zeit war die Auflösung der diversen Monitore weitaus geringer als heute. Was sich beim Lesen digitaler Inhalte jedoch verändert, ist die Erwartungshaltung. „Der digitale Leser verspricht sich ‚Produktivität‘, nicht Kontemplation“3. Beim Lesen digitaler Texte durchsucht der Leser die Bildschirmseite permanent nach einem Link (oder teilbaren Inhalten), wohingegen er sich beim Lesen gedruckter Texte Zeit nimmt und weitaus langsamer vorgeht. Der Informationsträger erschwert das Lesen langer Texte keineswegs. Das gilt ganz besonders für Texte, die dafür gedacht und gemacht sind, gelesen und nicht nur betrachtet zu werden (im Englischen spricht man von readability (Lesekomfort) und legibility (Lesbarkeit)).

Die Bedeutung der Lesbarkeit

Die Lesbarkeit eines Texts hängt von einer Vielzahl von Faktoren ab, die Wahl der Schriftart ist nur einer davon. Entscheidend sind auch folgende Punkte:

  • Schriftgrad
  • Buchstabenabstand (Laufweite) und Wortabstand
  • Zeilenlänge (Satzbreite)
  • Zeilenabstand

Diese Faktoren beeinflussen sich gegenseitig. Je länger eine Zeile, desto größer muss der Schriftgrad und in der Folge der Zeilenabstand sein. Textgröße und Zeilenabstand sind eng mit der Schriftart verknüpft: Einige Fonts erfordern einen größeren Zeilenabstand, andere einen kleineren.

Das Typografiespiel The Equilateral Triangle of a Perfect Paragraph
Das Typografiespiel The Equilateral Triangle of a Perfect Paragraph

Um die Beziehung zwischen Textgröße, Zeilenlänge und Zeilenabstand darzustellen, nutzte der slowenische Designer Matej Latin das gleichseitige Dreieck quasi als Metapher und entwickelte The Equilateral Triangle of a Perfect Paragraph. Mit Hilfe dieses Onlinespiels lässt sich die Erstellung des „perfekten Absatzes“ üben, und man sieht in Echtzeit, was geschieht, wenn einer der Faktoren nicht richtig eingestellt ist.

Die Grundregeln der Typografie (und generell auch des Grafikdesigns) gelten gleichermaßen für Papier und Bildschirm, wobei sowohl der Kontext als auch die Verwendung durch den Leser immer berücksichtigt werden müssen. Liest man einen Text am Bildschirm, geht man häufig etwas flüchtiger vor. Handelt es sich dann noch um das Display eines Smartphones, nimmt die Flüchtigkeit weiter zu. Das Wissen um diese Prozesse hilft dabei, passende typografische Entscheidungen zu fällen.

App-Konzeption: Auf den Font kommt es an!

Bei der Konzeption einer Smartphone-App entwirft man für ein Betriebssystem, das auf ganz eigenen Regeln, Funktions-, Layout- und Designgrundsätzen basiert. Die populärsten Betriebssysteme sind aktuell Android und iOS. Für beide gibt es einen ausführlichen Styleguide, in dem unter anderem die idealen Abmessungen der oberen Leiste, der seitlichen Leiste und auch der Schriftart enthalten sind.

Beispiel: Anzeige der Basis-Navigationselemente von Android (links) und iOS (rechts)
Beispiel: Anzeige der Basis-Navigationselemente von Android (links) und iOS (rechts)

Die Navigation einer Android-App (die gemäß den Richtlinien von Google programmiert wurde) klappt sich zwischen der oberen Leiste und dem Hamburger-Menü aus — das Icon selbst befindet sich oben links. Bei einer iOS-App hingegen klappt sie sich von unten aus (die Tab-Bar erscheint). Beide Betriebssysteme verfügen über einen Standard-Font: Roboto im Fall von Android, San Francisco bei iOS4.

Auswahl des Fonts für die App

Die Verwendung des Standard-Fonts des Betriebssystems hat einige Vorteile (keine Lizenzkosten, App-Größe), ist aber keineswegs die perfekte Lösung für alle. Branding, Visual Identity und der Inhalt selbst erfordern oft andere Lösungen. Die Faktoren, die bei der Wahl einer Schrift für eine Bildschirmanwendung zu berücksichtigen sind, unterscheiden sich nur unwesentlich von jenen, die für Printprodukte gelten. Folgendes ist zu bedenken:

  • Verfügbare Anzahl an Schriftstärken
  • Mittellänge bzw. x-Höhe (Höhe eines Kleinbuchstabens ohne Ober- und Unterlänge)
  • Kontrast (Unterschied der Strichstärke von Haar- und Grundstrichen eines Buchstaben)
  • Buchstabenform (lassen sich Buchstaben wie e und c kleines l und großes I problemlos voneinander unterscheiden)
  • Buchstabenbreite

Je höher die Kleinbuchstaben, desto besser ist die Lesbarkeit, insbesondere bei kleinen Größen. Es versteht sich von selbst, dass dieses Merkmal auf einem kleinen Display, wie es bei einem Smartphone der Fall ist, eine tragende Rolle spielt. Und auch ein guter Kontrast der Buchstaben ist wichtig.

Schaut man sich einige der bekanntesten Apps mit den höchsten Downloadzahlen an, die sowohl im Play Store als auch im App Store erhältlich sind, erkennt man, dass meistens der Standard-Font zum Einsatz kommt. Bei Apps mit mehreren Millionen Downloads sind die Lizenzgebühren für die Font-Nutzung ein nicht zu vernachlässigender Faktor. Im Allgemeinen sind die Gebühren für eine App sehr viel höher als die für ein Printprodukt oder eine Webanwendung. Will man in diesen Fällen also weder den Standard-Font noch eine Gratis-Schriftart verwenden, empfiehlt sich eine eigene Schriftart. Vor kurzem haben sowohl Netflix als auch Airbnb ihren jahrelang verwendeten Font (Netflix setzte auf Gotham, Airbnb auf Circular) durch eine proprietäre Schriftart ersetzt.

Proprietäre Fonts: Persönlichkeit und Lesbarkeit

Das Inhouse-Designteam von Netflix entwickelte gemeinsam mit der englischen Type Foundry Dalton Maag die Netflix Sans, Airbnb, ebenfalls in Zusammenarbeit mit Dalton Maag, den Font Cereal. In den Pressemitteilungen sowohl von Netflix als auch Airbnb, in denen die neuen Fonts vorgestellt wurden, tauchte ein Wort immer wieder auf: „Lesbarkeit“. Ziel der Entwicklung war eine Schriftart, durch die die Marke heraussticht, zudem sollte sie am Bildschirm und auf Papier gut lesbar sein. Beide Unternehmen sind auch offline stark präsent, was mit traditionellen Werbemaßnahmen zusammenhängt, allerdings nicht ausschließlich. So gibt Airbnb beispielsweise eine eigene gedruckte Zeitschrift heraus.

Der neue Netflix-Font
Der neue Netflix-Font
Netflix Sans im Einsatz
Netflix Sans im Einsatz
Cereal, der Font von Airbnb
Cereal, der Font von Airbnb
Anwendungsbeispiele für den Airbnb-Font Cereal
Anwendungsbeispiele für den Airbnb-Font Cereal

VSCO, eine andere App, die größten Wert auf das Design legt, zielte bei einem der jüngsten Rebrandings in die gleiche Richtung und entwickelte gemeinsam mit der schwedischen Type Foundry Letters from Sweden den Font VSCO Gothic.

VSCO Gothic
VSCO Gothic
VSCO Gothic
VSCO Gothic

Frei nach den Worten von Robert Bringhurst erfüllt die beste Schriftart für eine App (eine Website oder ein Buch) folgende Kriterien: Erstens ist es ein per se guter Font. Zweitens ist er ideal auf den Anwendungzweck „App“ zugeschnitten, d. h. er lässt sich auch über längere Zeit bequem und ermüdungsfrei lesen. Und drittens passt er perfekt zum jeweiligen Thema.

Dabei darf man nicht vergessen, dass die Wahl des Fonts nur den ersten Schritt darstellt. Der gelungene Einsatz der Schriftart entscheidet über den Erfolg des Grafikprojekts, ganz gleich ob es für den Bildschirm oder den Printbereich gedacht ist.

Kostenlose Alternativen

Zum Schluss dieses Artikels möchte ich noch zwei Gratis-Fonts vorstellen, die sich hervorragend als Alternativen für die Standardschriftarten von iOS und Android eignen. Da wäre einmal IBM Plex, ein Open-Source-Font, der kürzlich von IBM entwickelt wurde. Drei Versionen sind verfügbar: Monospace, serifiert und serifenlos (die serifenlose Variante gibt es auch condensed). Sämtliche Versionen sind in acht verschiedenen Schriftstärken erhältlich (sowohl in normal als auch kursiv).

IBM Plex
IBM Plex

Die andere ist Inter UI, die von Rasmus Andersson entworfen wurde und in vier Schriftstärken verfügbar ist (sowohl in normal als auch kursiv). Das „Inter UI“-Projekt startete 2016 als Experiment, bei dem es darum ging, einen perfekt lesbaren Font mit sehr kleinen Abmessungen zu erschaffen.

Inter UI, der Font von Rasmus Andersson
Inter UI, der Font von Rasmus Andersson
Anwendungsbeispiele von Inter UI
Anwendungsbeispiele von Inter UI

––––––––––––––––––––––––––––––––

1 Derzeit gibt es keine deutsche Übersetzung von The Elements of Typographic Style; das englische Original ist bei Hartley & Marks Publishers erschienen.

2 Ellen Lupton, Thinking with Type, Abrams & Chronicle Books, 2010 (nur in Englisch erhältlich)

3 Ibidem

4 Der Font San Francisco wurde 2015 von Apple eingeführt. Zuvor war Helvetica die Standardschrift von iOS