Typographische Fehler auf Webseiten

Text, der über die ganze Fensterbreite läuft, ist der häufigste Fehler überhaupt. Ab etwa 80 Zeichen findet das Auge den Anfang der nächsten Zeile nicht mehr sicher; man liest dieselbe Zeile zweimal oder überspringt eine. Die Zeilenlänge misst man in Zeichen, nicht in Pixeln, weil dieselbe Breite je nach Schrift 50 oder 90 Zeichen fasst.

main { max-width: 32rem; margin-inline: auto; }
/* an drei Breiten nachzählen: 390, 768, 1280 px */

Dreizehn oder vierzehn Pixel stammen aus der Zeit grober Bildschirme und halten sich in vielen Vorlagen bis heute. Lesetext beginnt bei 16 Pixeln, besser bei 18. Der Zeilenabstand gehört dazu: Bei 120 Prozent kleben die Zeilen aneinander, und die Unterlängen der einen stoßen an die Oberlängen der nächsten. Für Lesetext im Web liegt er zwischen 140 und 160 Prozent des Schriftgrads.

html { font-size: 112.5%; line-height: 1.5; }  /* 18 px / 27 px */

Die Tastatur stammt von der Schreibmaschine und kennt ein Anführungszeichen, einen Strich, einen Punkt. Der Satz kennt mehr. Deutsche Anführungszeichen stehen unten und oben, der Gedankenstrich ist länger als der Bindestrich, und die Auslassung ist ein eigenes Zeichen mit eigenem Abstand. Wer das Zollzeichen stehen lässt, zeigt dem Leser, dass niemand den Text nach dem Tippen noch einmal angesehen hat.

q { quotes: "„" "“" "‚" "‘"; }  /* <q> setzt die Zeichen selbst */

Zwischen z. und B. gehört ein Abstand, aber kein ganzer und keiner, an dem die Zeile brechen darf. Dafür gibt es das schmale geschützte Leerzeichen. Dasselbe gilt vor dem Prozentzeichen und in Zahlen ab fünf Stellen. Zwischen Zahl und Einheit, Titel und Name, S. und Seitenzahl steht ein geschütztes Leerzeichen in voller Breite. Fehlt es, landet die 27 am Zeilenende und das px am Anfang der nächsten.

z.&#8239;B.   150&#8239;%   12&#8239;500   <!-- U+202F, schmal -->
27&nbsp;px   S.&nbsp;12   Dr.&nbsp;Forssman   <!-- U+00A0 -->

Eine Falle dabei: Viele Webschriften enthalten das schmale Leerzeichen gar nicht. Der Browser holt es dann aus einer Ersatzschrift, mit fremder Breite. Die Schrift dieser Seite hatte es ebenfalls nicht; es wurde vor dem Einbetten ergänzt, halb so breit wie der Wortabstand.

Deutsch hat lange Wörter. Ohne Silbentrennung springt ein Wort wie Wortzwischenräume als Ganzes in die nächste Zeile und hinterlässt eine halbe leere. Der rechte Rand franst aus, auf dem Telefon besonders. Browser trennen seit Jahren zuverlässig – aber nur, wenn die Seite ihre Sprache nennt. Fehlt lang="de", trennt keiner.

<html lang="de">
p { hyphens: auto; hyphenate-limit-chars: 6 3 3; }
/* Wörter ab 6 Zeichen, mindestens 3 vor und 3 nach der Trennung */

Blocksatz sieht im Entwurf ordentlich aus und im Browser selten. Ein Satzprogramm verteilt den Raum über den ganzen Absatz, der Browser nur über die einzelne Zeile. In schmalen Spalten entstehen Löcher zwischen den Wörtern, die sich über mehrere Zeilen zu hellen Gassen verbinden. Im Web ist Flattersatz mit Silbentrennung die bessere Wahl; unter 600 Pixeln Breite gibt es keine Ausnahme.

p { text-align: start; hyphens: auto; text-wrap: pretty; }

Dreizehn Pixel unter der Überschrift, elf zwischen den Absätzen, dazu ein Zeilenabstand von 1,45: Jeder Wert für sich ist unauffällig. Zusammen sorgen sie dafür, dass keine Zeile mehr dort steht, wo die Zeile daneben steht. Die Abhilfe ist eine einzige Einheit. Der Zeilenabstand wird zum Maß, und jeder senkrechte Abstand ist ein ganzes Vielfaches davon. In den Mustern liegt das Raster als Linie hinter dem Text.

:root { --u: 1.5rem; }                 /* eine Zeile */
h2    { line-height: var(--u); margin-bottom: var(--u); }
p + p { margin-top: var(--u); }        /* oder Einzug, siehe 8 */
img   { height: calc(var(--u) * 8); }  /* Bilder in ganzen Zeilen */

Ein Absatz braucht ein Zeichen, dass er beginnt. Eines. Entweder rückt die erste Zeile ein, oder zwischen den Absätzen bleibt eine Zeile frei. Beides zusammen zerlegt den Text in Brocken und verschwendet ein Viertel der Höhe. Der erste Absatz nach einer Überschrift steht ohne Einzug, denn dort ist der Beginn ohnehin klar.

p     { margin: 0; }
p + p { text-indent: 1.5em; }

Großbuchstaben sind dafür gezeichnet, vor Kleinbuchstaben zu stehen. Stehen sie allein nebeneinander, kleben sie; etwas Sperrung von fünf bis zehn Prozent des Schriftgrads löst das. Der zweite Fehler betrifft Kapitälchen. Verkleinerte Großbuchstaben sind keine: Ihre Striche werden mit verkleinert und wirken neben dem Text dünn und grau. Echte Kapitälchen sind eigene Zeichen in der Schrift, so kräftig wie die Kleinbuchstaben daneben.

.versal { text-transform: uppercase; letter-spacing: .07em; }
abbr    { font-variant-caps: all-small-caps; letter-spacing: .04em; }
/* nur mit einer Schrift, die die Funktion smcp enthält */

Lädt eine Seite nur den normalen Schnitt einer Schrift, erfindet der Browser den Rest. Für die Kursive stellt er die Aufrechte schräg, für die Fette verdoppelt er die Kontur. Beides ist am Schriftbild sofort zu sehen: Eine echte Kursive hat eigene Formen, das a ist einstöckig, das f reicht unter die Zeile. Wer Kursive und Halbfette benutzt, muss sie auch laden.

@font-face { font-family: "Lesetext"; font-style: italic;
             src: url("fonts/lesetext-kursiv.woff2") format("woff2"); }
@font-face { font-family: "Lesetext"; font-weight: 600;
             src: url("fonts/lesetext-halbfett.woff2") format("woff2"); }
html { font-synthesis: none; }  /* Fälschung abschalten, Fehler wird sichtbar */

Schriften mit Anspruch bringen zwei Sorten Ziffern mit. Mediävalziffern haben Ober- und Unterlängen wie Kleinbuchstaben und fügen sich in den Lesetext; Versalziffern sind so hoch wie Großbuchstaben und stehen im Fließtext heraus wie ein geschrienes Wort. In Tabellen ist es umgekehrt. Dort müssen Ziffern gleich hoch und gleich breit sein, damit Einer unter Einern stehen. Die meisten Webseiten nehmen überall dieselbe Sorte.

html { font-variant-numeric: oldstyle-nums; }
td   { font-variant-numeric: lining-nums tabular-nums; text-align: right; }

Eine Zeile im Kopf der Seite, und die Schrift kommt von einem Dienst in den USA. Dabei geht die IP-Adresse jedes Besuchers an den Anbieter, bevor er irgendetwas eingewilligt hat. Das Landgericht München hat das im Januar 2022 als Verstoß gegen die DSGVO gewertet. Typographisch ist die Lösung ohnehin schlechter: Die Seite hängt an einem fremden Server, und bis die Schrift da ist, steht der Text in einer Ersatzschrift und springt dann um.

Die Korrektur kostet zehn Minuten. Schriftdateien im Format WOFF2 auf den eigenen Server legen, auf die Zeichen kürzen, die man braucht, und selbst einbinden. Vor dem Kürzen prüfen, ob Kapitälchen, Mediävalziffern und das schmale Leerzeichen erhalten bleiben; viele fertige Pakete lassen genau diese weg.

<link href="https://fonts.googleapis.com/css2?family=…" rel="stylesheet">

@font-face {
  font-family: "Lesetext";
  src: url("/fonts/lesetext.woff2") format("woff2");
  font-display: swap;
}

Hellgrauer Text gilt als elegant und ist für viele Menschen nicht lesbar: bei Sonne auf dem Telefon, mit sechzig Jahren, mit einer Sehschwäche. Die WCAG 2.1 verlangen für Lesetext ein Kontrastverhältnis von mindestens 4,5 zu 1. Das Grau im Muster kommt auf rund 2,6 zu 1. Wer Text zurücknehmen will, nimmt ihn im Grad zurück oder setzt ihn in ein dunkleres Grau, das die Grenze noch hält.

body  { color: #15181c; background: #f6f7f8; }  /* 16,6 : 1 */
small { color: #525a64; }                        /* 6,5 : 1, hält AA */

Alle dreizehn Punkte lassen sich an der fertigen Seite nachmessen, im Browser und ohne Augenmaß. Die Werte gelten für deutschen Lesetext; für Überschriften, Formulare und Navigation gelten andere.