Prozentuale Angaben machen es möglich, Inhalte einer Website per CSS auf die Breite des Browserfensters zu skalieren. Selbst Bilder lassen sich auf diese Weise so skalieren, dass sie immer eine Breite in Relation zur Fenstergröße einnehmen. Bei Texten funktioniert das nur bedingt. Zwar kann eine Textspalte entsprechend skaliert werden, nicht aber die Schriftgröße. Das jQuery-Plugin FitText ändert das.

FitText

Das Prinzip von FitText ist einfach: Wird das Plugin auf einen Text angewendet, wird die Schriftgröße in Relation zur Breite des Elternelementes hoch- oder herunterskaliert. So nimmt der Text – unabhängig davon, wie groß das Browserfenster ist – immer gleich viel Platz ein.

FitText einsetzen

Zunächst muss das Plugin zusammen mit jQuery im Seitenkopf eingebunden werden:

1

<script src="http://code.jquery.com/jquery-1.7.2.js"></script> <script src="jquery.fittext.js"></script>

Anschließend wird den HTML-Elementen, die mit FitText skaliert werden sollen, per jQuery-Selektor das Plugin zugewiesen:

1

$("#headline").fitText();

Mehr ist zunächst nicht zu machen, um zu erreichen, dass FitText die Texte skaliert. Allerdings gibt es noch zusätzliche Einstellmöglichkeiten, um die Skalierung der Texte zu beeinflussen. So kann über die optionale Angabe eines Dezimalwertes eingestellt werden, wie stark die Schrift vergrößert oder verkleinert werden soll. Der Standardwert ist Eins. Werte größer als Eins skalieren die Schrift weniger stark, Werte kleiner als Eins skalieren die Schrift stärker:

1
2

$("#headline1").fitText(0.5); // Starke Skalierung
$("#headline2").fitText(5); // Geringe Skalierung

Schriftgrößen einschränken

Als zusäzliche Option kann eine Einschräknung für die Schriftgröße eingestellt werden. Auf diese Weise wird eine Schrift nie kleiner als die Mindestgröße und nie größer als der Maximalwert dargestellt:

1
2
3
4

$("#headline").fitText(1, {
  minFontSize: "25px",
  maxFontSize: "175px"
});

Je nach Länge der Texte ist es sinnvoll, Schriftgrößen einzuschränken, da es ansonsten schnell zu Einbußen bezüglich der Lesbarkeit kommen kann.

Fazit: Gerade für responsive Websites, bei denen die Schriftgröße mitskaliert werden soll, bietet sich der Einsatz von FitText an.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)