murattunalı.

Warum diese Schrift? Zwei Familien abgelöst, Budget +27,5 %.

Murat Tunalı VERÖFFENTLICHT: LESEZEIT: 5′ DECISION Typografie

Die Wahl einer Schrift ist zugleich eine Performance-Entscheidung: die Datei verzögert den ersten Bildaufbau, sie verändert die Metriken, und falsch kalibriert wird sie zu Layout-Verschiebung.

Am 27. August 2026 hat diese Website zwei Schriftfamilien in einer einzigen Runde abgelöst. Archivo und Spline Sans Mono gingen, Newsreader und IBM Plex Mono kamen. Die Schriftlast einer typischen Seite stieg von 82,6 KB auf 105,3 KB — ein Zuwachs von 27,5 %. Dieser Beitrag erklärt, warum dieser Zuwachs akzeptiert wurde, und beschreibt die drei stillen Fehler, die die Runde unterwegs aufgedeckt hat.

Die Vorgabe widersprach der Schrift selbst

Die Design-Vorgabe sagte „Newsreader Variable Font: wght 300..500“. Die tatsächliche Achse der Schrift ist 200–800. Mein erster Bericht hat diesen Fehler wörtlich übernommen, und die Budget-Entscheidung wurde gegen eine Obergrenze getroffen, die es nicht gab. Sobald die Achse aus der fvar-Tabelle der Schrift selbst gelesen wurde, änderten sich die Zahlen, und die Entscheidung wurde erneut gestellt. Mit den korrigierten Optionen wurde 400–800 gewählt: die 92 Gewichtsangaben der Website ließen sich nahezu unverändert übertragen, eine Obergrenze von 500 hätte sie alle auf ein Mittelgewicht gedrückt.

Der engere Bereich ergab die größere Datei

Bei der Wahl des Bereichs für die optische Größe wurden drei Varianten gemessen, und das Ergebnis lief der Intuition entgegen:

  1. opsz 6–72 → 119,9 KB
  2. opsz 16–72 → 126,6 KB
  3. opsz 24–72 → 103,9 KB

Eine Untergrenze von 16 kostet mehr als eine von 6, denn 16 ist in der Schrift kein Master: das Subsetting-Werkzeug interpoliert dort einen neuen Master. Gewählt wurde 24 — zugleich ein echter Master und die Ausgangsbasis der Schärfungsbewegung.

Der Wechsel der Monospace gab Geld ans Budget zurück

  1. vorher Archivo 69,3 + Spline 13,3 = 82,6 KB
  2. nachher Newsreader 96,8 + Plex 8,5 = 105,3 KB
  3. Pilot-Routen 312,2 → 152,1 KB

Auf den tatsächlich verwendeten Glyphensatz reduziert, fiel IBM Plex Mono von 132,4 KB auf 8,5 KB — kleiner als die 13,3 von Spline. Die Erwartung der Vorgabe von „etwa 50 KB mehr“ galt für zwei nicht reduzierte statische Gewichte. Das eigene Kriterium der Vorgabe war dagegen in keiner Konfiguration erfüllbar: der Roman-Schnitt von Newsreader ist allein größer als das alte Paar. Das wurde mit dieser Tabelle berichtet, und der Zuwachs wurde bewusst akzeptiert. Das Subsetting-Werkzeug ist Open Source: woff2-axis-subsetter.

Drei getrennte Fehler waren ein Fehler

Der erste Prüflauf der Runde ergab achtzehn Rotmeldungen, und die meisten hatten ihre Wurzel in einer einzigen Zeile: der Animationsbibliothek wurde ein letter-spacing-Wert von 0,200px übergeben, und auf den Bildschirm wurden 18,72px geschrieben. Die Engine rechnete korrekt; das CSS-Plugin der Bibliothek erkannte die Eingabe nicht.

  1. mobiles Scroll-CLS 0,3249 · 0,1996 · 0,4156 → 0,0008 · 0,0006 · 0,0012
  2. h1-Tausch @390 112,8 → 75,2px → 0,0px
  3. horizontaler Überlauf 145px → 0

Drei getrennte „Fehler“ waren also einer. Die Korrektur bestand darin, den Wert der Bibliothek überhaupt nicht mehr zu übergeben: er wird jetzt aus dem eigenen Fortschritt des Tweens von Hand geschrieben — ein Schreiber, eine Einheit. Die Lehre wurde festgehalten: wenn Sie einer Bibliothek eine Layout-Eigenschaft übergeben, messen Sie nicht die Eingabe, sondern die Ausgabe, denn die Umwandlung kann stillschweigend einen anderen Wert erzeugen.

Die Signaturbewegung war eine ganze Runde lang tot, und kein Auge konnte es sehen

Im dritten Lauf sprang eine Gegenbeweis-Wache auf Rot. Die Ausrichtung war einwandfrei, aber die Achse, die der Schärfungseffekt bewegt, hatte über achtzig Frames einen einzigen Wert angenommen. Im Browser wurden vier Formen ausprobiert:

  1. "opsz" 24.0 → 72 gelesen: "opsz" 24 erstarrt
  2. "opsz" 24 → 72 gelesen: "opsz" 43.2 fließt
  3. "wdth" 97 → 125 gelesen: "wdth" 108.452 fließt
  4. "opsz" 24, "wght" 800 → 72, 800 fließt

Der Grund: die Bibliothek behandelt font-variation-settings als komplexe Zeichenkette, und die numerischen Skelette beider Enden müssen genau übereinstimmen. Der Dezimalpunkt in 24.0 lässt den Wert als zwei Zahlen lesen, das Skelett hält nicht, und die Bibliothek geht ohne Interpolation und ohne Fehlermeldung durch. Entstanden war der Fehler durch meinen eigenen Rundungsaufruf. Alle Achsenwerte wurden auf ganze Zahlen gezogen; die Messung ging von einem Wert auf achtzig verschiedene.

Das eigentliche Gewicht der Lehre liegt darin: auf dem Bildschirm sah nichts kaputt aus. Die Unschärfe floss, die Deckkraft floss, nur die Signaturachse war tot. Weder das Auge noch die Messung der Layout-Verschiebung noch die Barrierefreiheitsprüfung noch der Test, der die Ausrichtung misst, hätten es sehen können. Gesehen hat es nur die umgekehrte Wache, die fragt: „hat sich die Achse wirklich bewegt?“

Die optische Größe wurde festgesetzt, der Tausch-Unterschied ging auf null

Dem Browser die optische Größe aus der Schriftgröße wählen zu lassen, machte eine metrische Ersatzschrift unmöglich: die Zeilenbreite von Newsreader beträgt bei opsz 24 94,25 % der von Georgia und bei opsz 72 102,07 % — eine Spanne von 8,3 %, die kein einzelner size-adjust-Wert schließen kann. Die optische Größe ist jetzt fest, und jede Rolle schreibt ihren eigenen Kalibrierungswert. Das Ergebnis: ein Tausch-Unterschied von 0,0px über sechs Routen.

Auch die Ersatzschriften werden nicht mehr von Hand kalibriert. Ein Werkzeug misst jedes Paar aus Gewicht und optischer Größe gegen Georgia und schreibt das Verhältnis in ein Register; die Ausgabe ist deterministisch, und die Prüfsuite kann diese Werte aus der Quelle neu ableiten und vergleichen. Aus einundzwanzig Archivo-Ersatzschriften wurden sechs für Newsreader, mit einem gemessenen size-adjust-Band von 91,92–102,07 %.

Zwei Bewegungen, die ihre Richtung umkehrten

Die Atembewegung beim Überfahren mit der Maus sagte „Basis plus fünf“. Unter der neuen Basis landen diese fünf Einheiten über der Obergrenze der Achse, die Schrift schneidet sie also stillschweigend ab und die Bewegung erscheint gar nicht. Auch das Verhältnis ist umgekehrt: sinkt die optische Größe, wird der Buchstabe breiter. Die Bewegung wurde minus fünf. Ebenso kehrte die Pfeil-Glyphe um — Pfeile nach oben, nach unten und in beide Richtungen gibt es in Plex, aber nicht in Newsreader; genau das Gegenteil der Archivo-Zeit.

Bewegt sich eine Achse nicht, gibt es keine Bewegung — und sehen wird das nur ein Test, der die Bewegung der Achse selbst misst.

Murat Tunalı

Gründer. Zwanzig Jahre Enterprise-IT-Infrastruktur + Webentwicklung.

Nächster Beitrag

SCHEMA: BLOGPOSTING + PERSON + BREADCRUMBLIST — AUTOR, DATUM UND LESEZEIT SPEISEN DAS SCHEMA