Die perfekte Schriftkombination finden: Tipps und Tools

Typografie ist eine Philosophie für sich: Ganz gleich, ob Sie Ihrer ganzen Website einen neuen Anstrich verpassen oder einfach nur eine simple Infografik erstellen möchten, die gewählte Schriftkombination sollte schön und professionell aussehen – und wenn möglich nicht vom eigentlichen Inhalt ablenken.

Allerdings gibt es heutzutage eine beinahe unendliche Vielfalt an individuellen Schriftarten von Serifenschrift bis Serifenlosen, die kostenlos zum Download verfügbar sind. Das erschwert die Suche nach der passenden Schrift für die eigene Website.

In diesem Beitrag stellen wir Ihnen ein paar nützliche Tools zum Font Pairing vor, die Ihnen das Finden der perfekten Kombination aus Schriften erleichtern.

Tipps zum Mischen von Schriften: So finden Sie tolle Font Pairings

Sie haben die Möglichkeit, verschiedene Schriftarten zu kombinieren und hierdurch individuelle Effekte zu erzielen. So können Sie beispielsweise einem Fließtext mehr Kontrast geben und für eine bessere Lesbarkeit sorgen. Im Folgenden lernen Sie einige Aspekte kennen, die Sie in diesem Zusammenhang berücksichtigen sollten.

1. Verschiedene Schriftschnitte der gleichen Schriftfamilie mischen

Es ist nicht immer zwingend nötig, unterschiedliche Schriften zu verwenden. Innerhalb der einzelnen Schriftfamilien gibt es verschiedene Schriftschnitte, mit denen Sie für Individualität und Aufmerksamkeit sorgen. Hierzu gehören beispielsweise Fettungen, kursive Bereiche und die reguläre Schriftform. Das folgende Beispiel zeigt Ihnen, wie Sie alleine durch solche Effekte unterschiedliche Wirkungen innerhalb einer Schriftart erzielen:

Quelle: Screenshot fraeulein artista

2. Auf eine ähnliche Struktur der Schriften achten

Wenn Sie verschiedene Schriften einsetzen, sollten Sie darauf achten, Schriftmischungen mit einer ähnlichen Struktur zu verwenden. So stellen Sie sicher, dass sich die einzelnen Schriften in ihrer Wirkung unterstützen und zueinander passen. Insbesondere die Strichart und die Strichstärke spielen in diesem Zusammenhang eine wichtige Rolle.

Beispielsweise können Sie zwischen gleichmäßigen Strichen und Wechselstrichen unterscheiden. Die folgenden Beispiele zeigen, wie Schriften mit ähnlicher Struktur zueinander passen und wie unterschiedliche Schriftmischungen unstimmig und unpassend wirken:

Quelle: Screenshot Onlineprinters Magazin

Die Struktur von Great Vibes und Arial ist so unterschiedlich, dass die beiden Schriften nicht zueinander passen. Zu Charter liegen bereits größere Ähnlichkeiten vor, doch die größten Übereinstimmungen existieren bei Bodoni.

3. Genügend Differenz zwischen verschiedenen Schriftarten

Gerade haben Sie erfahren, warum Gemeinsamkeiten zwischen Schriften wichtig sind. Nun betrachten wir uns noch, warum auch Unterschiede wichtig sind. Wenn Sie verschiedene Schriften verwenden, die sich zu ähnlich sind, wird keine Abweichung deutlich.

Die leichten Unterschiede können jedoch bei Nutzern und Nutzerinnen für Irritationen sorgen. Das liegt daran, dass sie eben nicht zu 100 % identisch sind, aber nicht gegensätzlich genug, um jeweils andere Effekte zu erzielen.

Legen Sie deswegen trotz einer ähnlichen Struktur Wert darauf, dass die Schriften grundsätzlich zueinander passen. Im Folgenden finden Sie einige anschauliche Beispiele, die zeigen, dass Schriftmischungen mit wenig Kontrasten unstimmig aussehen können. Bei den ersten passen die Schriften optimal zueinander, bei den anderen sind die Unterschiede nicht deutlich genug.

So wird's gemacht:

Quelle: Screenshot Onlineprinters Magazin

Diese Schrifttypen passen von der Struktur her zueinander, unterscheiden sich aber deutlich genug voneinander, um verschiedene Effekte zu erzielen.

Nicht zu empfehlen:

Quelle: Screenshot Onlineprinters Magazin

Wenn zwei Schriften einen vergleichbaren Charakter besitzen, sind sie sich zu ähnlich und sollten nicht kombiniert werden. Das gilt selbst dann, wenn die Schriften in Details voneinander abweichen. Ebenso ist es nicht empfehlenswert, zwei Serifenlose miteinander zu kombinieren.

4. Die Messgrößen der Schriften berücksichtigen

Auch wenn zwei Schriften dieselbe Größe haben, können sie sich in ihrem Aussehen unterscheiden. Das liegt daran, dass Details wie die Kegelausnutzung oder die x-Höhe unter Umständen unterschiedlich ausfallen. Deswegen ist es wichtig, die Messgrößen so zu wählen, dass sie zueinander passen. Im Folgenden finden Sie entsprechende Beispiele:

Beispiele zur Kegelhöhe:

Quelle: Screenshot Onlineprinters Magazin

Unterschiedliche Schrifttypen nutzen den vorhandenen Kegel jeweils anders aus (oder gehen wie bei scrubble sogar darüber hinaus), wodurch selbst bei gleicher Schriftgröße jeweils andere Größenwirkungen entstehen.

Beispiele zur x-Höhe (Mittellänge):

Quelle: Screenshot Onlineprinters Magazin

5. Wählen Sie einen Hingucker

Wenn eine Schriftart als Hingucker fungieren soll, ist es wichtig, sie mit „ruhigen", weniger auffälligen Varianten zu kombinieren. So stellen Sie sicher, dass die Schriften sich nicht gegenseitig den Rang ablaufen. Als Hingucker empfehlen sich Schriftarten wie Schreibschrift oder Zierschrift, weil diese deutlich von den sonst im Onlinebereich verwendeten Schriftarten abweichen.

Im Folgenden finden Sie kombinierte Beispiele, die Ihnen zeigen, wie Sie diesen Tipp effizient anwenden:

Quelle: Screenshot Onlineprinters Magazin

7 kostenlose Tools für die perfekte Schriftkombination

Ihnen steht eine große Auswahl an Font Pairing Tools zur Auswahl, die Ihnen die Gestaltung Ihrer Website erleichtern. Einige davon stellen wir Ihnen im Folgenden vor:

1. Identifont

Identifont gilt als die größte Online-Datenbank für Schriftarten überhaupt. Hier haben Sie die Möglichkeit, gezielt nach bestimmten Schrifttypen zu suchen und sie für Ihre Zwecke zu nutzen. Neben klassischen Schriften, Serifen und Serifenlosen sind hier auch Exoten zu finden. Nach etwas Herumprobieren finden Sie so garantiert eine Schriftmischung, die perfekt zu Ihrer Website passt.

Zudem haben Sie die Möglichkeit, bestimmte Schriftmuster einzugeben. Identifont ist dann in der Lage, anhand des Musters zu erkennen, um welche Schrift es sich handelt. So können Sie spannende Schriften, die Sie irgendwo entdeckt haben, identifizieren und für sich nutzen.

Quelle: Screenshot Identifont

Identifont existiert bereits seit dem Jahr 2000 und arbeitet mithilfe einer AI (Artificial Intelligence). Diese wurde im Laufe der Jahre immer weiter ausdifferenziert, sodass sie heutzutage eine Vielzahl von Schriften kennt und bereithält.

Bei der Suche nach bestimmten Schriften greift Identifont auf spezielle Merkmale einzelner Buchstaben sowie einige typische Fragen zurück. Die Suchkriterien sind so erfolgreich, dass sie sogar auf japanische Schriften angewendet werden können und verlässliche Ergebnisse liefern.

2. Typ.io

In dieser professionell zusammengestellten Datenbank finden Sie Beispiele von trendigen Schriftkombinationen, die auf anderen Websites verwendet werden. Außerdem können Sie einen Blick in die CSS-Designer und -Designerinnen werfen, mit deren Hilfe diese Kombinationen gestaltet und formatiert wurden.

Nehmen Sie sich ein paar Minuten Zeit und scrollen Sie durch die beeindruckenden Archive oder nach Kategorien geordneten Listen von Typ.io. Wenn Ihnen eine Website ins Auge sticht, klicken Sie einfach auf „Get Under the Hood“ (Hinter die Kulissen blicken).

Dadurch können Sie ganz genau sehen, welche Schriftarten auf der Website verwendet werden, wo im Netz diese heruntergeladen oder erworben werden können, und wie sie von Designern und Designerinnen auf Websites verwendet werden können.

Selbst, wenn CSS nicht wirklich Ihr Fachgebiet ist, ist Typ.io ein nützliches Tool, wenn Sie Schriftkombinationen in Aktion erleben möchten.

Quelle: Screenshot typ.io

Typ.io verfügt darüber hinaus über eine äußerst hilfreiche Suchfunktion, mit der Sie Websites nach der verwendeten Hauptschriftart, gewünschten Schriftart oder Schriftverfügbarkeit filtern können. Und nicht nur das: Sie haben sogar die Möglichkeit, zu erfahren, welche Schriftkombinationen auf unterschiedlichen Arten von Websites am gängigsten sind (z. B. auf Blogs, Portfolios usw.).

3. Typespiration

Typespiration ist eine Datenbank, die großen Wert auf Individualität legt. Hier haben Sie die Möglichkeit, auf eine beachtliche Zahl von Fonts und Farben zurückzugreifen und diese in Ihrem ganz eigenen Sinne miteinander zu kombinieren. Sie bekommen nützliche Inspirationen geboten und können Ihre Website individuell und vielseitig gestalten.

Quelle: Screenshot typespiration

Über 10.000 Designer und Designerinnen haben bereits Designs entwickelt, die bei Typespiration zur Verfügung stehen. Außerdem steht Ihnen eine große Palette ganz unterschiedlicher Farben zur Verfügung, die kontinuierlich erweitert wird. Es ist leicht möglich, einzelne Styles miteinander zu kombinieren und zu prüfen, ob sie zueinander und zu Ihrem ganz eigenen Webprojekt passen.

4. Fonts In Use

Fonts In Use ist ein unabhängiges Archiv, das entwickelt wurde, um Designern und Designerinnen aus aller Welt die Möglichkeit zu bieten, ihre Schriftarten mit einer breiteren Öffentlichkeit zu teilen. Das Team von Fonts In Use hat es sich zur Mission gemacht, interessante Schriftkombinationen aus allen möglichen Quellen ausfindig zu machen – von Websites über Print-Kampagnen bis hin zu Paketdesigns ist hier alles vertreten.

Quelle: Screenshot Fonts in Use

Durchstöbern Sie die umfangreichen Archive, um Inspiration zu sammeln, oder sehen Sie sich Beispiele beliebter Typografien in Ihrer Branche an, indem Sie aus dem Dropdown-Menü oben auf der Seite die Option „Industries“ (Branchen) auswählen.

Wenn Ihnen eine bestimmte Schriftart besonders gut gefällt, Sie aber nicht wissen, womit diese sich gut kombinieren lässt, können Sie die Ergebnisse auch nach Schriftbildern filtern.

5. Typeconnection

Spielerisch zur passenden Schrift: Typeconnection ist ein interaktives, informatives Online-Spiel, das Ihnen dabei hilft, Schriften zu finden, die optimal zueinander passen. Schritt für Schritt beantworten Sie einige Fragen und kommen so dem Schrifttyp, der am besten zu der von Ihnen gewählten Schrift passt, kontinuierlich näher.

Typeconnection arbeitet wie moderne Dating-Websites. Es geht darum, den perfekten „Match“ zu finden, damit die einzelnen Schrifttypen perfekt harmonieren. Hierbei werden Sie nicht durch Beispiele, Profile und Fotos abgelenkt, sondern kommen ausschließlich anhand der von Ihnen gewünschten Kriterien zu der gesuchten Schriftart und können so auch die perfekte Schriftmischung herausarbeiten.

Quelle: Screenshot typeconnection

6. Font Combinator

Font Combinator ist ein schickes Typografie-Tool von Typotheque, ein Font Foundry und Designstudio mit Sitz in Den Haag, Niederlande. Wenn Sie auf der Suche nach einer Möglichkeit sind, Schriftkombinationen individuell anzupassen und zu testen, sind Sie hier an der richtigen Adresse.

Quelle: Screenshot typhotheque

Sie können im Dropdown-Menü oben links ein vorgefertigtes, vom Typotheque-Team designtes Schriftbild auswählen oder mithilfe der Einstellungen Ihre eigenen Kombinationen erstellen und Ihren Vorstellungen entsprechend anpassen. Mittels Schieberegler über jedem Abschnitt lässt sich die Größe jeder beliebigen Textgruppe ändern.

Falls Sie mit Ihrer aktuellen Kombination nicht zufrieden sind, können Sie einfach eine neue Schriftart ins Spiel bringen, indem Sie eine der verfügbaren Optionen aus der entsprechenden Liste links in die Bildschirmmitte ziehen.

7. Fontpair

Egal ob catchy Überschrift oder eine Schriftart für einen übersichtlichen Fließtext: Bei fontpair werden Sie fündig. Hayden Mills, Design-Student auf der Indiana University, hat dieses hilfreiche Tool ins Leben gerufen, um Designern bzw. Designerinnen die schnelle und einfache Suche nach einer bewährten Schriftkombination mithilfe von Google Fonts zu erleichtern.

Die kategorisch geordneten Kombinationen auf fontpair werden von Mills selbst ausgewählt. Nutzer und Nutzerinnen haben jedoch die Möglichkeit, über ein auf der Seite verfügbares Google-Formular eigene Empfehlungen einzureichen. Falls Sie Ihren eigenen Text einfügen möchten, klicken Sie einfach auf eine beliebige Stelle des Beispieltexts, um diesen zu ändern.

Quelle: Screenshot fontpair

Fazit: Schriftmischungen sorgen für frischen Wind auf der Website

Durch Schriftkombinationen haben Sie die Möglichkeit, Ihrer Website einen einzigartigen, ansprechenden Look zu verleihen. Eine individuelle Überschrift bleibt den Besuchern und Besucherinnen im Gedächtnis und sorgt für eine eigene Markenidentität.

Wichtig ist, dass Sie Schrifttypen wählen, die zueinander passen. In diesem Zusammenhang spielen verschiedene Aspekte wie die Kegelgröße, die x-Höhe, das Design und die Struktur eine wichtige Rolle. Außerdem sollten Sie darauf achten, dass keine zu großen Kontraste zwischen den Schriftmischungen bestehen.

Ebenso sollten Sie sich für Serifen oder Serifenlose entscheiden und der Schriftfamilie, den Schriftschnitten sowie der Lesbarkeit und dem Kontrast von Fließtexten Aufmerksamkeit schenken.

Investieren Sie genügend Zeit in den Vergleich und wählen Sie für das Kombinieren von Schriften ein praktisches Tool, das perfekt zu Ihnen passt. Immerhin soll Ihre Website möglichst viele Menschen ansprechen und zu Aktionen animieren.

Titelbild: Westend61 / iStock / Getty Images Plus