Kommentare 2

Kreative Web Typografie mit dem Lettering.js jQuery-Plugin

Wenn du gerne mit typografischen Elementen bei der Webseiten-Gestaltung arbeitest, hast du eventuell schon vom Lettering.js jQuery-Plugin gehört. Das Plugin wurde von Trent Walton und Dave Rupert entwickelt, um mit Hilfe von JavaScript mehr Kontrolle über die Darstellung einzelner Buchstaben, Worte eines Satzes oder Satz-Abschnitte im Webdesign zu gewinnen. Da mit Lettering.js tolle Typo-Effekte (bunte Logos, CSS-Animationen und Rotation einzelner Buchstaben) realisierbar sind, eignet sich die Verwendung vor allem im Webseiten-Logo, oder um einen Slogan-Text individuell zu gestalten.

1. So funktioniert Lettering.js

Das jQuery-Plugin fügt automatisch span-Tags mit unterschiedlichen CSS-Klassen für einzelne Buchstaben (.char1, .char2, .char3), Wörter (.word1, .word2, .word3) und Absätze (.line1, .line2, .line3) ein. So kannst du den einzelnen Elemente dann im Stylesheet unterschiedliche CSS-Eigenschaften (z.B. color, font-family, font-size) geben.

Um Lettering.js zu nutzen, musst du als erstes die jQuery-Library im head-Tags deines Codes aufrufen. Dies kannst du z.B. über die Google Libraries API tun (so musst du jQuery nicht auf deinen eigenen Server hochladen).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Wenn du eine WordPress-Seite hast, kannst du die hilfreiche Beschreibung von Frank Bültge nutzen, um jQuery über die functions.php Datei deines Themes aufzurufen.

Dann fügst du, am besten direkt darunter aber auf alle Fälle ebenfalls innerhalb des head-Tags den Code für das Lettering jQuery-Plugin ein.

<script type="text/javascript" src="deinpfad/jquery.lettering.min.js"></script>

Die Datei jquery.lettering.js findest du im Download-Ordner des Plugins. Den Link zum Download bei Github findest du ganz oben auf der Lettering.js-Webseite.

Es gibt drei verschiedene Möglichkeiten, das Lettering-Plugin einzusetzen.

1.1. Einzelne Buchstaben stylen

Zum einen kannst du span-Tags mit den durch nummerierten CSS-Klassen .char1, .char2, .char3 usw. einfügen. Dieser Stil eignet sich z.B. für ein speziell gestyltes Webseiten-Logo.

Lettering jQuery Plugin

Ist der HTML-Code für dein Webseiten-Logo:

<h1 class="logo">Rainbow</h1>

Fügst du folgenden JavaSript-Code unterhalb des jQuery und lettering.js Scripts innerhalb des head-Tags:

<script>
$(document).ready(function() {
$(".logo").lettering();
});
</script>

Alle Buchstaben werden so automatisch mit einem span-Tag und einer Klasse belegt:

<h1 class="logo">
	<span class="char1">R</span>
	<span class="char2">a</span>
	<span class="char3">i</span>
	<span class="char4">n</span>
	<span class="char5">b</span>
	<span class="char6">o</span>
	<span class="char7">w</span>
</h1>

Jetzt kannst du die CSS-Klassen mit eigenen Styles belegen:

.char1 {
	color: red;
}
.char 2 {
	color: orange;
}
usw.

1.2. Einzelne Wörter mit Lettering.js beeinflussen

Die zweite Option ist es, Lettering anzuwenden, um einzelne Wörter mit speziellen CSS-Styles anzusprechen zu können.

Lettering jQuery Plugin

Das Prinzip ist das gleiche, allerdings musst du jetzt im JavaScript-Code noch das Wort word in die Klammer hinter lettering einfügen:

<script>
$(document).ready(function() {
$(".logo").lettering(word);
});
</script>

Einsatzmöglichkeiten für diese Option könnte ebenfalls ein Logo, aber auch ein Webseiten-Slogan sein.

1.3. Einzelne Absätze unterschiedlich gestalten

Die dritte Möglichkeit kannst du das Lettering jQuery-Plugin auch das individuelle Styling einzelner Text-Absätze verwenden. So kannst du spezielle Absätze (markiert mit br-Tags) eines Textes hervorheben.

Lettering jQuery Plugin

Aus dem HTML-Code:

<p class="slogan">This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>

wird mit Hilfe folgender JavaScript-Angabe im head-Tag:

<script>
$(document).ready(function() {
$("p.slogan").lettering(lines);
});
</script>

dieser HTML-Code:

<p class="slogan">
<span class="line1">This is an amazing</span>
<span class="line2">Revolution in Typography.</span>
<span class="line3">The possibilities are endless:</span>
<span class="line4">Coloring, Vertical spacing, and Kerning.</span>
</p>

Die einzelnen Absätze im Text kannst du jetzt also über die CSS-Klassen .line1, .line2, .line3 und .line4 individuell stylen.

Die drei Beispiele sind nur die einfachsten Möglichkeiten lettering.js zu nutzen. In der Beispiel-Datei des Download-ZIP Ordners (examples / index.html) findest du noch weitere, fortgeschrittene Optionen, wie du beispielsweise zwei Wörter und die einzelnen Buchstaben der Wörter stylen kannst. Eine ausführliche Erklärung zu lettering.js kannst du außerdem auf der Webseite des Lettering.js-Entwicklers Dave Rupert nachlesen.

2. Einsatzmöglichkeiten und Inspirationen

Seit der Veröffentlichung des Plugins im Herbst 2010 haben etliche Webdesigner das Plugin für ihre kreative und innovative Webseiten-Projekte verwendet. Um die Möglichkeiten des Plugins noch besser kennenzulernen, und Inspirationen für die Verwendung in deinen eigenen Projekten zu bekommen, habe ich einige sehr schöne Beispiele zusammen gestellt.

Lettering jQuery Plugin
Atlantis World’s Fair, gestaltet von Frank Chimero

Lettering jQuery Plugin
Eldorado World’s Fair, gestaltet von Naz Hamid

Lettering jQuery Plugin
Sex Lettering, Typografie-Experiment mit Lettering.js von Andreas Hommel

Lettering jQuery Plugin
Moon World’s Fair Webseite, gestaltet von Jason Santa Maria

Lettering jQuery Plugin
Typografie auf der Webseite von Designing Monsters

Weitere schöne Inspirationen zum Umgang mit dem Plugin findest du auch in der Showcase-Galerie von Lettering.js.

3. Gibt es eine alternative Lösung zur Verwendung von JavaScript?

Das Lettering.js Plugin ist meiner Meinung nach als eine Art experimentelle Lösung zu sehen, um die Gestaltungs-Möglichkeiten von Typografie im Webdesigns voranzubringen, und so eventuell auch die Entwicklung von reinen CSS-Alternativen voran zu treiben.

Can we replace Lettering.js with CSS? I hope so. Lettering.js is a solution, but perhaps it’s not the ultimate solution.
Trent Walton, in Controlling the Web

In der Zukunft wäre sicher eine Browser-kompatible, reine CSS-Lösung optimal. Trent Walton spricht in seinem Artikel Controlling Web Typography über den Umgang mit Typografie im Web, aktuelle Entwicklungen und seine Einstellung zum Lettering.js Plugin.

Wie gefallen dir diese experimentellen Ansätze mit Typografie im Web umzugehen? Wie findest du die Lettering-Plugin Lösung, und hast du selbst schon Erfahrungen mit dem Plugin gemacht? Über dein Feedback, sowie weitere Tipps und Einsatzmöglichkeiten zum Plugin freue ich mich sehr!

2 Kommentare

Schreibe eine Antwort