Fluid Typography

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.

Lesetipp: Die Gorton-Schrift: Die unermüdliche Arbeiterin