7 Methoden, wie du passende Schriftarten & Schriftkombinationen findest

Letztes Artikel-Update:
11. Oktober, 2019

Die Wahl der Schriftart(en) im Webdesign sollte mit Bedacht erfolgen. Die Lesbarkeit und Wirkung der Website hängen nicht zuletzt davon ab. Dieser Artikel zeigt 7 Methoden, damit du zu gelungenen Schriftkombinationen findest.

Die Wahl der Schriftart(en) ist eine entscheidende für den Erfolg der Website.

Denn die typografische Gestaltung beeinflusst erheblich die Wirkung des Designs. Sie sorgt für eine Lesbarkeit des Textes. Im Idealfall ist diese so gut, dass der Text einfach und entspannt gelesen werden kann. Sie sorgt für eine klare Inhaltsgliederung, so dass der Text zuerst schnell überflogen werden kann und wichtige inhaltliche Elemente optisch betont werden.

Diese Aspekte hängen ganz entscheidend von der Wahl der Schriftart(en) ab.

Früher war die Auswahl aus einer guten handvoll Systemschriften sehr überschaubar. Dank der Webfonts hat der Webdesigner inzwischen eine annähernd große Auswahl wie vormals nur die Printdesigner.

Doch wer die Wahl, hat die Qual. Welche aus hunderten von Schriften für das aktuelle Projekt nehmen? Lieber auf Sicherheit setzen und die „üblichen Verdächtigen“ wählen oder doch lieber ein „Zeichen setzen“ und eine markantere seltener eingesetzte Schriftart nehmen? Mit Serifen oder ohne?

Die Wahl der Schriftart ist harte Arbeit.

Und oft wird ja nicht nur eine einzige Schriftart gesucht, sondern zwei oder gar noch mehr. Dann kommt es also nicht nur darauf an, ob die Schrift zum aktuellen Thema passt, sondern ob die Schriftarten auch miteinander gut können.

Wie lassen sich also Schriftarten effektiv auswählen und kombinieren?

Wenn man kein typografisches Naturtalent ist (und wer ist das schon?) und kein Typedesigner, der sich den ganzen Tag nur mit Schriften und ihren Wirkungen auseinandersetzt, dann gibt es ein paar Richtlinien, an denen man sich orientieren kann.

Im folgenden habe ich sieben Methoden zusammengestellt, die dir helfen können passende Schriftarten zu finden. Sie sind eine Art Grundlage, auf der du aufbauen kannst, um deine eigenen typografischen Erfahrungen zu machen. Vieles in der Typografie ist nämlich Intuition, Gefühl und Erfahrung.

1. Thema & Zielgruppe: Den Kontext beachten

Zu Beginn der Schriftwahl sollte eine Kurzanalyse erfolgen: Um welches Thema dreht sich die Website? Welches Unternehmen, Produkt wird präsentiert? Welche Assoziationen möchten diese vermitteln? Welche Wirkung soll das Screendesign erzeugen?

Soll das Design mehr verspielt, klassisch, trendy, dezent, frisch, minimalistisch, elegant, stilvoll, sportlich oder … wirken?

Diese ersten Assoziationen helfen schon bei der ersten Auswahl der möglichen Schriftarten. An den unteren beiden Beispielen kann man sehr plakativ die unterschiedlichen Wirkungen der Schriftwahl erkennen.

Lautstark und dominant, krass eben. So wirkt die Typo bei Systemsport.
Lautstark und dominant, krass eben. So wirkt die Typo bei Systemsport.
Sachlich, kühl, technisch – So wirkt die Typo bei BTEXX.
Sachlich, kühl, technisch – So wirkt die Typo bei BTEXX.
Anregung:
Also zuerst den Kontext bestimmen, dann die ersten möglichen passenden Schritarten suchen und finden.

2. 1,2 oder 3: Anzahl der Schriftarten begrenzen

Bei der Anzahl der Schriftarten gilt die alte Designer-Regel „Weniger ist mehr“. Viele Screendesigns kommen mit nur einer Schriftart auch (dafür dann mehrere Schritftschnitte dieser, dazu aber weiter unten gleich mehr).

Zwei Schriftarten sind vermutlich die Regel. Typischerweise wird eine für die Überschriften oder besondere typografische Auszeichnungen eingesetzt und die andere für die Fließtexte.

Drei oder mehr Schriftarten sind eher die Ausnahme. Mit jeder Schriftart steigt die Herausforderung zueinander passende zu finden und das Design nicht wie einen typografischen Wildwuchs aussehen zu lassen. Aber für besonders verspielte, dekorative Designs können mehrere Schriftarten schon sinnvoll sein.

Anregung:
Zwei Schriftarten sind meistens ausreichend. Suche am besten eine für die Überschriften, die durchaus etwas mehr Akzente zu setzen vermag und eine für die Fließtexte, die vor allem gut lesbar ist.

3. Eine Familie: Besser auf Schriftschnitte setzen

Ein Schriftschnitt ist eine Variation einer Schriftart, die die Strichstärke (z.B. eine Light- oder Bold-Variante), die Schriftbreite (z.B eine Condensed-Variante) oder die Schriftlage (z.B. kursive Variante) verändert. Zusammen ergeben die Schriftschnitte eine Schriftfamilie.

Je mehr Schriftschnitte eine Schriftart besitzt, umso flexibler ist sie einsetzbar. Besondere typografische Auszeichnungen lassen sich mit ihnen gut umsetzen, oft sogar besser als mit veränderten Schriftfarben, -größen oder gar anderen Schriftarten.

Der Vorteil ist, dass die verschiedenen Schriftschnitte aufeinander abgestimmt sind. Sie harmonisieren ohne zu krasse Gegensätze in die Gestaltung zu bringen.

Anregung:
Eine Schriftart, die also über mehrere Schriftschnitte verfügt, ist eine sehr gute Basis für eine effektive Typografie. Dann kann man auch eher auf weitere Schriftarten und die Suche nach ihnen verzichten.
Mehrere Schriftschnitte der gleichen Schriftart erhöhen den typografischen Gestaltungsspielraum.
Mehrere Schriftschnitte erhöhen den typografischen Gestaltungsspielraum.

4. Gegensätze: Schriftarten, die sich ergänzen

Eine Gestaltung lebt auch vom Kontrast, den sie schafft. Ohne Kontraste wäre kein Design und keine Information vorhanden. Text ist im Grunde auch nur durch einen Hell-Dunkel-Kontrast zwischen der Textfarbe und der Hintergrundfarbe lesbar.

Kontraste können auch durch Größen-, Farbunterschiede oder die Lage der Objekte geschaffen werden.

In der typografischen Gestaltung kann neben dem Text-Hintergrundfarbe-Kontrast der Kontrast zwischen Schriftarten für Spannung sorgen. Der Klassiker ist die Kombination aus einer Serifen und Nicht-Serifen-Schrift.

Spannung im Design durch die Mischung aus Serifen- und Nicht-Serifen-Schrift.
Spannung im Design durch die Mischung aus Serifen- und Nicht-Serifen-Schrift.

Auf der einen Seite eine eher sachliche Nicht-Serifen-Schrift mit klaren nüchternen Strichen. Auf der anderen eine eher markante Serifen-Schriften mit ihren geschwungenen, manchmal auch geraden Serifen, die aber immer für Aufmerksamkeit und oft auch Emotionalität sorgen. Dadurch kommt Spannung und Abwechslung in das Screendesign.

Es hat also seinen Grund, warum so häufig Schriftarten dieser beiden Gattungen gemischt werden.

Anregung:
Eine Serifen- und eine Nicht-Serifen-Schrift zu finden, die zueinander als auch zum Thema passen, ist nicht unbedingt einfach. Aber hat man eine gelungene Kombination gefunden, ist es für das Design Gold wert.
Eine der beiden wird bspw. für die Fließtexte und die andere dann für Überschriften und andere Highlight-Textelemente eingesetzt – eine wirkungsvolle kontrastreiche Schriftenkombination.

Bringe dein Webdesign-Business voran!

Mit den Webdesign Journal Angeboten:

5. Gleich und gleich: Serif und Sans-Serif aus dem gleichen Haus

Es gibt – glücklicherweise – Schriftarten, die gut zusammenpassen. Zum Beispiel Serifen- und Nicht-Serifen-Schriften, die aus dem gleichen Hause sind. Ein beliebtes Beispiel bilden die Source Serif Pro und die Source Sans Pro. Diese passen nicht nur deswegen gut zusammen, weil es eben eine Serifen- und Nicht-Serifen-Kombination ist. Da die beiden Schriften für einen gemeinsamen Einsatzzweck geschaffen wurden, sind Strichstärken, x-Höhe der Buchstaben usw. also perfekt auseinander abgestimmt.

Dies prädestiniert diese Schriftarten für einen harmonischen wie kontrastreichen Einsatz:

Schriftkombination Serif und Sans-Serif-Schriftart
Harmonische Schriftkombination einer Serif (Source Serif Pro) und Sans-Serif-Schriftart (Source Sans Pro).
Anregung:
Zwei zusammengehörige Schriftarten können die typografische „Arbeit“ enorm erleichtern. Harmonie und Kontrast sind fast unausweichlich gegeben.
Aber: Markanter sind Designs, wenn zwei verschiedene Schrifttypen eingesetzt werden. Also eben auf den Einsatzzweck achten.

6. Konflikte: Schriftarten, die sich zu ähnlich sind, vermeiden

Kritisch wird die Schriftwahl ganz schnell, wenn zwei Schriftarten aus der gleichen Kategorie gewählt werden. Zwei Serifenschriften zum Beispiel. Zu gleichartig wirken diese häufig. Aber nicht ähnlich genug, als das es harmonisch wirken könnte.

Jeweils zwei Schriftpaarungen, die nicht zusammen passen.
Jeweils zwei Schrifpaarungen, die nicht zusammen passen. Eine Kombination aus zu ähnlichen Schriftarten wirkt unharmonisch:
Anregung:
Sehr ähnliche Schriftarten sind nur mit viel Feingefühl auszuwählen. Zu schnell wirkt so eine Paarung unharmonisch. Dann lieber auf den üblichen Kontrast aus Serifen und Nicht-Serifen-Schrift zurückgreifen.

7. Praxis: Üben, testen und Vorbilder suchen

Im Endeffekt sind die guten Ratschläge uninteressant. Was zählt ist im Browser. Hier muss das typografische Design stimmig sein. Ein angenehmes Gesamtbild mit den anderen Gestaltungselementen erzeugen.

Nichts geht über die eigene Praxis.

Es gibt keine goldene Regel oder feste Formel. Was auf der einen Website gut funktioniert, kann bei der anderen wieder völlig unpassend sein. Und manchmal ist es ja gerade spannend die typografischen Regeln zu brechen.

Versuch und Irrtum ist vermutlich die beste Methode. Dazu der gesunde Menschenverstand und ein waches Auge. Hierzu muss man nicht jahrelang typografische Forschungsarbeit betrieben haben.

Wie wirkt das Design auf mich? Wie gut ist der Text lesbar? Welche Assoziationen löst die Typografie aus?

Diese Fragen als Grundlage, können schon viele Antworten liefern.

Hilfreich sind dazu auch Tools wie Typecast und Typetester. Mit ihnen lassen sich unterschiedliche Schriftgestaltungen schnell und unkompliziert da antesten, wo sie später im Einsatz sind: Im Browser.

Und dann gibt es natürlich noch die vielen anderen Websites, die tolle typgrafische Lösungen gefunden haben:

google-fonts-best-case
google-fonts-best-case-1
Anregung:
Es ist nicht verboten sich hier ein bisschen umzuschauen und Vorbilder zu finden. Nachzuschauen, welche Schriftarten und -kombinationen diese Websites einsetzen und wenn passend, diese zu übernehmen.
Typewolf und typ.io liefern hierfür jede Menge Inspirationen.
7 Methoden, um passende Schriftarten & Schriftkombinationen zu finden

Fazit

Typografie kann durchaus ein schwieriges und komplexes Feld sein. Der Einstieg muss es aber nicht sein. Die vorgestellten Methoden, zeigen, dass es kein Hexenwerk ist, passende Schritarten für Dein Screendesign zu finden.

Und jetzt bist du dran: Probiere verschiedene Schriftarten aus, bekomme ein Gefühl für ihr Zusammenspiel und vor allem: Schreib mir doch in die Kommentare, ob der Artikel Dir geholfen hat oder du Wichtiges noch vermisst oder ein ganz anderes Vorgehen hast passende Schriftarten zu finden.

Zusammenfassung

Warum ist die Auswahl der Schriftarten wichtig?

Die Wahl der Schriftart(en) im Webdesign entscheidet zum einen über die Lesbarkeit der Texte auf der Website. Unterschiedliche Schriftarten sind unterschiedlich gut lesbar. Dazu beeinflusst die Schriftart die Wirkung des Designs und damit die Wirkung der Website.

Welche Aspekte sollten bei der Auswahl der Schriftart beachtet werden?

Hier sollten verschiedene Aspekte beachtet werden: Zuerst das Thema der Website (welches Unternehmen, Dienstleistungen, Produkte, Schwerpunkte usw.). Welche Assoziationen sollen vermittelt werden, welche Wirkung soll erreicht werden? Der Kontext muss klar sein, dann können passenden Schritarten gesucht und gefunden werden.

Wie viele Schriftarten sollten eingesetzt werden?

So wenig wie möglich, so viel wie nötig. Meistens reichen zwei Schriftarten (mit entsprechenden Schnitten) völlig aus. Eine Schriftart für die Überschriften (die durchaus etwas markanter sein kann) und eine für die Fließtexte, die vor allem gut lesbar ist.

Was zeichnet eine gute Schriftart aus?

Sie sollte zum Thema passen, also die gewünschte Wirkung transportieren und gut lesbar sein. Und am besten verfügt sie über mehrere Schriftschnitte, um so vielfältig eingesetzt werden zu können.

Welche Schriftarten passen zusammen?

Beliebte Kombinationen sind die zwischen Serifen- und eine Nicht-Serifen-Schriftarten. Oft wird die Serifenschriftart für Headlines und die Nicht-Serifen-Schrift für Fließtexte eingesetzt.
Eine andere spannende Variante ist der Einsatz von zwei zusammengehörige Schriftarten aus demselben „Haus“, wie bspw. die Source Serif Pro und die Source Sans Pro. Diese sind gestalterisch aufeinander abgestimmt.

Welche Schriftarten sollte ich vermeiden?

Schriftarten, die sich zu sehr ähneln, sollten besser vermieden werden. Ein gewissen Kontrast sollte zwischen den Schriften schon vorhanden sein. Ansonsten besser nur eine Schriftart wählen und mit unterschiedlichen Schnitten arbeiten.
Auch Schriftarten, die nicht gut lesbar sind, möglichst meiden.

Hole dir die Webdesign-CHECKLISTE
mit über 90 Checkpunkten für Dein nächstes Projekt &
den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560  Newsletter-Abonnenten an!

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Kommentare zum Artikel

24 Kommentare zu „7 Methoden, wie du passende Schriftarten & Schriftkombinationen findest“

  1. Super ausführlicher Leitfaden zum Thema! Die Schriftart kann viel zum Design einer Webseite beitragen. Ich persönlich bevorzuge für die Überschriften serif Schriftarten und für den Fließtext sans-serif. Ich finde, dass einen Text zu schwer zum lesen ist, wenn eine serif Schrift genutzt wird. Vor allem, wenn er eine relativ kleine Schriftgröße besitzt.

    Danke für die vielen tollen Beispiele. Eine sehr gute Inspirationsquelle!

    1. Hallo Marco,
      danke für Dein Feedback!
      Ja, die Kombinationen Überschrift -> Serif und Fließtext -> Sans-Serif ist wohl die üblichste und hat sich – ganz allgemein gesprochen – auch bewährt.
      Viele Grüße
      Martin

  2. Pingback: 7 Methoden, um passende Schriftarten zu finden ...

  3. Hallo Martin,

    wow, tolles Artikel zum Thema Schrift. Typecast und Typetester kannte ich noch nicht. Werde ich also demnächst ausführlich testen. Vielleicht interessiert dich dann das Tool TypeGenius zum Thema Schrift. Da werden Schriften zufällig ausgewählt bzw. vorgeschlagen… Hab deinen Artikel als Anlass gesehen den Artikel heute zu veröffentlichen:)
    Einen kleinen Einblick in TypeGenius findest du daher hier: http://blog.zeta-producer.com/passende-schriften-finden-mit-typegenius/

    1. Hallo Yvonne,
      freut mich, dass Dir der Artikel gefällt.
      Das Tool TypeGenius ist auch cool. Danke für den Linktip.
      Viele grüße
      Martin

  4. Pingback: Das Webdesigner-Blogger ABC | hahnsinn | Büro für Design & Webentwicklung in Leipzig und Frankfurt a.M.

  5. Pingback: Notizen zu Typografie | Frau Barth bloggt

  6. Pingback: 10 einfache Methoden für typografische Highlights - Webdesign Journal

  7. Pingback: Warum man öfter mal einen Erfahrungsbericht veröffentlichen sollte

  8. Ich muss einfach fragen, ich kann gar nicht anders. Welche Schriftart(en) wurde(n) verwendet, als du die Grafik für Abschnitt 3 erstellt hast? Ich hab mich schockverliebt, und kann die Schrift einfach nicht finde!

    1. Hallo Laura,
      meinst du die Schriftart bei der Grafik zu den Schriftschnitten?
      Ich komme leider nicht mehr drauf, welche ich da eingesetzt habe…
      Aber die Roboto oder die Open Sans sind dieser recht ähnlich.

      Gruss
      Martin

      1. Hi Martin,
        genau die meine ich, allerdings sehe ich die Ähnlichkeit zu Roboto oder Open Sans nicht, zumal ich letzteres aktuell verwende.

        Danke trotzdem für deine Antwort und liebe Grüße,
        Laura.

        1. Naja, so ganz unähnlich sind sich die drei Schriftarten ja nicht:

          Einige Buchstaben haben halt markantere Unterschiede wie bspw. das „f“ oder „a“…

  9. Pingback: Webdesign für Nicht-Designer | www.online-marketing-kurse.at

  10. Pingback: 15 Minuten für gute Webtypografie mit CSS - Webdesign Journal

  11. Pingback: Der Weg zum perfekten Internetauftritt | unternehmer-portal

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Ähnliche Artikel

15 Minuten für gute Webtypografie mit CSS

Die typografische Gestaltung sorgt für die Lesbarkeit der Texte. Und das wollen wir doch schließlich alle: dass unsere Texte gelesen werden. Dieser Artikel zeigt dir wie du mit CSS-Anweisungen eine gute, lesbare Typografie schaffst.

12 „beliebte“ Designfehler, und wie Du sie vermeidest

Webdesign ist schon durchaus eine komplizierte Angelegenheit. Es gibt selten klare Regeln und jeder mag „gutes Design“ etwas anders beurteilen. Auf dem Weg zu einem effektiven Webdesign liegen daher einige Fallstricke aus. Dieser Artikel zeigt 12 häufige Designfehler auf.

Bilde dich weiter

Scroll to Top

Hole dir die Webdesign-CHECKLISTE mit über 90 Checkpunkten für Dein nächstes Projekt & den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)