Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind mittlerweile zahlreiche Schriften auf dem Markt, welche eine mehrfarbige Darstellung ermöglichen. Und dank der Webschriften kannst du solche mehrfarbigen Texte sogar im Webdesign verwenden.

Layer-Fonts im Webdesign

Was genau sind Layer-Fonts?

Layer-Fonts sind spezielle Schriftfamilien, bei denen einzelne Schnitte so gestaltet sind, dass sie übereinander gelegt werden können. Häufig sind es dekorative Elemente wie Schlagschatten, Konturen oder dreidimensional gestaltete Seiten, die auf diese Weise kombiniert werden. Wenn du jeder dieser Schriftebenen eine eigene Farbe zuweist, ergeben sich auffällige Überschriften und plakative Texte.

In Zeichen- und Satzprogrammen wie Illustrator und InDesign gibt es einfache Möglichkeiten, solche Layer-Fonts einzusetzen. Wie du mit CSS3 Layer-Fonts im Webdesign verwendest, erkläre ich dir später. Zunächst gibt es einige der schönsten und interessantesten mehrfarbigen Schriften, die alle als Webfont erhältlich sind.

Dreidimensionale Schriften

Gerade bei Schriften mit dreidimensionaler Optik bietet sich eine mehrfarbige Darstellung an. Die „Core Circus“ gehört daher sicher zu den interessantesten Layer-Fonts. Es gibt 20 verschiedene Schnitte, die sich unterschiedlich miteinander kombinieren lassen. So gibt es solche, die Dreidimensionalität simulieren. Diese kombinierst du zum Beispiel mit einem der zahlreichen flächigen Schnitte, welcher dann etwa die Vorderseite der 3D-Schrift darstellen kann. Neben Linien und Schraffuren gibt es ebenso gepunktete Schnitte. Zu guter Letzt sind da noch Schatten, die du hinzufügen kannst.

layer-fonts_core-circus

Noch einige Schnitte mehr – insgesamt 38 – hat die „Mrs Onion“, die prinzipiell ähnlich aufgebaut ist, wie die „Core Circus“. Hierbei hast du allerdings die Möglichkeit, die einzelnen Seiten der dreidimensionalen Schrift unterschiedlich farbig darzustellen. So gibt es separate Schnitte für die unteren und die rechten Seiten. Zusätzlich sind für die Vorderseite schraffierte und gepunktete Schnitte vorhanden.

Bis zu sechs Schnitte kombinierst du problemlos und erhältst dadurch sehr detailreiche und mehrfarbige Texte, die sich ideal für großzügig gestaltete Überschriften eignen.

layer-fonts_mrs-onion

Eine etwas andere 3D-Optik bringt die „Epilepsja“ mit sich. Die Schrift spielt mit der Illusion der Dreidimensionalität. So entsteht hier und da zwar der Eindruck eines 3D-Effektes. An anderer Stelle erscheint die Schrift jedoch wieder zweidimensional.

Es gibt drei Schnitte, welche Kontur, Füllung und Hintergrund darstellen. Die „Epilepsja“ fällt in jedem Fall auf und sorgt sicher hier und da für etwas optische Verwirrung.

layer-fonts_epilepsja

Historische Schriften

Neben interessanten 3D-Effekten bieten sich Layer-Fonts immer wieder an, um historische Schriften nachzuempfinden. Gerade in Zeiten vor der digitalen Typografie wurden viele typografische Effekte mit großem manuellen Aufwand realisiert. Dank Layer-Fonts gelingen einem solche Effekte nun im Handumdrehen.

So gibt es mit der „Brim Narrow“ eine Schrift, welche sich an klassischen Schriften aus dem 18. Jahrhundert orientiert. Sie erinnert an die detailreichen und filigran gezeichneten Schriften, wie man sie von Geldscheinen und anderen wertigen Dokumenten kennt.

layer-fonts_brim-narrow

An die Schriften des Art Déko erinnert die „Core Deco“. Die Schrift weist die großen Rundungen und die teils strenge geometrische Ausrichtung aus, wie sie für die Typografie dieses Stils typisch war. Schraffuren, Schatten und 3D-Effekte sind hier als eigene Schnitte vorhanden, um diese farblich abzusetzen.

layer-fonts_core-deco

Dass man auch gebrochene Schriften durchaus zeitgemäß interpretieren und einsetzen kann, zeigt die „Whisky“. Es gibt unterschiedlich fette Flächenschnitte, die du mit unterschiedlich starken Konturenschnitten kombinierst. So ergeben sich für eine gebrochene Schrift ungewöhnliche Effekte, mit denen du sehr schön die klassische Wahrnehmung gebrochener Schriften auf den Kopf stellen kannst.

layer-fonts_whisky

Handschriften

Von Hand geschriebene oder gezeichnete Texte sind immer wieder sehr beliebt – sowohl für verspielte als auch für elegant anmutende Typografie. Hier habe ich einige Layer-Fonts für dich, die mit besonderen Effekten glänzen.

Die „Festivo Letters“ simuliert eine mit dem Stift gezeichnete Schrift. Buchstaben sind teils ausschraffiert, teils mit Punkten umrandet und ausgemalt. Dank der Kombination verschiedener Schnitte lässt sich Farbe mit einbringen, was den verspielten Charakter der Schrift unterstützt.

layer-fonts_festivo-letters

Auch „Le Havre Hand“ simuliert eine per Hand gezeichnete Schrift – hier sogar mit 3D-Optik. Verschieden starke Schraffuren werden mit Konturenzeichnungen kombiniert und ergeben trotz der massiven Buchstaben eine verspielte Optik.

layer-fonts_le-havre-hand

Wer es gerne etwas filigraner mag, findet möglicherweise Gefallen an der „Weingut“. Die elegante Schreibschrift ist mit floralen Elementen verziert und wirkt recht edel und dennoch verspielt. Für den besonderen Look gibt es einen speziellen Dekoschnitt, mit dem du einzelne florale Elemente in anderer Farbe hinzufügst.

layer-fonts_weingut

Layer-Fonts im Webdesign verwenden

Willst du Layer-Fonts auf der eigenen Website einsetzen, müssen die entsprechenden Schnitte der Schrift erst einmal als Webfont her. Jetzt hast du natürlich die Möglichkeit, mehrere Elemente mit demselben Text und den verschiedenen Layer-Schnitten auszuzeichnen und übereinander zu legen. Semantisch ist von dieser Variante abzuraten, da derselbe Texte dann mehrfach vorhanden ist. Daher ist die Kombination der Pseudoelemente „::before“ und „::after“ mit einem Data-Attribut vorzuziehen.

Dazu wird der Text, der im Layer-Font gesetzt wird, nur mit einem Element ausgezeichnet. Dieses Element bekommt ein HTML5-Data-Attribut, welches den Text noch einmal enthält.

<p data-text="Dr. Web Magazin">Dr. Web Magazin</p>

Der Wert im Attribut „data-text“ spielt semantisch keine Rolle. Er wird nur gebraucht, weil du per CSS Zugriff auf den Inhalt dieses Attributes hast. Und alles weitere erfolgt nun ebenfalls per CSS. Dem „<p>“-Element weist du per CSS den Schnitt zu, der im Hintergrund dargestellt werden soll.

p {
  font-family: "LayerFont 1";
  color: blue;
}

Mit dem Pseudoelement „::after“ sorgst du nun dafür, dass dieses den Inhalt des Data-Attributes ausgibt. Es wird dabei absolut platziert, so dass es über dem eigentlichen „<p>“-Element liegt. Außerdem weist du „::after“ die Schrift für den Vordergrund und eine andere Farbe hinzu.

p::after {
  font-family: "LayerFont 2";
  color: red;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

Willst du einen dritten Schnitt ergänzen, setzt du zusätzlich noch „::before“ ein und verfährst ähnlich wie bei „::after“. Fertig ist die beeindruckende Web-Schrift!

(dpe)

Denis Potschien ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

wpDiscuz