Schriften im Web: von zehn Systemschriften zu freier Typografie

Kaum ein Bereich des Webdesigns hat sich so grundlegend gewandelt wie die Typografie. Als dieser Beitrag 2006 zuerst erschien, war die Auswahl an Schriften für Webseiten auf ein knappes Dutzend beschränkt – und zwar auf die, die zufällig auf dem Rechner des Besuchers installiert waren. Wir haben ihn erhalten und um den heutigen Stand ergänzt.

Die Ausgangslage von damals

Der zentrale Satz der ursprünglichen Fassung lautete: „Auf Webseiten werden nur die Schriften dargestellt, die auch auf dem System des jeweiligen Users gefunden werden können.“ Das war die harte Grenze. Wer eine Schrift benutzte, die der Besucher nicht hatte, bekam eine Standardschrift zu sehen – oft eine völlig andere Anmutung.

In der Praxis blieben damit etwa zehn brauchbare Schriften, die auf Windows und Mac gleichermaßen vorhanden waren: Arial, Verdana, Georgia, Times New Roman, Trebuchet MS, Tahoma, Courier New und ein paar weitere. Daraus folgten die Empfehlungen der damaligen Zeit:

• Serifenlos für den Bildschirm. Bei den niedrigen Auflösungen der damaligen Monitore verschmierten Serifen zu einem Grauschleier. Im Druck galt die umgekehrte Regel.
• Schriftgröße in Prozent oder em, niemals in Pixel. Der Internet Explorer 6 konnte in Pixel angegebene Schrift nicht vergrößern – wer px verwendete, sperrte sehbehinderte Nutzer faktisch aus.
• Mindestens 75 % beziehungsweise 0,8em für den Fließtext.

p {
  font-size: 75%;
  font-family: Verdana;
  color: #000000;
}

Was sich geändert hat

Beliebige Schriften per @font-face

Seit rund 2010 lassen sich Schriften mit der Seite ausliefern. Die Systemabhängigkeit ist damit aufgehoben:

@font-face {
  font-family: "Meine Schrift";
  src: url("/fonts/meineschrift.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "Meine Schrift", system-ui, sans-serif;
}

Wichtig ist font-display: swap: Damit zeigt der Browser den Text sofort in der Ersatzschrift und tauscht später um, statt ihn bis zum Laden der Schrift unsichtbar zu lassen.

Pixel sind wieder erlaubt

Die alte Warnung vor px ist überholt. Moderne Browser skalieren die gesamte Seite, nicht nur die Schrift – die Zugänglichkeitslücke von damals gibt es nicht mehr. Für Fließtext hat sich trotzdem rem durchgesetzt, weil es die Nutzereinstellung für die Basisschriftgröße respektiert:

html { font-size: 100%; }        /* respektiert die Browsereinstellung */
body { font-size: 1.125rem; }    /* etwa 18px bei Standardeinstellung */

Und die Empfehlung von 0,8em ist nach heutigem Verständnis deutlich zu klein. Für Fließtext gelten 16 bis 20 Pixel als sinnvoller Bereich.

Serifen sind rehabilitiert

Der Rat „im Web immer serifenlos“ stammt aus der Zeit von 72-dpi-Röhrenmonitoren. Auf heutigen hochauflösenden Displays werden Serifen sauber dargestellt und funktionieren im Fließtext gut. Die Wahl ist damit wieder eine gestalterische statt einer technischen.

Variable Schriften

Eine Schriftdatei kann heute den gesamten Bereich von dünn bis fett stufenlos enthalten. Statt sechs Dateien für sechs Schnitte lädt der Browser eine:

@font-face {
  font-family: "Meine Schrift";
  src: url("/fonts/meineschrift-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
}

h1     { font-weight: 780; }
strong { font-weight: 620; }

Systemschriften als bewusste Wahl

Interessanterweise ist der Ansatz von damals zurück – diesmal freiwillig. Wer keine Schrift laden will, nutzt die des Betriebssystems und spart die Ladezeit vollständig:

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Was unverändert gilt

Bei allem technischen Wandel sind die Grundsätze der ursprünglichen Fassung erstaunlich stabil geblieben:

• Lesbarkeit vor Geschmack. Die schönste Schrift nützt nichts, wenn der Text anstrengend zu lesen ist.
• Immer eine Ersatzschrift angeben. Der Grund hat sich geändert – heute geht es um Ladefehler statt fehlende Installation – die Notwendigkeit nicht.
• Nicht zu klein. Der konkrete Wert ist gestiegen, das Prinzip gilt.
• Wenige Schriften pro Seite. Zwei genügen fast immer, eine reicht oft.

Was heute zusätzlich zählt

• Ladezeit. Jede Schriftdatei kostet Zeit. Nur die tatsächlich genutzten Schnitte einbinden, im Format WOFF2, und den Zeichensatz auf die benötigten Sprachen begrenzen.
• Layoutsprünge vermeiden. Wenn die Ersatzschrift deutlich anders proportioniert ist, springt das Layout beim Umschalten. size-adjust und ascent-override gleichen das aus.
• Zeilenlänge. 60 bis 80 Zeichen pro Zeile lesen sich am angenehmsten – ein Punkt, den erst das responsive Webdesign wirklich auf die Tagesordnung gebracht hat.

Fazit

Aus einer technischen Beschränkung auf ein Dutzend Systemschriften ist eine gestalterische Freiheit geworden. Die Empfehlungen von 2006 sind dort überholt, wo sie technische Zwänge beschrieben – und dort gültig geblieben, wo sie von Lesbarkeit handelten.

Bei Typografie und Gestaltung Ihrer Website beraten wir Sie als Webdesign-Agentur gerne.