Anzeige
Anzeige
Fundstück
Artikel merken

Responsive Webdesign: Texte automatisch skalieren

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.

Von Jonathan Schneider
2 Min. Lesezeit
Anzeige
Anzeige
Texte responsive skalieren mit Fitty (Bild: Shutterstock

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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).

Anzeige
Anzeige

<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?

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
4 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

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
Webdesign Köln

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!

Antworten
Webdesign Köln

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!

Antworten
Homepage erstellen lassen Köln

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.

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