Große Schriften auf Websites – vor allem bei Überschriften – liegen derzeit im Trend. Doch gerade hierbei macht sich das bescheidene Kerning von Schriften im Browser bemerkbar. Zumindest für typophil veranlagte Webdesigner und -entwickler mag der Abstand zwischen den Buchstaben gerade bei großen Schriften stark verbesserungsfähig sein. Das jQuery-Plugin TypeButter hilft und sorgt für perfektes optisches Kerning zwischen den Buchstaben.

So funktioniert TypeButter

TypeButter besteht aus dem eigentlichen jQuery-Plugin sowie einer Erweiterung, welche die jeweiligen Kerning-Paare einer Schrift beinhaltet. Für die Standardschriften Arial, Georgia, Helvetica, Times und Verdana stellt TypeButter Erweiterungen mit optimiertem Kerning zur Verfügung.

TypeButter

Plugin und die jeweilige Erweiterung müssen zusammen mit jQuery im HTML-Kopf eingebunden werden:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="typebutter.jquery.min.js"></script>
<script type="text/javascript" src="typebutter.arial.js"></script>

Anschließend kann das Kerning per jQuery auf beliebige Elemente angewendet werden. Soll das Kerning für alle Texte eines Dokumentes eingesetzt werden, lässt sich das wie folgt realisieren:

<script>
jQuery("body").typeButter();
</script>

Der Aufruf muss am Ende des Dokuments im Body des HTML-Dokumentes eingebunden werden. Fortan wird das Kerning von TypeButter auf alle Texte angewendet. Gerade bei großen Schriften macht sich das bemerkbar. Hier sind Buchstabenzwischenräume ohne TypeButter teils zu groß.

Beispiel: Text mit (oben) und ohne (unten) TypeButter

TypeButter umschließt jeden Buchstaben mit einem eigenen Element, dem KERN-Element. Diesem Element wird die CSS-Eigenschaft „letter-spacing“ zugewiesen, über die sich der Abstand definiert.

Kerning selbst festlegen

TypeButter kann auch auf Schriften, für die das Plugin keine Erweiterung zur Verfügung stellt, angewendet werden. Dazu müssen Abstände zwischen Buchstabenpaaren manuell optimiert und anschließend als Erweiterung heruntergeladen werden.

TypeButter bietet eine ganze Liste bekannter Webfonts an, für die Kerning-Paare angelegt werden können. Dazu stellt das Plugin in einer Liste alle Buchstabenkombinationen dar, für die optimierte Abstände definiert werden sollten („AA“, „AC“, „AG“ etc.).

Kerning-Paare selbst festlegen mit TypeButter

Insgesamt gibt es über 2.500 Paare, für die ein optimierter Abstand angegeben werden kann. Man muss also schon ein wenig Zeit in ein optimiertes Kerning investieren.

Fazit: Wem das perfekte Kerning einer Schrift auch auf der Website wichtig ist, hat mit TypeButter das richtige Werkzeug. Allerdings kann TypeButter eine Website unter Umständen deutlich langsamer machen, da das Plugin jeden Buchstaben anpasst. Bei viel Text macht sich das dann bei der Ladezeit bemerkbar.

(dpe)