Tool-Tipp
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.
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:
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.
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
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
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.