The Universal Web

1.1 Schriftstil

Warum die Regel von 2005 – 'am Bildschirm serifenlose Schrift verwenden' – auf hochauflösenden Displays nicht mehr gilt, und was stattdessen zu prüfen ist: x-Höhe, Öffnungen, Buchstabenunterscheidbarkeit und Renderqualität.

6 min read

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

Die Ausgabe dieser Richtlinien von 2005 formulierte hier ihre schroffste Anweisung: Der Bildschirm sei eine feindliche Leseumgebung, also seien serifenlose Schriften zu verwenden. Serifen, so die Warnung, würden bei Textgrößen zu visuellem Rauschen; feine Striche und Nuancen würden nicht dargestellt. Für die Displays jener Zeit war der Rat vernünftig. Für die Displays von heute muss er als Regel ausgemustert und durch die Begründung ersetzt werden, die ihm immer schon zugrunde lag.

Was sich seit 2005 geändert hat

In der ursprünglichen Empfehlung ging es nie wirklich um Serifen. Es ging um Pixel. Auf einem Panel mit 96 DPI rastete eine zwei oder drei physische Pixel lange Serife entweder als plumper Block ins Raster ein oder löste sich in kantengeglätteten Nebel auf. Dünne Striche brachen; gekehlte Kurven wurden zu Treppenstufen. Für den Bildschirm entworfene serifenlose Schriften — Verdana, Tahoma und ihresgleichen, mit robusten, gleichmäßig starken Strichen und großzügiger Zurichtung gezeichnet — umgingen all das. Sie zu empfehlen war defensives Design gegen eine Render-Engine, die keine Serife zeichnen konnte.

Diese Einschränkung hat sich weitgehend aufgelöst. Hochauflösende Displays rendern zwei bis drei Gerätepixel pro CSS-Pixel — genug, um feine Serifen, Strichkontrast und subtile Übergänge mit einer Treue nahe dem Druck darzustellen. Modernes Graustufen-Antialiasing bewältigt bei diesen Dichten Kurven und Diagonalen sauber. Auf solchen Bildschirmen sind eine gut gemachte Textserife und eine gut gemachte Serifenlose in derselben effektiven Größe beide voll leserlich, und die breitere Leseforschung spiegelt das wider: Werden x-Höhe, Größe und Abstände kontrolliert, sind die gemessenen Unterschiede in Lesegeschwindigkeit und Verständnis zwischen Serifen- und serifenlosen Stilen klein und uneinheitlich. Die Variable Serife/Serifenlos erklärt, isoliert von allem, womit sie früher einherging, sehr wenig.

Zwei Vorbehalte verhindern, dass die alte Regel einfach umgekehrt wird. Erstens sind Monitore mit Standardauflösung auf Schreibtischen weiterhin verbreitet, und auf ihnen degradieren zarte Serifen noch immer — jede für Fließtext gewählte Schrift sollte bei 1x-Rendering überprüft werden, wo Hinting-Qualität und Robustheit des Strichs sich nach wie vor bezahlt machen. Zweitens, und für dieses Projekt wichtiger: Der Fall der Sehbehinderung ist nicht der Durchschnittsfall.

Was Leserlichkeit tatsächlich vorhersagt

Wenn die Stilklassifikation als Auswahlkriterium ausscheidet, tritt an ihre Stelle eine kurze strukturelle Checkliste — dieselbe, die in Kapitel 1.0 eingeführt wurde, hier angewandt auf die Wahl zwischen Kandidatenschriften.

Zuerst die x-Höhe. Eine Schrift mit großer x-Höhe wirkt größer und übersteht kleine Grade besser, als ihre nominelle Größe vermuten lässt — unabhängig davon, ob sie Serifen trägt. Viele zeitgenössische Textserifen sind mit x-Höhen gezeichnet, die so großzügig sind wie die jeder Bildschirm-Serifenlosen.

Als Zweites die Öffnungen. Offene Punzen und offene Öffnungen in a, c, e und s bewahren die Buchstabenidentität bei Unschärfe und geringer Sehschärfe. Das verläuft quer zur Klassifikation: Es gibt offene, leserliche Serifenschriften und geschlossene, mehrdeutige serifenlose Schriften. Das Genre der geometrischen Serifenlosen — sehr in Mode — ist ein häufiger Übeltäter, mit nahezu kreisrunden Buchstabenformen, die einander zum Verwechseln ähnlich werden.

Als Drittes die Buchstabenunterscheidbarkeit. Machen Sie den Il1-Test: Setzen Sie das Versal-I, das kleine l und die Ziffer 1 nebeneinander. Viele populäre serifenlose Schriften fallen glatt durch und stellen I und l als identische Striche dar — eine echte Gefahr bei Passwörtern, Codes und Namen. Serifenschriften bestehen den Test ironischerweise meist automatisch, weil Serifen genau diese Buchstaben differenzieren. Prüfen Sie ebenso die Spiegelung von b/d und p/q sowie das Paar r n, das bei enger Zurichtung zu einem m verschmelzen kann.

Zuletzt die Renderqualität. Eine für Interfaces gedachte Textschrift sollte dort getestet werden, wo sie leben wird: in den Zielgrößen, auf High-DPI- wie auf Standardauflösungs-Bildschirmen, im hellen Modus und im Dark Mode. Fonts unterscheiden sich darin, wie sorgfältig ihre Dateien produziert sind — Hinting für die Rasterung bei niedriger Auflösung, Zurichtung in kleinen Graden — und diese handwerkliche Dimension zählt mehr als das Vorhandensein oder Fehlen von Serifen.

Die Buchstaben aegs in einer Serifenschrift und einer Serifenlosen, in Textgrößen etwa gleich leserlich — die wirklichen Prädiktoren sind x-Höhe, Öffnungen, unterscheidbare Buchstaben und Abstände.

Die Nuance bei Sehbehinderung

Für Leserinnen und Leser mit Sehbehinderung behält die Warnung von 2005 in abgemilderter Form echte Geltung. Geringe Sehschärfe wirkt wie ein Unschärfefilter, und unter Unschärfe fällt feines Detail als Erstes zum Opfer. Kontrastreiche Serifendesigns — solche mit sehr dünnen Haarstrichen und zarten Serifen — verlieren ihre dünnen Striche und mit ihnen die Struktur des Buchstabens. Eine robuste, kontrastarme Schrift degradiert gnädiger, und die meisten Schriften, auf die diese Beschreibung zutrifft, sind serifenlose oder Slab-nahe Designs. Auch wenn die kategorische Regel also gefallen ist, bleibt der praktische Schwerpunkt für Fließtext bei Sehbehinderung eine robuste, offene, gleichmäßig gewichtete Schrift — die oft, aber nicht zwingend, eine Serifenlose sein wird.

Die Warnung von 2005 vor ornamentalen und stark stilisierten Schriften für durchgehenden Text besteht ohne Revision fort. Dekorative Schriften opfern die Buchstabenstruktur dem Stil, und wer den geringsten visuellen Spielraum hat, zahlt den höchsten Preis. Der Display-Einsatz in großen Graden ist ein anderer, nachsichtigerer Kontext.

Eine weitere zeitgemäße Anmerkung: Behauptungen, bestimmte Stile seien für Leserinnen und Leser mit Dyslexie universell besser, sollten mit Vorsicht behandelt werden. Spezialisierte Fonts haben in kontrollierten Studien keine konsistenten objektiven Vorteile gezeigt; die Merkmale, die tatsächlich helfen — Buchstabenunterscheidbarkeit, großzügige Abstände, ausreichende Größe — sind in vielen gut gemachten Schriften jeder Klassifikation verfügbar, und vom Nutzer anpassbare Einstellungen helfen mehr als jede einzelne Fontwahl.

In CSS

/* Screen for structure, not classification */
body {
  /* Georgia: large x-height, open apertures, screen-hinted */
  font-family: Georgia, Charter, "Bitstream Charter", serif;
}
.ui {
  font-family: system-ui, sans-serif;  /* the platform's proven face */
}

Empfehlungen

  • Mustern Sie "nur serifenlos" als Regel aus; bewerten Sie Kandidatenschriften stattdessen strukturell.
  • Verlangen Sie für Fließtext eine große x-Höhe, offene Öffnungen und einen gleichmäßigen, moderaten Strichkontrast.
  • Wenden Sie den Il1- und den b/d/p/q-Test an; verwerfen Sie Schriften, deren Buchstaben einander zum Verwechseln ähnlich sind.
  • Meiden Sie in Kontexten, in denen Sehbehinderung kritisch ist, kontrastreiche Designs mit feinen Haarstrichen; bevorzugen Sie robuste, kontrastarme Konstruktionen.
  • Überprüfen Sie das Rendering in realen Größen auf Bildschirmen mit Standardauflösung ebenso wie auf High-DPI-Displays, im hellen Modus wie im Dark Mode.
  • Schließen Sie ornamentale und stark stilisierte Schriften weiterhin vom durchgehenden Text aus.

Weiterführende Literatur