Jahrelang haben wir Größen fest vergeben: 16 Pixel Fließtext, 32 Pixel Überschrift, fertig. Das ist bequem und falsch. Wer im Betriebssystem eine größere Schrift eingestellt hat, bekam bei uns trotzdem 16 Pixel — die Einstellung wurde schlicht ignoriert.
Was wir geändert haben
Der Fließtext steht jetzt in rem, Überschriften wachsen über
clamp() mit der Fensterbreite. Das Raster kennt nur noch vier Stufen statt neun.
Der Umbau betraf 62 Komponenten und dauerte einen Nachmittag.
Eine Seite gehört dem, der sie liest — nicht dem, der sie gestaltet hat.
Was schiefging
Zwei Dinge. Erstens: In einem alten Projekt war die Grundschrift im
html-Element auf 62,5 Prozent gesetzt, ein Trick aus den Zehnerjahren,
damit 1 rem genau zehn Pixel ergibt. Nach dem Umbau war dort alles winzig.
Zweitens: Ein Kunde hatte in seinem Redaktionssystem Überschriften mit fester Pixelgröße überschrieben. Das fiel erst auf, als die Seite auf einem großen Bildschirm plötzlich wie ein Plakat aussah.
Was wir daraus gelernt haben
| Regel | Warum |
|---|---|
| Fließtext nie unter 1 rem | respektiert die Einstellung des Nutzers |
| Maximal vier Stufen im Raster | neun Stufen benutzt am Ende niemand |
| Zeilenlänge 60 bis 75 Zeichen | alles darüber wird übersprungen |
| Keine festen Größen im Redaktionssystem | sonst hebelt die Redaktion das System aus |
Seitdem messen wir bei jeder Übergabe einmal mit 200 Prozent Systemschrift nach. Es dauert zwei Minuten und findet zuverlässig die Stellen, an denen später Beschwerden entstehen.
Geschrieben von Anneke Kruse · zurück zum Journal