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:

[code]
<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>
[/code]

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:

[code]
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’ );
[/code]

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:

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

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

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

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:

[code]
jQuery("#responsive_headline").fitText(0.8);
[/code]

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:

[code]
jQuery("#responsive_headline").fitText(1.2, { minFontSize: ’20px’, maxFontSize: ’40px’ })
[/code]

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.