Typografie

05 / Digitale Typografie

Kernfrage

Wie verhält sich Schrift am Bildschirm?

Am Bildschirm ist Typografie beweglich. Text passt sich an Geräte an, Menschen zoomen, Schriften werden über das Netz geladen. Gute digitale Typografie plant diese Bewegung mit, statt sie zu bekämpfen.

Lernziel: Du kannst Webfonts effizient und datenschutzfreundlich einbinden, variable Schriften nutzen und Typografie responsiv und barrierefrei gestalten.

Am Bildschirm ist Schrift beweglich.

5.1 / Webfonts

Laden, anzeigen, schützen.

Webfonts werden mit der Seite geladen. Das kostet Zeit und Daten. Drei Massnahmen halten sie schlank.

WOFF2

Das komprimierte Webformat. Kleiner als OTF oder TTF und in allen aktuellen Browsern unterstützt.

Subsetting

Nur die Zeichen laden, die man braucht, etwa Lateinisch mit Akzenten statt aller Sprachen.

Lokal hosten

Schriften vom eigenen Server laden statt von Google Fonts. Schneller und besser für den Datenschutz.

Mit font-display: swap zeigt der Browser zuerst eine Ersatzschrift und tauscht sie, sobald der Webfont da ist. So bleibt der Text sofort lesbar.

Text muss sofort lesbar sein.

5.2 / Variable Schriften

Eine Datei, viele Schnitte.

Eine variable Schrift enthält alle Gewichte und Breiten in einer einzigen Datei. Zwischenstufen sind frei wählbar, etwa ein Gewicht von 450 statt nur 400 oder 500. Das spart Ladezeit, sobald mehr als zwei, drei Schnitte im Einsatz sind.

Manche variablen Schriften haben eine Achse für die optische Grösse. Kleine Grössen werden offener und kräftiger, grosse feiner und enger, so wie früher im Bleisatz, als jede Grösse eigens geschnitten wurde.

Eine Datei, viele Schnitte.

Ausprobieren

Variable Schrift

Lade die variablen Schriften und bewege die Achsen. Vergleiche die optische Grösse automatisch und von Hand.

Für dieses Werkzeug braucht es die variablen Fassungen von Source Serif 4 und Inter.

Lädt Schriften von Google Fonts. Dabei wird deine IP-Adresse an Google übermittelt.

5.3 / Responsiv und barrierefrei

Schrift, die mitwächst.

Schriftgrössen werden in rem angegeben, damit sie der Einstellung im Browser folgen. Mit clamp() wachsen Titel fliessend mit der Bildschirmbreite, ohne auf dem Handy zu gross oder am Desktop zu klein zu sein.

Barrierefrei heisst: Fliesstext mindestens 16 Pixel, Zoom auf 200 Prozent ohne Verlust, genug Kontrast und keine Texte als Bild. Mehr dazu im Kurs Barrierefreiheit.

Wer zoomt, darf nichts verlieren.