Notizbuch · Notiz 002 · Typografie

Zehn Sprachen, drei Schriftdateien

Bei einer Website in zehn Sprachen reißt meist zuerst das Budget für Schriften. Hier nicht. Kyrillische und arabische Zeichen hatten trotzdem ihren Preis. Wir legen ihn offen.

Die Typografie der Seite lief über drei Familien: Archivo für Überschriften, Instrument Sans für Fließtext, Martian Mono für Zahlen und Labels. Alle drei sind variable Fonts. Mit fünf Sprachen lief alles sauber. Bei zehn Sprachen wuchsen zwei Probleme gleichzeitig: geladene Bytes und abgedeckte Alphabete.

Was wir womit vergleichen

Unsere WOFF2-Dateien mit den rohen TTF-Dateien zu vergleichen, wäre unfair. Der größte Teil des Unterschieds entsteht durch die Komprimierung, nicht durch den Subset. Entscheidend ist die echte Alternative: Wie viel wäre geladen worden, wenn dieselben drei Schriftfamilien von Google Fonts kämen?

Nicht alle neun Dateien laden. Der Browser unicode-range prüft den Bereich und lädt nur die Zeichensätze, die die Seite braucht. Für eine türkische Seite sind das latin + latin-ext pro Schriftfamilie:

latin 88.0 KB <- latin-ext 83.8 KB <- vietnamese 33.6 KB latin 29.2 KB <- latin-ext 10.8 KB <- latin 23.0 KB <- latin-ext 15.5 KB <- cyrillic 10.3 KB cyrillic-ext 3.1 KB Türkische Seite lädt: 250 KB (6 Dateien)

Neben Bytes sparten wir noch mehr: Wir senkten sechs Requests auf drei und strichen die DNS + TLS-Handshakes zu zwei externen Origins komplett. So schlossen wir das Ressourcenproblem, das den First Paint blockierte in der Notiz zu den letzten 18 Punkten steht dort.

Drei Fallen

Erstens: Im latin-ext-Subset fehlen lateinische Grundzeichen

Beim ersten Versuch haben wir die latin-ext-Datei von Google Fonts geladen und verkleinert. Das Ergebnis enthielt 130 Glyphen, aber keine Ziffern. Der Grund: latin-ext liegt als Ebene über latin, die Zusatz ist ein Set, kein vollständiges Alphabet. Der richtige Weg: Lade die komplette variable Schrift aus dem google/fonts-Repo und zieh das Subset selbst heraus.

Zweitens: Wenn du ungenutzte Achsen nicht festlegst, wächst die Datei auf das Fünffache.

Jede Achse einer variablen Schrift macht die Datei größer. Im Design zählen nur Stärke und Breite. Wenn du die übrigen Achsen nicht auf ihre Standardwerte fixierst, bleiben ihre Daten in der Datei.

tam = {a.axisTag: a.defaultValue for a in t['fvar'].axes if a.axisTag not in eksen} tam.update(eksen) # Achsen außer wght/wdth bleiben beim Standardwert, # sonst wird die Datei fünfmal so groß

Drittens: gvar lädt lazy

Wenn du mit fontTools die Achse festlegst und danach direkt ein Subset ziehen willst KeyError: space subsettet. Der Grund ist Lazy Loading der variablen Glyph-Daten (gvar): Nach dem Festschreiben sieht das Objekt im Speicher konsistent aus, aber der Subsetter liest es nicht. Die Lösung ist umständlich, passt aber in eine Zeile: Datei kurz als TTF speichern, neu öffnen, dann subsetten.

Kyrillisch und Arabisch: was es kostet

Archivo enthält keine kyrillischen Zeichen, Instrument Sans auch nicht. Arabische Zeichen enthält keine der beiden Schriften. Für diese zwei Sprachen musste eine eigene Familie her, und die Auswahl war nicht beliebig.

• Russisch: Roboto Flex. Nur das passte strukturell: die Breitenachse. Also alle font-variation-settings Die Werte funktionieren unverändert. Eine Datei deckt Überschriften und Fließtext ab. Die russische Seite bleibt kleiner als die Seite mit lateinischer Schrift.
• Arabisch: Noto Sans Arabic. Der einzige Kandidat mit Breitenachse. Eine Datei mit 144 KB deckt drei Rollen ab, also lädt die arabische Seite weniger als die lateinische.

Der Preis steckt in Noto Sans Arabic → und ✓ hat diese Glyphen nicht. Auf der arabischen Seite stammen die beiden Zeichen deshalb aus der Ersatzschrift und sehen etwas anders aus als die Zeichen daneben. Statt das zu verstecken, haben wir es in einem CSS-Kommentar festgehalten. Sonst sieht die nächste Person den Unterschied und hält ihn für einen Fehler.

Das Layout von rechts nach links brauchte eigene Anpassungen: Wir drehten die Pfeile um und ersetzten Positionsangaben durch ihre logischen Entsprechungen (margin-inline-start, inset-inline-start), damit dasselbe CSS in beide Richtungen richtig arbeitet.

Eine kleine Einstellung: Warum Martian Mono optional nutzt

Zwei von drei Familien font-display:swap nutzt. Martian Mono optional. Der Grund ist gemessen: Mit swap kommt Martian spät, lässt den Menübutton neu messen und erzeugt 0,015 Layout Shift. Da wir ihn vorladen, ist er praktisch rechtzeitig da. Nur wenn er es nicht schafft, springt die Seite nicht, sondern bleibt bei der Ersatzschrift.

Der gesamte Schriftordner für zehn Sprachen hat 404 KB. Kein Besucher lädt alles. Jede Seite zieht nur die Dateien für ihre eigene Sprache.