Responsive Webdesign: Texte automatisch skalieren
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?
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.
Sehr interessant, habe ein Projekt bei dem gerne zwischen sehr kurzen und extrem langen Überschriften auf den unterschiedlichsten Seiten gewechselt wird und dies genau so dann die neue Anforderung abdeckt!
Je nach Situation hat rm, vw oder px alles seine Daseinsberechtigung. Wir haben schon verschiedene Lösungen probiert für Textskalierung. Aber da muss dann der Webentwickler ran. Manchmal kann man sich aber auch mit Zeilenumbrüchen helfen (wbr / shy). Ich werde Fitty direkt bei uns weitergeben. Vielen Dank!
Texte skalieren zu lassen, ist im Zeitalter von Mobile First eigentlich kein Thema mehr. Was mobil lesbar ist, ist es auch auf dem Desktop-PC. Lediglich zu lange einzelne Wörter können in der mobilen Ansicht ein Problem darstellen. Dafür gibt es aber die Möglichkeit zu nutzen.