Schöne Effekte mit Webfonts erzielen


Der gängigen Meinung nach können auch einfachste Texteffekte im Web nur über die Umwandlung in ein Bild realisiert werden. Für alle aktuellen Browser gilt das aber schon lange nicht mehr. So wie individuelle Schriften über Webfonts realisiert werden können, lassen sich über geschickt gewählte CSS-Parameter viele interessante Texteffekte einsetzen.

Linotype.com bietet einen extrem einfachen Service, diese Effekte kennenzulernen und spielerisch auszuprobieren. Rufen Sie einfach die Detailansicht der Schrift auf und wechseln hier in die Ansicht des Webfonts. Über den „Bearbeiten-Knopf“ können Sie jetzt den Beispielstext und den Stil der Schrift verändern. Neben Standard-Parametern wie Schriftgröße, Zeilenabstand und Farbe können Sie über das letzte Popup in der Reihe verschiedene Texteffekte aktivieren und gleich in der Vorschau betrachten. Unter der Vorschau wird der zuständige CSS-Code angezeigt, den Sie entweder direkt übernehmen oder als Basis für weitere Anpassungen benutzen können. Einige ausgewählte Effekte, die übrigens alle auf geschickt gesetzten Parametern für den CSS-Schatten basieren, werden im Folgenden kurz vorgestellt.

Kontur

Mit diesem Effekt geben Sie der Schrift eine Outline. Vor allem in linear aufgebauten Gestaltungen wird dieser Effekt immer wieder gerne benutzt.

Schein

Ein nach außen gerichteter farbiger Schein ist, vorsichtig eingesetzt, ein beliebtes Mittel, um Text vor einem unregelmäßigen Hintergrund eine bessere Lesbarkeit zu geben. Nutzen Sie diesen Effekt zum Beispiel, um Text perfekt in ein Bild zu integrieren.

Letterpress

Leicht erhabene Buchstaben können gezielt verwendet das i-Tüpfelchen einer Gestaltung, vor allem im Headlinebereich, sein. Lassen Sie sich inspirieren.

Vintage

Ein linearer, leicht abgesetzter 3D-Effekt erinnert an die Typo der 1950er- und 60er-Jahre. Auf den ersten Blick wird niemand an einen CSS-Effekt denken.