Responsive Typografie bedeutet nicht nur, die Schriftgröße auf Mobilgeräten zu reduzieren. Schriftgröße, Zeilenhöhe, Zeilenlänge, Überschriftenrhythmus und umgebende Abstände sollten sich gemeinsam verändern. Eine Überschrift, die auf Desktop eindrucksvoll wirkt, kann auf Mobilgeräten in vier Zeilen umbrechen und damit Hierarchie sowie Balance des ersten Bildschirms stören.
Wenige, sinnvolle Ebenen definieren
Statt für jeden Screen eine neue Größe zu erfinden, definieren Sie wenige Rollen wie Display, Überschrift, Fließtext, Hilfstext und Label. Dokumentieren Sie den Zweck jeder Rolle, damit Designer und Entwickler auf neuen Screens die gemeinsame Skala nutzen, statt zufällige Größen hinzuzufügen.
Fließende Größen kontrolliert einsetzen
Die CSS-Funktion clamp() eignet sich gut für fließende Größen über verschiedene Viewport-Breiten, doch Mindest- und Höchstwerte müssen mit echten Inhalten getestet werden. Ein zu großer Bereich kann bei mittleren Bildschirmgrößen unerwartete Zeilenumbrüche erzeugen.
- Die lesbare Zeilenlänge von Fließtext ungefähr zwischen 55 und 75 Zeichen halten.
- Testen, wie Überschriften in unterschiedlichen Sprachen wie Türkisch und Englisch umbrechen.
- Auf Mobilgeräten nicht nur die Schriftgröße, sondern auch die Abstände ober- und unterhalb von Überschriften reduzieren.
- Prüfen, dass Inhalte nicht überlaufen, wenn Nutzer den Text vergrößern.
Ein gutes Typografiesystem lässt Designer die richtige Rolle wählen, statt auf jedem Screen neue Entscheidungen treffen zu müssen.
Testen Sie das System nicht nur mit Beispielsätzen, sondern mit echten Überschriften, langen Produktnamen, Fehlermeldungen und numerischen Daten. Typografie, die mit realen Inhalten funktioniert, schafft eine robustere Grundlage für die gesamte Oberfläche.
