Fundstück

Responsive Webdesign: Texte automatisch skalieren

Texte responsive skalieren mit Fitty (Bild: Shutterstock

Responsive Webdesign gehört mittlerweile zum Alltag jedes Web-Developers – wie die Butter auf dem Brot. Leider können Texte ein noch so hübsches Layout wieder zerstückeln.

Fluid-Container, mit Flexbox oder CSS-Grid, erleichtern die Arbeit ungemein und ermöglichen es, hübsche Layouts umzusetzen. Auch das Verhalten auf kleineren Geräten lässt sich damit exzellent steuern. Bilder werden automatisch skaliert und in den richtigen Größen eingebettet. Knifflig sind leider immer noch die Texte.

Oft ist der Designer ist von einer ganz anderen Textlänge ausgegangen oder der Benutzer kann über ein CMS selbst den Text austauschen. Ungewollte Umbrüche und abgeschnittene Wörter sind dann die Folge. Da kann ein Web-Developer noch so gründlich arbeiten und für die unterschiedlichsten Media Queries die Schriftgrößen optimieren – es wird immer irgendwo Probleme geben.

Javascript skaliert automatisch die Texte für euch

Zwar lässt sich mit %, rem oder auch vw  die Schrift etwas besser anpassen, eine Garantie für ein perfektes Ergebnis ist das aber trotzdem nicht. Besonders, wenn visuelle Gestaltungsrichtlinien erfordern, dass die Headline nur einzeilig laufen darf. Die Lösung für das Problem ist die Javascript-Bibliothek Fitty.

Fitty skaliert eure Texte auf die maximale Breite und passt die Schriftgröße an. (Screenshot: GitHub)

Fitty kennt die Breite des Containers und skaliert den Text größer oder kleiner, damit dieser immer perfekt in den vorgesehenen Bereich passt. Über einen Min- und Max-Wert kann auch der Bereich der Skalierung festgelegt werden. Somit ist gewährleistet, dass ein Text immer lesbar bleibt.

Fitty stellt also ein tolles Fallback für alle Content-Management-Systeme bereit, bei denen der Kunde vielleicht selbst einmal die Headlines ändert und man gewährleisten möchte, dass nicht direkt alle Headlines umbrechen oder außerhalb des Viewports auslaufen.

Einsatz und Installation von Fitty

Fitty könnt ihr von GitHub beziehen und ohne Dependencies direkt in euer Projekt einbetten. Eine kleine Demo gibt es  auch noch (Tipp: Die Texte sind Input-Felder).


<div id="my-element">Hello World</div>
<script src="fitty.min.js"></script>
<script>
fitty('#my-element');
</script>

Bei Fließtext wird diese Technik natürlich nicht benötigt, da die Länge meist unbegrenzt ist und sich mit Media Queries die Schriftgröße einfach verkleinern lässt. Sobald aber nur ein gewisser Platz zur Verfügung steht und der Text nicht aus einem bestimmten Element fließen darf, ist diese Technik sehr praktisch. Sie garantiert, dass der eingesetzte Text auch innerhalb des vorgesehenen Bereichs steht und nicht herausfließt oder umbricht.

Womit arbeitet ihr am liebsten? rm, vw oder doch lieber altmodisch mit px?

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

Ein Kommentar
Sonja

Definitiv die allererste Maßnahme, die wir mal testen werden jetzt! ;-) Wir haben schon verschiedene Dinge probiert in Sachen Textskalierung für verschiedene Breakpoints. Bislang war ich mit nichts so richtig zufrieden und habe immer noch manuell nachjustiert mit meinem Web-Entwickler. Ich bin gespannt, ob Fitty das Problem lösen kann. Danke für den Tipp auf jeden Fall schonmal.

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