Schriftarten miteinander zu kombinieren, ist eines der schwierigsten Dinge an einem Webdesign-Projekt und unzählige Fonts zur Verfügung zu haben, macht die Sache nicht einfacher.

Die Wahl des Fonts ist mehr Kunst als Wissenschaft. Daher geht das Lesen über Typografie, individuelle Schriftarten und Schriftenhersteller Hand in Hand mit jeder Menge Übung. Allerdings, wie Tim Brown in seinem Ratgeber Combining Typefaces sagt – “Übung kann unverschämt viel Zeit kosten, wenn man nicht achtsam ist“. Derweil erfordert die Website, an der du arbeitest, unverzüglich deine Typografiekenntnisse. Dir muss also eine gute Lösung einfallen, und das schnell.

In diesem Artikel findest du jede Menge Font Tools, die dir beim Lernen über Web-Typografie behilflich sein werden und dir helfen, wunderschöne Schriftkombinationen zu finden.

Wir werden dir ebenfalls zeigen, wie einige der aufgelisteten Font Tools dich die Browserdarstellung deiner ausgewählten Fonts testen lassen und einfache Wege, sie in deinem Projekt anzuwenden.

Tolle Schriftkombinationen

Websites mit guten Schriftkombinationen zu durchstöbern, ist ein guter Weg, ein Auge dafür zu bekommen, wie Schriftarten zusammen funktionieren und in welchem Kontext sie verwendet werden. Für ein paar tolle Beispiele, sieh dir die Quellen unten an.

Google Fonts Pairing Feature

Google Fonts ist nicht einfach nur ein Service, individuelle Schriften auszuwählen. Es ist außerdem ein Ort, an dem man mehr über seine ausgesuchten Schriften und weitere Schriften, die gut zu diesen passen, lernen kann.

google fonts

Obwohl ich die Quelle gut finde, sagt sie jedoch aus meiner Sicht wenig über den Kontext aus, in dem die Schriften verwendet werden. Zum Beispiel wäre es interessant zu wissen, welche Webseiten bestimmte Schriftkombinationen nutzen, ob diese textlastig, wie Blogs oder News-Seiten sind, oder vielmehr auf Bilder fokussiert sind.

Diese Informationen sind von hohem Wert, wenn es darum geht, die richtige Schriftkombination zu finden. Schauen wir uns also weiter um.

Beautiful Web Type

genealogy

Beautiful Web Type zeigt eine Auswahl an Schriftarten von Google Fonts.

Die Beispiele sind ein bisschen allgemein – sie kommen nicht von echten Webseiten mit bestimmten Zielen und Strategien. Abgesehen davon, zeigt die Website die Schriftarten in wunderschön gestalteten Abschnitten. Beachte, wie Texthierarchie, Schriftstärke und Stile dazu beitragen, den Text leichter lesbar zu machen und die richtige Stimmung zu vermitteln.

Google Web Fonts Typographie Projekt

typography pairing

Eine weitere inspirierende Sammlung an Schriftkombinationen von Google Fonts findet man auf der Seite des Google Web Fonts Typografie Projekts.

Die Designs auf dieser Seite sind wunderschöne Illustrationen von Schriftkombinationen und wie sie im Web angewendet werden. Wie es im README-Teil des Projekts heißt: „Das Hauptziel besteht darin zu kommunizieren, nicht zu dekorieren.“

Typ.io

typeio

Typ.io liefert tonnenweise Informationen über angesagte Typografiedesigns und eine moderne Bandbreite an Webseiten, mit gut zusammenpassenden Schriftarten.

Du siehst nicht nur passende Schriftarten, sondern wirst auch ein Bild davon bekommen, welche Rolle die Schrift im Design echter Webseiten spielt – Welche Schriftart wird für Überschriften benutzt, welche für den Hauptteil und die Font-Auswahl, die der Designer für eine bestimmte Art Website benutzt hat, wie beispielsweise Portfolio, Blog, Marketing usw.

Tatsächlich kannst du Webseiten nach Branche, Schriftart und Font Service suchen.

search-tool

Zum Schluss klicke auf das Bild mit deiner bevorzugten Schriftkombination und du bekommst den CSS Code und die Links zu den Diensten, wo du die Fonts kaufen und herunterladen kannst.

Fonts In Use

fontsinuse

Fonts in Use ist eine weitere bekannte Quelle, die eine Bandbreite an Schriftsammlungen, die gut zusammenpassen, bietet und von echten Webseiten stammen.

Die beeindruckende Suchfunktion lässt dich das Archiv nach folgenden Kriterien durchsuchen:

  • Branchen
  • Formate
  • Schriftarten

Um es noch mal deutlich zu sagen: Zu zeigen, wie Schriften auf Webseiten verschiedener Branchen und in verschiedenen Zusammenhängen funktionieren, ist essentiell, um ein Auge dafür zu entwickeln, welche Schriftarten die passenden sind.

Interaktive Font Tools

Die Quellen, die ich unten aufgelistet habe, benötigen deine Eingabe auf der Suche nach der perfekten Schriftkombination. Sei es nun das Testen von Schriftarten oder einfach das Treffen einer Auswahl und Warten auf eine Anzahl passender Treffer, diese Tools sind interaktiv und machen Spaß.

Typespiration

typespiration

Das Schöne an Typespiration ist, dass es dich verschiedene Designs durchstöbern lässt, welche wunderschöne kostenlose Fonts und Farbpaletten zeigen.

Wenn du auf eines der Designs klickst, hast du folgende Optionen:

  • Vorschau einer Großaufnahme des Designs. Wenn du den Baseline Grid Button oben rechts klickst, kannst du sehen, wie der Text im Grundlinienraster sitzt.
  • Erfahre etwas über die Fonts und Farben, die im Design verwendet werden.
  • Kopiere den HTML und CSS Code, den du brauchst, um das Design in deinem Projekt nachzubilden.

Font Pair

font-pair

Font Pair ermöglicht es dir, Schriftkombinationen anhand einer Reihe von Filtern zu durchsuchen:

  • Sans Serif/Serif: Der Titel wird eine Sans Serif Schrift verwenden, der Textkörper eine Serif Schrift. Serife Buchstabenformen haben kleine Schnörkel am Ende jedes Buchstabens, Sans Serif nicht.
  • Serif/Sans Serif: Serif für den Titel, Sans Serif für den Textkörper.
  • Sans Serif/Sans Serif: Verwendet Sans Serif sowohl für den Titel als auch den Textkörper.
  • Kursiv/Sans Serif: Kursiv für den Titel, Sans Serif für den Textkörper. Kursive Schriftarten sehen aus wie Handschrift, was gut für Titel und Logos passt, aber am Besten für den Textkörper vermieden wird
  • Kursiv/Serif: Kursiv für den Titel, Serif für den Textkörper.
  • Serif/Serif: Serife Schriftarten sowohl für den Titel als auch den Textkörper.

Wenn du dich bereits für eine Schriftart entschieden hast und nach einer passenden Schrift suchst, gib einfach ihren Namen in die Suchleiste oben auf der Seite ein. Die Website wird eine Liste von Vorschlägen anhand deiner Auswahl anzeigen:

search

Noch eine coole Sache, die du hier tun kannst, ist, den Beispieltext durch deinen eigenen zu ersetzen. Das ist großartig, um zu sehen, wie deine ausgewählte Kombination mit dem Inhalt deiner Website funktioniert:

lato

Ziemlich cool, oder?

Type Genius

typegenius

Type Genius ist ein intelligenter Dienst, der dich tolle passende Fonts für die Schrift deiner Wahl finden lässt.

Wähle einfach einen Font und klicke auf View Matches. Type Genius wird dir eine Seite mit folgenden Sachen zeigen:

  • Vorschläge für Kombinationen mit deiner gewählten Schriftart
  • Links zu Webseiten, welche die vorgeschlagenen Kombinationen nutzen
  • Bearbeitbare Titel und Textkörper mit deiner Schriftwahl
  • Links zum Dienst, wo du die Font Dateien herunterladen kannst

Font Combinator

combo

Font Combinator ist ein leistungsstarkes Online-Tool und großartig, um passende Schriftkombinationen zu durchstöbern, entworfen von Typotheque, einem Schriftenhersteller und Design Studio in den Niederlanden.

Du kannst Fonts aus dem lateinischen, griechischen und kyrillischen Zeichensatz wählen. Eine Auswahl-Box lässt dich Font Kombinationen nach verschiedenen Kriterien durchsuchen, wie beispielsweise elegant, klassisch, modern usw. Du kannst den angezeigten Text komplett bearbeiten, die Stile der gewählten Schriftart anpassen und jede aufgelistete Schriftart auf den Anzeigebereich rechts auf der Website ziehen, um sie auszuprobieren.

Adobe Typekit Combos

typekit

Adobe Typekit Combos von Fontdata ist ein hübsches Tool, noch in der Beta-Version, das dich einen Typekit Font auswählen lässt und den passenden Font für dich findet.

Nachdem du deine Wahl getroffen und den View Button gedrückt hast, zeigt das Tool eine Liste von Vorschlägen passender Webkit Fonts und Links zu einer Anzahl von Webseiten, wo du die Fonts sehen kannst, an.

Font Tools mit denen du lernst, wie man Schriften kombiniert

Die Tools, die ich unten aufgelistet habe, sind nicht nur gut darin, Vorschläge zu machen, welche Fonts gut zusammenpassen. Sie vermitteln dir auch häppchenweise Wissen über Schriften und wie man Schriftarten miteinander kombiniert.

Type Connection

type connection

Dies ist einer meiner Lieblinge. Type Connection von Aura Seltzer nennt sich selbst ein Typografie-Dating-Spiel.

Es ist ein höchst interaktives Tool in Form eines Dating-Spiels, um tolle Kombinationen zu finden und über Typografie zu lernen.

Type Connection beginnt mit bekannten Schriftarten, die nach dem passenden Match suchen. Du bist der Kuppler, der den idealen Partner finden muss, indem er eine der Herangehensweisen zum Kombinieren von Schriften anwendet. Bei jedem Schritt lernst du etwas über die Bedeutung von Typografiebegriffen, die Geschichte der Schrift usw. Sobald das Spiel vorbei ist, findest du heraus, weshalb das Match passt oder nicht passt.

Sein Schöpfer hat Type Connections Hauptziel so zusammengefasst: „Durch das Spielen von Type Connection, vertiefst du deine Verbindung zu Schriften“.

Hör aber nicht bei dem Spiel auf. Die Type Connection Website ist eine Schatztruhe voll mit typografischen Gold, inklusive einer Auswahl an Referenzen über Typografie.

Mixing Typefaces (PDF)

mixing

Mixing Typefaces ist eine PDF Kopie einer Seite von U&lc (Upper and lower case, Groß- und Kleinbuchstaben), einer historischen Publikation, die auf die Design-Community abzielt.

Wähle eine Schriftart von der vertikalen Achse links für den Textkörper und kreuze sie mit einer Schriftart auf der horizontalen Achse. Die Zahl innerhalb der Box am Kreuzungspunkt zweier Schriftarten zeigt den Grad der Kompatibilität zwischen ihnen an:

  1. Kombiniere, wie du willst
  2. Nicht gerade eine konservative Wahl
  3. Überleg’s dir noch mal

The Art of Mixing Typefaces

mix

The Art of Mixing Typefaces ist eine tolle Infografik über das Kombinieren von Google Fonts, entworfen von FastPrint, welche von dem U&lc Dokument, das ich oben aufgelistet habe, inspiriert ist.

Die Informationen werden durch Farben statt Zahlen vermittelt, aber es funktioniert so ziemlich auf die gleiche Weise.

The Art of Combining Fonts

art

The Art of Combining Fonts ist eine fantastische Infografik, um ein, zwei Dinge über das Kombinieren von Fonts zu lernen. Oh, und es macht auch Spaß, es zu lesen!

Mixing and Matching Fonts

mix2

Mixing and Matching Fonts ist eine weitere hübsche Infografik mit ein paar kleinen Typografielektionen von Fontaholic.

Die zehn Gebote der Typografie

command

Diese Infografik von DesignMantic enthält sowohl Beispiele für Schriftkombinationen als auch exzellente Tipps für Typografie.

Vorschau und Anzeige von Fonts im Browser

Bevor man einen Font kauft oder herunterlädt, ist es ratsam auszuprobieren, wie er im Browser bei unterschiedlichen Auflösungen dargestellt wird.

Die Onlinequellen unten sind hilfreich dabei, deinen gewählten Font vorab anzusehen. Einige werden dir auch dabei helfen, die Fonts in dein Projekt einzuschließen.

Typecast Prototyp Funktion

Typecast bietet eine interaktive Arbeitsfläche, um funktionierende Prototypen zu gestalten. Wenn du dir einen kostenlosen Account erstellst, kannst du dann den ganzen notwendigen HTML und CSS Code exportieren, um ihn in deinem Projekt einzufügen.

Interactive prototyping tool on Typecast website

Durch einen Klick auf einen beliebigen Teil eines Textes in der Typecast App kannst du alle möglichen Sachen machen, wie zum Beispiel:

  • Deinen eigenen Text hinzufügen
  • Schriftarten ändern
  • Alle möglichen CSS Werte anpassen, wie Hintergrundfarbe, Farbe, Schriftgröße, Zeilenhöhe usw.
  • Deine Schriftart als Vorschau in verschieden großen Anzeigefenstern anzeigen lassen
  • Kontrollieren, wie dein Text sich auf einem Grundlinienraster verhält

Web Font Blender

blender

Web Font Blender hat nicht ganz so viele Funktionen wie Typecast, aber es hat alles, was du brauchst, um schnell Schriftarten aus Google Fonts zu kombinieren, den bestehenden Text zu bearbeiten, die CSS Werte anzupassen und den Code für eine nahtlose Integration in dein Projekt abzugreifen.

Adobe Typekit Vorschau und Übertragungsdienst

typekit

Genau wie Google Fonts lässt dich Typekit von Adobe eine beeindruckende Anzahl an Fonts in der Vorschau sehen und kümmert sich darum, deine gewählten Fonts leicht auf deine Website zu übertragen. Du brauchst nicht jede einzelne Schriftart zu kaufen.

Im Gegensatz zu Google Fonts, ist Typekit ein Abo-basierter Service, der verschiedene Preiskonditionen bietet. Du kannst Typekit kostenlos probieren und aus mehr als 940 Fonts auswählen.

Es gibt eine Vielzahl an Optionen zum Durchsuchen von Fonts, inklusive Empfehlungen für Überschriften und Absätzen, Sprachen, Schriftfamilien und mehr.

Wenn du eine Schriftart in der Vorschau sehen willst, klicke einfach drauf. Auf der neuen Seite kannst du ihre verschiedenen Stärken und Stile genauer unter die Lupe nehmen und mehr über die Schriftfamilie und den Hersteller der Schrift lernen.

Wenn du auf den Muster Tab klickst, siehst du den Link Erweitertes Webschriftartenmuster öffnen. Dieser Link zeigt eine Seite, auf der du deine gewählte Schriftart in verschiedenen Größen für Textkörper und Überschriften ansehen kannst:

Specimens tab on Typekit website

Du kannst noch weiter gehen, indem du auf Schriftentester klickst, direkt neben dem Muster Tab. Jetzt kannst du deinen eigenen Text eingeben und dir eine Vorschau deiner Schriftart anzeigen lassen mit allen verfügbaren Stärken und Stilen:

Type Tester tool on the Typekit website

Sobald du einen oder mehrere Fonts auf deiner Website verwenden möchtest, klicke auf den Schrift anwenden Button in der rechten oberen Ecke der Seite und dann auf Web:

Using fonts on Typekit

Typekit verwendet Kits zum Einfügen von Fonts in einem Webprojekt. Hier ist ein kleines Tutorial, wie man ein Kit erstellt. Für ein detailliertes Tutorial gehe einfach auf die Typekit Hilfeseite.

Beginne, indem du auf den Link Neues Kit erstellen klickst, den du oben im Bild siehst.

Als Nächstes musst du einen Namen für dein Kit und die Domain deiner Website eingeben. Klicke dann auf den Weiter Button.

Popup to add a new kit on Webkit

Du hast gerade ein Kit erstellt!

Um das Kit in deinem Projekt zu verwenden, kopiere einfach den Code, den Typekit dir gibt und füge ihn in den <head> Teil deines HTML Dokuments ein. Klicke dann auf den Weiter Button, um auf die nächste Seite zu gelangen.

Code to add Typekit fonts to your project

Der letzte Schritt besteht darin, den Zeichensatz der Schrift, die Stärken und Stile auszuwählen. Behalte die Informationen zur Kitgröße unten im Pop-Up-Fenster im Auge – Je mehr Zeichensätze, Stärken und Stile, um so aufgeblähter wird deine Website.

Wenn du willst, dass Typekit sich um die Gestaltung deiner typografischen Elemente kümmert, gibt die relevanten CSS Selektoren in das Eingabefenster oben auf der Seite ein. Alternativ kannst du auch einfach die relevanten CSS Regeln im Stylesheet deiner Website eintragen.

Publishing your kit using Typekit

Wenn du fertig bist, klicke auf Veröffentlichen. Deine Website sollte innerhalb von Minuten deine gewählten Schriftarten anzeigen.

Du mochtest diesen Artikel? Verbessere deine Skills mit diesen lustigen Typographie-Spielen.

 

Dieser Artikel wurde im Original von Maria Antonietta Perna für Sitepoint geschrieben.