Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Fundstück

Responsive Webdesign: Texte automatisch skalieren

    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.

Anzeige

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?

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot