Webdesign: Fluiditype ist eine schlanke CSS-Bibliothek für flexible Typografie
Die mit drei Kilobyte sehr kleine CSS-Bibliothek Fluiditype des niederländischen Designers Boris Skirov sorgt dafür, dass deine Schriften sich stets proportional zum Viewport verhalten. Dabei sind sie 100 Prozent fluid, skalieren also stufenlos.
Fluides Skalieren statt starrer Breakpoints
Darin besteht der Unterschied zu den üblichen Responsive-Ansätzen. Da brechen Seiten auf der Grundlage von Breakpoints um. Fluiditype verhält sich stufenlos responsiv, ähnlich wie das Skalieren von Objekten in Photoshop. Kein Wunder, dass sich Skirov diese Animation zur Visualisierung überlegt hat:
Beste Ergebnisse mit dem Inter-Font
Im Standard setzt Fluiditype auf den freien Font Inter, den der Figma-Designer Rasmus Andersson unter der Open-Font-Lizenz pflegt und bereitstellt. Mit einem Eingriff in das CSS könnt ihr natürlich jeden anderen geeigneten Font verwenden.
Die CSS-Bibliothek berechnet die erforderlichen Schriftgrößen aus einer Formel, die die Breite des Viewport ins Verhältnis zur Font-Größe setzt. In der Bibliothek findet ihr die entsprechenden HTML-Elemente sauber durchsortiert. Auf der Website zum Projekt könnt ihr ebenfalls alle bearbeiteten Elemente sehen. Das freie Skalieren dieser Website zeigt dann auch das Konzept sehr deutlich.
Verfügbar auf Codepen und GitHub
Fluiditype kann auf GitHub heruntergeladen werden. Wer Codepen lieber mag, findet die CSS-Bibliothek auch dort. Leider gibt Skirov keine konkrete Lizenz an. So ist unklar, in welchem Umfang ihr Fluiditype frei nutzen könnt. Mindestens für kommerzielle Projekte solltet ihr ausdrücklich nachfragen.
Passend dazu: Das Geheimnis guter Typographie: Einfache Tipps für mehr Lesekomfort
Das Runterskallieren ist natürlich spannend und eine tolle Lösung. Jedoch wird die Schrift im Umkehrschluss auch hochskaliert. Hier sehe ich das Problem. Soll wirklich auf unterschiedlichen Desktop-Geräten unterschiedliche Schriftgrößen entstehen? Das finde ich eher unpassend und erhöht tatsächlich den Testingaufwand.
Das kannst du ja über die Breite des Viewport hart begrenzen.
Eine Lizenz wurde inzwischen auch angegeben: MIT License
Danke für die Ergänzung!
Sehr schöner Tipp… danke!
Wobei das hier den ganzen Trick des Fluid-Scaling ausmacht:
:root {
–fontSize: calc(12px + 0.698vw);
}
Zip sagt’s: Den „Trick“ mit der Font-Size in Abhängigkeit vom ViewPort kann man auf JEDEN Font anwenden, das funktioniert auch mit Arial oder Verdana. Eine Font-Size in vw ist flexible Typografie…
Hat wer behauptet, es ginge nur mit dem mitgelieferten Font? Im Gegenteil. Wer den Beitrag liest, erkennt, dass beliebige Fonts eingebunden werden können.