Das Thema Screen-Fonts ist grundlegend, hat sich aber die letzten Jahre drastisch verändert. Trotzdem ein paar Grundregeln, die den Umgang mit Schrift bei Interfacedesign ein wenig unterstützen.
Der Web-Artikel hat ältere Literatur als Basis, trotzdem sei er hier für weitere Details empfohlen.
Eine gute Hilfe für den Einstieg ist immer noch der Typetester, da man hier schnell alle Webfonts testen, einstellen und vor allem visuell analysieren kann.
Was ist anders am Bildschirm?
Das Bild zeigt die Rasterung eines feinen Fonts am Bildschirm. Man sieht, wie schnell Details verschwinden bzw. wieviel Aufwand man treiben muß, um eine analoge Schrift digital hochwertig zu gestalten. Das schafft noch nicht mal MS bei Vista mit ClearType.
Was macht eine gute Interfaceschrift aus?
(Bitte nicht den Begriff Display-Schrift verwenden, der gilt für Zierschriften und stammt aus früheren Zeiten)
Als Einstieg sollen uns 3 Argumente erstmal ausreichen
1. Offene Schriften
Also solche mit deutlichen Punzen (siehe Grafik aus dem designtagbuch). Diese Schriften, z.B. die Verdana, laufen meist breiter, die Tahoma etwas schmaler. Leider sind die visuell “verbraucht”, deshalb sucht man gern was anderes.
Offen, das spricht auch für “unsere” Frutiger und eben auch für die Corbel von Microsoft, die ein Frutiger-Derivat ist. (So wie die Arial von der Helvetica viel geerbt hat). Ähnlich gut eignet sich auch die Myriad.
Was ist mit Serifen? Ja, auch die sind heutzutage gut lesbar, die Georgia ist hier ein gutes Beispiel. Die Bembo jedoch nicht wirklich, aber das liegt wirklich nicht an den Serifen. Trotzdem findet man deutlich mehr sans serif im Interface-Design, ausser wenn man z.B. wie den Text hier in wordpress editiert.
2. große x-Höhe
Auch da sind die Verdana und Trebuchet einfach passend, aber: auch die Comic Sans (ja, ich weiss…) macht hier Punkte.
3. passend zu Produkt und Betrachter
Nun, hier wirds bekanntermaßen schwammig, man sollte jedoch diesen Aspekt nicht ausser acht lassen. Eine technisch anmutende, steif wirkende Schrift wäre für eine spielerische, fröhliche Applikation weniger geeignet.
Technisches und Wahrnehmung
Schrifthöhe
Es gibt auch hier diverse Normen und Richtlinien, als Faustwert hat sich bei ca. 500mm Sehabstand eine minimale Versalhöhe von 4-6mm als gut herausgestellt. Genaueres bspw. hier bei ergo-online. Um diverse Einheiten umzurechnen findet man hier eine kleine Applikation.
Bei Wandmacher (1993) findet sich diese Formel:
Buchstabenhöhe (in mm) = 0,0022 x d + k1 + k2
d = Augenabstand zum Bildschirm in mm
k1 = 1,5 bei günstigen Lesebedingungen
k1 = 4,1 bei ungünstigen Lesebedingungen
k2 = 0 bei normalen Informationen
k2 = 1,9 bei kritischen Informationen
Quelle: Wandmacher, J. (1993). Software-Ergonomie – Mensch Compter Kommunikation – Grundwissen 2. Berlin, New York: Walter de Gruyter. S.21
Farben bitte wie immer behutsam, sparsam oder als Auszeichnung einsetzen.
Kontraste kann man berechnen, meist schafft man es jedoch nicht, mehr als 3-4 Stufen gut erkennbar darzustellen. Diese Varianten würde man ggf. noch für bestimmte Zustände (z.B. bei Schaltflächen) invertieren.
Wichtig: Der Kontrast zum Hintergrund sollte möglichst hoch sein
Die “C-Schriften”
Der Artikel bei den webkrauts zeigt die damals neuen Schriften gut auf. Lesbarkeit gut, Verfügbarkeit sehr gut, Abneigung steigend.
Die gefühlte Lesbarkeit
Hier sei auf den sehr schönen Artikel im designtagebuch von Martin Liebig verwiesen.
Sein Fazit: look&feel geht vor Lesbarkeit.
Typodetails – Anatomie der Buchstaben
Im designtagebuch erschien Anfang 2010 das sehr ruhige und sauber gestaltete Poster. Mal schnell nach dem A1-Drucker schauen…
Noch ein Typo-Poster:
