Texte

Schriftwahl für datendichte Oberflächen

·3 min read

Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.

Die meisten Ratschläge zur Schriftwahl sind für Prosa geschrieben — lange Zeilen aus Kleinbuchstaben, in Ruhe gelesen. Hochperformante Anwendungen leben in einem anderen Regime: Zahlen, die in Spalten überflogen werden, Bezeichner, die genau einmal auf einen Blick gelesen werden, Elf-Pixel-Beschriftungen auf Bildschirmen, die jemand acht Stunden lang beobachtet. Eine Schrift, die in einem Essay bezaubert, kann auf einem Trading-Bildschirm regelrecht gefährlich sein. Hier ist, was man stattdessen abklopfen sollte.

Erst die Ziffern, dann die Buchstaben

In einer datendichten Oberfläche leisten die Ziffern die meiste Arbeit, also prüfe sie vor allem anderen:

  • Tabellenziffern sind nicht verhandelbar. Jede Ziffer gleich breit, damit die Spalten halten und ein tickender Wert seine Nachbarn nicht zittern lässt. Das CSS ist eine Zeile — font-variant-numeric: tabular-nums lining-nums — aber nur, wenn die Schrift das Feature hat. Viele modische Schriften haben es nicht.
  • Versalziffern, keine Mediävalziffern. Mediävalziffern mit ihren Ober- und Unterlängen sind in Prosa wunderschön und in einer Tabelle Chaos.
  • Gewichtsstabile Breiten. Wenn die fetten Ziffern breiter sind als die regulären, sprengt jede hervorgehobene Zelle ihre Spalte. Die besten Interface-Schriften zeichnen alle Schriftschnitte auf einer Breite — und die Grade-Achse eines Variable Fonts (Gewicht ohne Breitenänderung) ist die sauberste Lösung von allen, wie das Universal-Web-Kapitel zu Variable Fonts behandelt.
Dieselbe Zahlenspalte in proportionalen Ziffern, versetzt, und in tabellarischen Versalziffern, die die Ausrichtung halten.

Das Interface-Alphabet

Oberflächen sind voller Zeichenketten, die genau einmal korrekt gelesen werden müssen: Bestellnummern, Git-Hashes, API-Schlüssel, Beträge. Für sie ist die Menge der verwechselbaren Zeichen das ganze Spiel — 0/O, 1/l/I, 5/S, 8/B. Teste sie in Produktionsgröße, bevor du auch nur eine Schriftmusterseite ansiehst. Die Schriften, die bestehen, werben meist damit: durchgestrichene oder gepunktete Nullen, l mit Fuß, geöffnete Punzen. Das ist dasselbe Argument aus der Anatomie der Leserlichkeit, das das Universal Web für sehbehinderte Leser anführt — eine Oberfläche bei 11px versetzt jeden Nutzer in einen Zustand geringer Sehschärfe.

Die verwechselbaren Zeichen — 0O, 1lI, 5S — mehrdeutig in einer generischen Sans, unterscheidbar in einer für Interfaces gezeichneten Schrift.

Die Checkliste

Was ich mit einer Kandidatenschrift tatsächlich durchspiele, bevor sie in einer Anwendung ausgeliefert wird:

1. Eine echte Tabelle setzen — mit Live-Daten, tabular-nums aktiviert — und einem tickenden Wert zusehen. Nichts darf sich bewegen außer den Ziffern.
2. Der Alphabet-Test: 0O 1lI 5S 8B rn/m in der kleinsten Produktionsgröße, auf beiden Themes.
3. x-Höhe bei 11–13px. Schriften mit kleiner x-Höhe zerfallen genau dort, wo Interfaces leben. Eine großzügige x-Höhe kauft effektive Größe gratis dazu.
4. Gewicht im Dark Mode. Hell auf Dunkel liest sich einen halben Schriftschnitt fetter; hat die Schrift keine Grade-Achse und keinen leichteren Schnitt zum Ausgleich, wird jede Beschriftung weich. (Das Dark-Mode-Kapitel erklärt die Physik dahinter.)
5. Der Feature-Grep: tnum, lnum, zero, case — prüfe die tatsächlich vorhandenen OpenType-Features, nicht die, die die Marketingseite andeutet.
6. Performance-Gewichtsklasse. All das muss in ein oder zwei WOFF2-Dateien ankommen, klein genug, um die Daten, die sie beschriften, nicht zu blockieren — das Thema des nächsten Essays.

Das Muster in der Checkliste ist das Muster dieser ganzen Disziplin: In Anwendungen bemisst sich Typografie an verhinderten Fehlern pro Pixel, nicht an Schönheit pro Schriftmuster. Wähle die Schrift, die es zehntausend Lesungen in Folge schafft, nicht aufzufallen.