Fluid Typography 🤳: Schluss mit festen Schriftgrößen!

Früher war alles einfach – auch die Schrift im Web. Du hast eine feste Pixelgröße gesetzt und gut war’s. Blöd nur: Auf großen Bildschirmen zu klein, auf kleinen zu groß. Heute wissen wir: Das geht besser. Und hier kommt „Fluid Typography“ ins Spiel, ein Konzept, das Miriam Suzanne von OddBird vorangetrieben hat.

Was ist Fluid Typography?

Stell dir eine Website wie ein Gummiband vor. Mal dehnt es sich, mal zieht es sich zusammen. Genauso sollte sich auch die Schrift anpassen – nicht in starren Stufen, sondern fließend. Die Typografie passt sich dynamisch an die Bildschirmgröße an, ohne dass du überall manuell nachjustieren musst.

CSS-Tricks für dynamische Schriftgrößen

Mit CSS gab’s schon länger Tricks für flexiblere Schrift – etwa mit em oder rem. Aber richtig cool wird es erst mit clamp(). Damit setzt du eine minimale, eine maximale und eine dynamische Größe fest. Die Formel ist simpel:

:root {  font-size: clamp(1rem, 1rem + 1vw, 1.4rem);}

Heißt: Die Schrift ist mindestens 1rem groß, wächst proportional zur Viewport-Breite (1vw) und erreicht maximal 1.4rem. Perfekt für alle, die sich nicht mehr um Media Queries kümmern wollen.

Lesetipps: Die Gorton-Schrift: Die unermüdliche Arbeiterin 🐜 unter den Fonts ⎮Schriftart erkennen ✍🏽 & Schriften kombinieren: Diese 8 Tools helfen wirklich

Warum das Ganze?

Weil’s lesbarer ist. Kleine Displays bekommen größere Schrift, große Displays nutzen den Platz besser aus. Das Design bleibt schick, und niemand muss ständig rein- und rauszoomen.

Fazit

Feste Pixelwerte sind von gestern. Fluid Typography ist kein Trend, sondern die logische Weiterentwicklung des Webdesigns. Wer mehr wissen will, sollte sich den Artikel von Miriam Suzanne dazu anschauen: Fluid Type.