Typografie im Web: Lizenzen, Laden, Lesbarkeit

Die kurze Antwort: drei Dinge, die im Print-CD selten stehen. Eine Lizenz, die den Einsatz auf einer Website erlaubt. Ein Laden, das schnell ist und keine Besucherdaten an Dritte schickt. Und Regeln für Größe, Zeilenlänge, Zeilenabstand und Kontrast, damit der Text auf jedem Bildschirm lesbar bleibt.

Wenn Sie uns das Corporate Design Ihres Kunden schicken, klären wir alle drei, bevor wir gestalten. Meistens kommt die Hausschrift mit ins Web. Manchmal ist eine Systemschrift oder eine Schrift mit offener Lizenz die bessere Wahl, etwa wenn die Webfont-Lizenz teuer ist oder die Hausschrift für lange Texte am Bildschirm schlecht funktioniert. Diese Website zum Beispiel nutzt Avenir, wo sie auf dem Gerät vorhanden ist, und lädt sonst Nunito Sans vom eigenen Server, ohne externe Dienste.

Lizenz. Eine Schrift, die Ihr Kunde für Drucksachen gekauft hat, darf er nicht automatisch auf seiner Website einsetzen. Desktop- und Web-Lizenzen sind bei vielen Schriftanbietern getrennte Produkte; Monotype etwa beantwortet die Frage, ob eine Desktop-Lizenz für die Website reicht, mit einem klaren Nein ^[8]. Die Lizenz für die Hausschrift liegt bei Ihrem Kunden; wir prüfen vor dem Bau, ob sie das Web abdeckt, und sagen Ihnen, was fehlt. Eine Alternative sind Schriften unter der SIL Open Font License, derzeit in Version 1.1: Sie dürfen auf Websites verwendet, verändert und weitergegeben werden, ein Hinweis auf die Herkunft ist nicht nötig ^[7]. Bei manchen Schriften ist für eine veränderte Fassung ein neuer Name vorgeschrieben ^[7].

Zu unseren eigenen Werkzeugen gilt: Die Lizenzen für unsere Basis-Werkzeuge sind in der Wartung enthalten, ohne Wartung bis zum Launch; auf Wunsch bauen wir auch Lizenzen Ihres Kunden oder Ihrer Agentur ein. Die Statamic-Pro-Lizenz läuft auf Ihren Kunden und wird separat verrechnet. Schriftlizenzen aus dem Corporate Design Ihres Kunden sind davon unberührt.

Datenschutz. Das Landgericht München I hat am 20. Januar 2022 entschieden (3 O 17493/20), dass ein Websitebetreiber das Persönlichkeitsrecht eines Besuchers verletzt, wenn er dessen dynamische IP-Adresse beim Aufruf der Seite ohne Zustimmung an Google weitergibt, weil die Schrift von Google-Servern geladen wird ^[1]. Das Gericht verurteilte den Betreiber zur Unterlassung und zu 100 € Schadenersatz ^[1]. Einen Rechtfertigungsgrund sah es nicht, weil sich Google Fonts auch nutzen lassen, ohne dass beim Aufruf eine Verbindung zu einem Google-Server entsteht ^[1]. Das ist ein Einzelurteil eines deutschen Landgerichts. Für uns ist es Grund genug, Schriften in der Regel vom eigenen Server zu laden. Orientierung, keine Rechtsberatung.

Selbst gehostet heißt nicht automatisch schneller. web.dev hält fest, dass das Selbst-Hosting auf dem Papier eine Verbindung zu einem Drittanbieter spart, der Unterschied in der Praxis aber weniger eindeutig ist ^[2]. Unser Grund für das Selbst-Hosting ist der Datenschutz; das Tempo holen wir über andere Stellschrauben.

Als Format verwenden wir WOFF2. Es ist das neueste, von Browsern am breitesten unterstützte Format und komprimiert laut web.dev rund 30 % besser als WOFF ^[2]. Wir laden nur die Schnitte, die das Design wirklich braucht, meist zwei bis drei, und nur die Zeichen, die die Sprachen der Website verwenden; über unicode-range lädt der Browser eine Datei nur, wenn die Seite passende Zeichen enthält ^[2].

Für das Verhalten beim Laden gibt es zwei Wege. Mit font-display: optional wird Text höchstens 100 Millisekunden zurückgehalten und es gibt keinen Sprung durch den Schriftwechsel, dafür bleibt die Webfont weg, wenn sie zu spät kommt ^[2]. Mit font-display: swap erscheint Text sofort in einer Ersatzschrift, die Webfont übernimmt danach; kommt sie spät, springt die Seite sichtbar ^[2]. Wir wählen je nach Projekt und gleichen die Ersatzschrift in Größe und Laufweite an, damit der Wechsel kaum auffällt.

Für Fließtext wählen wir in der Praxis 16 bis 20 Pixel, abhängig von Schrift und Zielgruppe. Systemschriften für Oberflächen eignen sich laut MDN nicht für lange Textabsätze; für Fließtext empfiehlt MDN eine Schrift, die nicht für Bedienoberflächen gedacht ist ^[3].

Die Zeilenlänge halten wir bei höchstens 80 Zeichen. Das ist die Grenze, die das W3C auf der höchsten Stufe AAA nennt, zusammen mit einem Zeilenabstand von mindestens dem 1,5-Fachen und Text, der nicht im Blocksatz steht ^[4]. Pflicht auf Stufe AA ist, dass nichts verloren geht, wenn Nutzerinnen und Nutzer Zeilenhöhe, Absatzabstand, Buchstaben- und Wortabstand selbst erhöhen ^[5]. Wer Textfelder auf eine feste Höhe gestaltet, verletzt das schnell.

Beim Kontrast gilt 4,5:1 für normalen Text und 3:1 für große Schrift; als groß gelten 18 Punkt oder 14 Punkt fett, im Browser etwa 24 und 18,5 Pixel ^[6]. Dünne Schnitte wirken in Gestaltungsprogrammen elegant und verlieren am Bildschirm schnell an Kontrast. Mehr dazu, mit einem Prüfer zum Selbermessen, im Artikel Kontrast, Farben, Schrift.