Der Schrifttausch und die Layoutverschiebung.
Der Schrifttausch heißt, dass der Browser den Text zuerst mit einer Ersatzfamilie malt und beim Eintreffen der echten Schrift ersetzt — und wenn die zwei Familien verschieden viel Platz einnehmen, erzeugt er Layoutverschiebung.
Bis Webschriften geladen sind, bleibt der Text entweder unsichtbar oder wird mit einer Ersatzfamilie gemalt. Das Zweite ist fast immer die richtige Wahl — unsichtbarer Text ist das schlechteste Nutzererlebnis und verzögert auch LCP direkt. Aber der Tausch hat einen Preis: Unterscheiden sich die Buchstabenbreiten der zwei Familien, fließt der Text neu, und alles darunter verschiebt sich.
Das ist die heimtückischste Quelle der Layoutverschiebung, denn auf schneller Verbindung zeigt sie sich kaum. Die Entwicklung testet auf der eigenen Maschine, die Schrift kommt sofort, keine Verschiebung. Auf langsamer Verbindung wird der Tausch sichtbar — und taucht in den Felddaten auf.
Metrische Anpassung
Die Lösung: die Ersatzfamilie den Metriken der echten annähern. Moderne Browser bieten dafür einstellbare Eigenschaften: Größenverhältnis, Ober- und Unterlänge der Ersatzschrift lassen sich einzeln justieren. Richtig eingestellt nehmen beide Familien dieselbe Höhe ein, und beim Tausch verschiebt sich nichts.
Die Werte werden nicht geraten, sondern gemessen: Echte Schrift und Ersatz werden mit demselben Text nebeneinander gerendert und ihre Höhen verglichen. Der Unterschied wird in den Einstellwert übersetzt. Diese Messung geschieht einmal und bleibt gültig, solange die Schrift sich nicht ändert.
Eine Alternative ist, die Schrift als kritische Ressource vorzuladen — findet kein Tausch statt, gibt es keine Verschiebung. Aber das setzt die Schrift an den Anfang der Renderkette und kann LCP verzögern. Die Wahl zwischen beiden hängt davon ab, ob auf dieser Seite der Text das LCP-Element ist.
Der Fall auf dieser Website
Dieses Thema kam hier nicht als Theorie hinein, sondern als gemessener Fall — und was der Fall lehrte, war das Gegenteil des Erwarteten.
Das Ladeverhalten der Schrift wurde als Quelle einer Layoutverschiebung verdächtigt, eine Korrektur war beabsichtigt. Die geplante Änderung wirkte vernünftig und war eine bekannte gute Praxis. Vor der Anwendung wurde gemessen.
Die Messung zeigte: Die Verschiebung kam nicht von dort. Der Schrifttausch erzeugte keine Verschiebung, denn die Ersatzfamilie war metrisch angepasst; die Verschiebung kam von woanders — von einem beim Scrollen fixierten Abschnitt. Wäre die geplante Änderung angewandt worden, hätte sie eine funktionierende Ordnung gebrochen und das Finden des echten Problems verzögert.
Die Messung behob keinen Fehler — sie verhinderte eine falsche Korrektur.
Nach dem Fall kam ein Wächter hinzu, und seine Logik ist bewusst umgekehrt: Die Schrift wird ABSICHTLICH verzögert, und gemessen wird, dass die Überschriftenhöhe auf vier Routen FEST bleibt. Der Test simuliert also das Nie-Ankommen der Schrift und beweist, dass das Layout nicht bricht. Die metrische Anpassung ist keine einmal eingestellte und vergessene Einstellung mehr, sondern ein bei jedem Lauf verifizierter Vertrag.
Wie viele Familien, wie viele Gewichte
Jede zusätzliche Schriftfamilie heißt eine zusätzliche Anfrage, ein zusätzliches Warten und ein zusätzliches Tauschrisiko. Die Familienzahl ist deshalb ein Posten des Performance-Budgets und muss in der Entwurfsphase entschieden werden.
Auf dieser Website ist das Budget auf zwei Familien begrenzt, und die Prüfsuite misst das. Beide sind variable Schriften — eine einzige Datei trägt alle Gewichte und Breiten. Im klassischen Ansatz wäre jedes Gewicht eine eigene Datei, und sechs Gewichte hießen sechs Anfragen.
Der zweite Vorteil der variablen Schrift liegt auf der Entwurfsseite: Weil die Breitenachse kontinuierlich ist, werden Zwischenwerte nutzbar. Der Signatureffekt dieser Website nutzt genau diese Achse — ohne zusätzliche Dateikosten.
Eine Subsetting-Notiz: Schriftdateien sollten nur mit dem benötigten Zeichensatz erzeugt werden. Eine auf Latein und erweitertes Latein begrenzte Datei ist um ein Vielfaches kleiner als eine mit dem vollen Unicode-Bereich — und für türkische Inhalte sind genau diese zwei Sätze nötig.
Die Optionen des Tauschverhaltens
Es gibt eine Einstellung, die dem Browser sagt, was er beim Warten auf die Schrift tun soll, und ihre vier Werte bieten verschiedene Abwägungen. Das Standardverhalten verbirgt den Text kurz, malt dann mit dem Ersatz und tauscht beim Eintreffen der echten Schrift.
- Tausch — sofort mit dem Ersatz malen, beim Eintreffen der echten ersetzen. Am besten für LCP, höchstes CLS-Risiko.
- Rückfall — ein kurzes Blockfenster, dann der Ersatz; kommt die echte Schrift spät, wird sie nie verwendet.
- Optional — ein kurzes Blockfenster, dann BLEIBT es beim Ersatz. Kein Verschiebungsrisiko, aber das Design kann uneinheitlich wirken.
- Blockieren — den Text verbergen. Verzögert LCP direkt; in fast keiner Situation richtig.
Die richtige Wahl hängt davon ab, ob die Ersatzfamilie metrisch angepasst ist. Wenn ja, ist der Tausch sicher und liefert das beste Ergebnis; wenn nein, verhindert das optionale Verhalten die Verschiebung ganz, aber das Design erscheint bei manchen Nutzern nie. Steht die metrische Anpassung, verschwindet die Abwägung — beides wird gewonnen.
Hosting: auf dem eigenen Server halten
Schriften von einem Drittanbieter zu ziehen war lange Standardpraxis und ist heute größtenteils ein Fehler. Der Grund liegt auf der Performance- wie auf der Datenschutzseite: Eine Anfrage an eine externe Domain heißt eine zusätzliche Namensauflösung und einen zusätzlichen Verbindungsaufbau — und weil Browser-Caches inzwischen nach Domain getrennt sind, gilt auch die Annahme „wurde auf einer anderen Website schon geladen“ nicht mehr.
Auf der Datenschutzseite meldet jede Anfrage die Adresse des Nutzers an einen Dritten. In manchen Rechtsräumen zählt das als Datenübermittlung, die ausdrückliche Einwilligung verlangt.
Das Hosting auf dem eigenen Server löst beide Probleme ohne Zusatzkosten: Die Datei wird ohnehin geladen; nur der Ort ändert sich. Auf dieser Website werden beide Schriftfamilien von der eigenen Domain ausgeliefert, als Subset und in variabler Version — und die Content-Security-Policy blockiert externe Ressourcenanfragen ohnehin.
Zum Schluss eine Wartungsregel: Ändert sich die Schrift, müssen die metrischen Anpassungswerte neu gemessen werden. Die Ersatzeinstellungen wurden gegen eine bestimmte echte Schrift berechnet; wechselt die Familie, wird diese Rechnung ungültig, und die Verschiebung kehrt lautlos zurück. Ein weiteres Beispiel, warum einmal eingestellte und vergessene Werte an einen Test gehören — der Wächter sagt im Moment der Änderung, dass der Wert veraltet ist.