Tool-Tipp

Webdesign: Fluiditype ist eine schlanke CSS-Bibliothek für flexible Typografie

Typografie ist eine Design-Disziplin. (Foto: Shutterstock)

Die CSS-Bibliothek Fluiditype kümmert sich um eine dem Viewport automatisch angepasste 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

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

8 Kommentare
Farid
Farid

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.

Antworten
Dieter Petereit

Das kannst du ja über die Breite des Viewport hart begrenzen.

Antworten
Pizzafohra
Pizzafohra

Eine Lizenz wurde inzwischen auch angegeben: MIT License

Antworten
Zip
Zip

Sehr schöner Tipp… danke!

Antworten
Zip
Zip

Wobei das hier den ganzen Trick des Fluid-Scaling ausmacht:

:root {
–fontSize: calc(12px + 0.698vw);
}

Antworten
Thomas
Thomas

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…

Antworten
Dieter Petereit

Hat wer behauptet, es ginge nur mit dem mitgelieferten Font? Im Gegenteil. Wer den Beitrag liest, erkennt, dass beliebige Fonts eingebunden werden können.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung