---
title: "FitText für skalierbare Texte in responsive Webdesigns"
author: "Ellen Bauer"
date: 2013-04-05
lang: de
source: https://elmastudio.de/fittext-skalierbare-texte-responsive-webdesigns/
---

# FitText für skalierbare Texte in responsive Webdesigns

[FitText](http://fittextjs.com/) 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](https://elmastudio.de/wp-content/uploads/2013/04/fittext-responsive-text.jpg)

*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](https://paravelinc.com/) (der Firma des Webdesigners Trent Walton) kannst du dir kostenlos auf [GitHub downloaden](https://github.com/davatron5000/FitText.js) und zusammen mit jQuery (z.B. über die [Google Hosted Libraries](https://developers.google.com/speed/libraries/devguide#jquery)) 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](https://codex.wordpress.org/Function_Reference/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"](https://wordpress.org/plugins/fittext/) 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](http://fitvidsjs.com/) für die automatische Skalierung eingebetteter Videos und [Lettering.js](https://letteringjs.com/) für eine individuelle Kontrolle einzelner Buchstaben mit Hilfe von JavaScript.