Webfonts sind aus dem Web nicht mehr wegzudenken.
Wir sind schon lange nicht mehr auf die Systemschriften als kleinsten gemeinsamen Nenner angewiesen. Mit den gestiegenen Möglichkeiten, steigen aber auch die Anforderungen und Herausforderungen. Die erste ist die Auswahl des oder der passenden Webfonts für das aktuelle Projekt.
Mit diesem Artikel will ich dir Möglichkeiten aufzeigen passende Webfonts-Kombinationen zu finden. Du findest eine umfangreiche Sammlung an typografischen Gestaltungen mit Webfonts. Dazu habe ich einige Webfonts-Designs gestaltet, die dir mit Quellcode zur freien Verfügung stehen (also zum hemmungslosen copy & pasten). Und am Ende gibt es ein kleineres Schmankerl…
Inhaltsverzeichnis
Zuerst möchte ich dir einige tolle Webseiten vorstellen, die auf unterschiedliche Art und Weise den Einsatz von Webfonts präsentieren. Hier findest du jeweils jede Menge Anregungen und Inspirationen für deine eigenen typografischen Gestaltungen.
Webfonts-Galerien
Diese sammeln und präsentieren Webseiten, die Webfonts einsetzen – und das meistens gestalterisch ansprechend.
Typewolf
Typewolf ist eigentlich mehr als nur eine Sammlung von Webfonts-Webseiten. Der Designer Jeremiah Shoaf führt auch einen lesenswerten Blog, der immer wieder spannende Webseiten und Webfonts vorstellt. Und zusätzlich gibt es einen hilfreichen Typografie-Guide und weiterführende spannende Typografie-Links.
Typ.io
Das Motto von Typ.io lautet What font goes with what?
Eine umfangreiche Sammlung von Webseiten (inzwischen über 1.500) und deren Webfonts, die sich nach unterschiedlichen Kriterien sortieren lassen.
Typekit – Design Galerie
Es gibt ja nicht nur die Google Webfonts 😉 Sehr bekannt und beliebt ist der Anbieter Typekit. Eine Sammlung von Webseiten, die Schriftarten von Typekit verwenden:
Webfonts-Kombinationen finden
Häufig wird ja nicht nur ein einziger Webfont eingesetzt (obwohl das mit mehreren Schriftschnitten ja durchaus auch sehr spannend sein kann). Meistens wird aber mindestens eine zweite Schriftart gesucht. Das bedeutet man sucht nicht nur Schriftarten, die zum Thema der Webseite passen, sondern welche, die auch zueinander passen. Und das ist schnell heikel.
Zwei Webseiten haben sich dieser Problematik angenommen und präsentieren daher Kombinationen von Webfonts. Diese mögen nicht immer für das eigene Projekt gleich passend sein, aber als Anregung sicherlich mal ganz nett:
Type Genius
Zuerst wird der erste Webfont ausgewählt und dann bekommt man verschiedene Schriftart-Ergänzungen präsentiert. Praktischerweise gleich mit Webseiten auf denen die Webfont-Kombinationen im Einsatz sind.
Font Pair
Vorschläge für Webfont-Kombinationen bietet Font Pair, sortiert nach den klassischen – aber auch sehr einfachen – Kriterien serifen und nicht-serifen Schriftarten.
Webfonts-Designs
Einige Designer haben einmal gezeigt, was sich mit Webfonts anstellen lassen. Das Ergebnis sind unterschiedliche typografische Designs, die rein mit HTML, CSS und jeder Menge Webfonts umgesetzt sind. Alle einzigartig und auf ihre eigene Art inspirierend:
the web is typography
Google Web Fonts Typography Project
Beautiful Web Type
Beautiful web type combinations
Typesource
21 Webfonts-Kombinationen samt Quellcode zum kopieren
Ich habe extra für dich 21 Webfonts-Kombinationen mit Google Webfonts erstellt, die du für deine eigenen Projekte einsetzen kannst. Dazu wird auch gleich der passende Quellcode (HTML & CSS) geliefert.
See the Pen Webfonts-Layouts by Martin Hahn (@hahnsinn) on CodePen.
Der „Colourful Webfonts Generator“
Und zum Schluss habe ich noch eine kleine Webfont-Spielerei für dich:
Ich kann es nicht lassen und habe einen kleinen Webfont-Farbe-Generator erstellt – den Colourful Webfonts Generator.
Dazu habe ich 100 harmonische Farbkombinationen entworfen und 100 Webfont-Kombinationen (mit passenden Schriftschnitten) gestaltet. Per Klick wird jeweils eine Kombination zufällig ausgewählt, so dass es am Ende ziemlich genau 10.000 Möglichkeiten gibt (100 Webfont-Kombinationen x 100 Farbkombinationen)!
Teste es aus und spiele damit rum, vielleicht findest du ja die passende Kombination für dein Projekt:
Fazit
Content is King und die typografische Gestaltung sorgt dafür, dass dieser überhaupt erst gut aufgenommen werden kann.
Das Web ist eben Typografie. Es geht um die Lesbarkeit der Texte.
Typografie ist aber auch Design, Schriftgestaltung.
Die Gestaltung des Textes soll die inhaltliche Aussage des Textes visuell transportieren. Ein Gefühl vermiteln. Die Gestaltung des Textes soll eine visuelle Hierarchie schaffen, sie ist die Benutzerschnittstelle, sie gestaltet das User Interface, sie kreiert die User Experience.
Dank der Webfonts sind die Möglichkeiten enorm gestiegen. Ähnlich wie im Print-Design stehen unzählige Schriftarten zur Verfügung. Wer die Auswahl hat, hat die Qual.
Ich hoffe der Artikel und die gezeigten Links können dir bei deiner Auswahl helfen. Lass es uns in den Kommentaren wissen.
Hey,
coole Ideen und Tipps, danke schön.
Grüße
Markus