Webdesign- und Freeware-Tipps

Texteffekt: Buchstabendabstand verringern / vergrößern

Sicherlich ist dieser Tipp nicht unbedingt das Neueste vom Neuesten, da er im Printbereich schon häufig verwendet wird, dennoch stellt dieser Effekt mit der richtigen Anwendung im Internet einen Hingucker dar. Das Verändern des Buchstabenabstandes bei beliebigem Text hat je nach Wert und Art unterschiedliche Wirkungen auf den Betrachter.

Der Buchstabenabstand (Zeichenabstand) lässt sich in allen Grafikprogrammen bei den Textoptionen einstellen, entweder negativ oder positiv. Ob dieser Effekt gut aussieht hängt vom Text selber und natürlich sehr stark von der Schriftart ab. Am besten dafür geeignet sind serifenlose Schriftarten.

Ein Beispiel:

Zu den Abbildungen:

Die obere Grafik zeigt Text in normaler Schrift. Der untere, komplett identische Text mit derselben Größe, hat jedoch einen Zeichenabstand von -1.

Zugegeben, dieses Beispiel ist nicht extrem, aber die Schrift wird durch weniger Zeichenabstand attraktiver. Ob eine Schrift besser aussieht kommt hauptsächlich auf die Schriftart selbst an. Eine Rolle spielt natürlich auch noch die Größe, in der der Text erscheint. Je größer ein Text ist, desto mehr Wirkung und desto exakter kann das Grafikprogramm den Abstand verändern. Allerdings ist es immer eine Sache der subjektiven Empfindung, ob der Text für einen selbst so besser wirkt oder nicht.

Zweites Beispiel:

Zu den Abbildungen:

Die obere Grafik zeigt Text in normaler Schrift. Der untere komplett identische Text hat dieselbe Größe, hat jedoch einen Zeichenabstand von -2.

Hier kann man den Unterschied sicherlich deutlicher erkennen. Jetzt wisst ihr, wie man diesen Effekt bei Texten als Grafik anwenden kann. Es geht aber auch ohne Grafik, und zwar als Text auf einer Webseite. Dazu ist eine CSS-Angabe notwendig.

.text {
letter-spacing: -1px;
}

Aber Vorsicht! Bei einigen Fonts klappt es nicht in allen Schriftgrößen. Um euch die Probleme zu zeigen, habe ich eine kleine Tabelle erstellt. (Rot sind alle Zeilen, die mit der CSS-Angabe belegt sind, Schwarz ist normal)

Wie ihr seht kommt es bei zwei Kombinationen zu einem Problem, da so der Text kaum zu entziffern ist. Ansonsten ist eurer Kreativität nun keine Grenzen mehr gesetzt, zumindest in dieser Hinsicht.

Natürlich kann man den Effekt auch in entgegengesetzter Richtung verwenden. Text, der einen großen Zeichenabstand hat, lässt sich auch für bestimmte Zwecke einsetzen. Dazu benutzt man bei der CSS-Angabe einfach einen positiven Wert.

Zum Beispiel letter-spacing: 5px;