Responsive Typografie
Skalierung über Geräte hinweg
Techniken kennenlernenResponsive Typografie stellt sicher, dass Text auf allen Gerätegrößen lesbar und ästhetisch ansprechend bleibt. Die richtigen Einheiten und Techniken erzeugen eine fließende Schrift, die sich natürlich skaliert.
Gängige Schriftgrößenskalen
| Element | Mobil | Desktop | Verhältnis |
|---|---|---|---|
| Fließtext | 16px | 18px | 1.0 |
| H3 | 18px | 22px | 1.2 |
| H2 | 22px | 28px | 1.5 |
| H1 | 28px | 40px | 2.0-2.2 |
CSS-Beispiel: font-size: clamp(1rem, 2.5vw, 2rem);
Fazit
Responsive Typografie kombiniert relative Einheiten, Viewport-basierte Größenangaben und CSS clamp() für eine gleichmäßige Skalierung. Beginnen Sie mit einer gut lesbaren Basisgröße (16–18px), legen Sie ein konsistentes Skalenverhältnis fest und testen Sie auf verschiedenen Geräten. Gute responsive Schrift verbessert die Lesbarkeit und das Benutzererlebnis auf jedem Bildschirm.