Anzeige
Anzeige
Tool-Tipp
Artikel merken

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

Die CSS-Bibliothek Fluiditype kümmert sich um eine dem Viewport automatisch angepasste Typografie.

1 Min. Lesezeit
Anzeige
Anzeige
Typografie ist eine Design-Disziplin. (Foto: Shutterstock)

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
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

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

Eine Lizenz wurde inzwischen auch angegeben: MIT License

Antworten
Dieter Petereit

Danke für die Ergänzung!

Antworten
Zip

Sehr schöner Tipp… danke!

Antworten
Zip

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

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

Antworten
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige