FitText für skalierbare Texte in responsive Webdesigns

FitText in ein kleines, praktisches JavaScript-Plugin, um Text-Slogans oder andere größere Text-Elemente in responsive Webdesigns automatisch skalierbar zu machen. Mit Hilfe des Scripts passt sich dein Text-Slogan automatisch an die jeweilige Bildschirm-Breite an und wird dadurch immer optimal lesbar dargestellt.

FitText nutzen
FitText für automatisch skalierbare Texte. (Credit: Vektor-Icons von Etienne Mansard)

Das Plugin ist nicht für Fließtexte gedacht, sondern um große Schrift-Slogans, Webseiten-Titel oder Texte in einem großen Header-Bild automatisch an das responsive Design anzupassen. Und so funktioniert die Einbindung des JavaScript-Plugins.

FitText verwenden

Das FitText JavaScript-Plugin von Paravel (der Firma des Webdesigners Trent Walton) kannst du dir kostenlos auf GitHub downloaden und zusammen mit jQuery (z.B. über die Google Hosted Libraries) innerhalb des head-Tags deiner Webseite einbinden:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>

Achte beim Kopieren des Code-Beispiels vor allem darauf, dass die Datei jquery.fittext.js auch im richtigen Verzeichnis deiner Webseite liegt (also z.B. im Ordner „js“).

FitText in WordPress-Themes einbinden

Wenn du WordPress-Nutzer bist, solltest du das JavaScript besser mit Hilfe der WordPress-Function wp_enqueue_script über die functions.php Datei deines Themes oder Child-Themes einbinden. jQuery selbst kannst du so über die WordPress-eigene jQuery-Version nutzen, indem du das entsprechende handle „jQuery“ im Code setzt:

function my_scripts_method() {
wp_enqueue_script( 'fittext', get_template_directory_uri() . '/js/jquery.fittext.js', array( 'jquery' ), '1.1' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Die CSS-Klasse oder -ID deines Text-Elements angeben

Jetzt musst du die CSS-Klasse oder ID deines Text-Slogans nehmen und diese im folgenden JavaScript-Code innerhalb deines head-Tags angeben:

<script type="text/javascript">
jQuery("#responsive_headline").fitText();
</script>

In einem WordPress-Theme musst du den JavaScript-Code im folgenden No-Conflict Mode setzen, wenn die WordPress-eigene jQuery-Version genutzt wird:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#responsive_headline").fitText()
});
</script>

Hat dein WordPress-Theme eine eigene custom.js Datei (z.B. im Order „js“) kannst du deinen FitText-Code am besten dort unterbringen.

FitText-Optionen

Die Nummer 1.2 im Code zeigt die Stärke der Skalierung an. So kannst du beeinflussen, wie sehr der Text skaliert werden soll. 1 ist dabei der Standard-Wert. Wenn du also 0.8 angibst, wird dein Text etwas geringer bzw. langsamer skaliert:

jQuery("#responsive_headline").fitText(0.8);

Praktisch ist auch die Möglichkeit, eine minimale und maximale Text-Größe in Pixeln zu bestimmen. So hast du eine bessere Kontrolle, wie dein Text auf der Webseite angezeigt wird. Die Text-Größen Begrenzungen kannst du so im Code angeben:

jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

Wichtig ist trotz des Einsatzes von FitText in deinem CSS ebenfalls eine Text-Größe für deinen Text anzugeben. So wird der Text auch ohne Aktivierung von JavaScript noch korrekt angezeigt.

FitText WordPress-Plugin

Möchtest du den Code nicht selbst in dein WordPress-Theme einbinden, kannst du alternativ auch das WordPress-Plugin „FitText.js, a jQuery plugin for inflating web type“ zur Einbindung des JavaScripts installieren.

Weitere JavaScript-Plugins für responsive Webdesigns

Weitere interessante JavaScript-Plugins für responsive Webdesigns von Paravel sind übrigens auch FitVids für die automatische Skalierung eingebetteter Videos und Lettering.js für eine individuelle Kontrolle einzelner Buchstaben mit Hilfe von JavaScript.

  1. Vielen Dank! danach habe ich schon gesucht. Das die Lösung im Endeffekt so einfach ist habe ich nicht gewusst.
    Lieben Gruss
    Christian

  2. Theo Machnich

    Hi Ellen,

    vielen Dank für Deine wertvollen Tipps.
    Ich versuche gerade mittels des Roayalsliders von Dmitry Semenov solchen Content in einem Slider zu Verfügung zu stellen.
    In dem Slider kann man mittels HTML-Block inhalte anzeigen, leider habe ich noch nichts richtiges zustande gebracht :-(
    Vielleicht kann man ja das Plugin dazu auch irgendwie benutzen.
    Wäre toll, wenn Du dam mal was dazu bringen könntest.
    Gruss Theo

  3. Theo Machnich

    Schade, dass es keine Antworten gibt von Ellen :-(

  4. Gute Lösung für jQuery User. Wer Fittext ohne jQuery braucht, wird hier fündig:
    https://github.com/adactio/FitText.js

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *