Thema: typography
-
Webfont-Ladeverhalten: font-display, Preload, unicode-range-Subsetting und metrikangepasste Fallbacks
Text beim ersten Rendern anzeigen und die Marken-Schrift ohne Layout-Sprünge laden: Schriftschnitte mit unicode-range aufteilen, damit nur genutzte Schriftsysteme heruntergeladen werden, font-display je nach Rolle wählen (optional für Fliesstext, swap für Überschriften), die für das erste Rendern nötigen Dateien mit crossorigin preloaden und einen Fallback-Schriftschnitt mit size-adjust sowie Ascent/Descent-Overrides deklarieren, damit Zeilen vor und nach dem Wechsel gleich umbrechen.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenhöhe und Kontrast
Drei Eigenschaften entscheiden, ob sich langer Text bequem lesen lässt: die Zeilenlänge (das AAA-Kriterium der WCAG begrenzt sie auf 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne das Layout zu zerstören) und der Kontrast (4.5:1 für normalen Text, 3:1 für grossen Text). Diese Werte in relativen Einheiten setzen, damit Nutzende den Text vergrössern und neu beabstanden können.
Maschinenlesbar: JSON