Leitfaden für Schrift Kombinationen: Auswahl der besten Webfonts und Schriftarten für deine Website

Am Bildschirm gut lesbare Schriftarten und die Zusammenstellung einer guten Schriftkombinationen sind ein wesentlicher Aspekt des Webdesigns. Erfahre, wie man Schriftarten kombiniert und welche Schriftarten du verwenden solltest, um sicherzustellen, dass deine Benutzer die beste Erfahrung machen.

Als Webdesigner musst du für jede Website, die du erstellst, eine Menge wichtiger Entscheidungen treffen. Farbpaletten, UI-Interaktionen, Navigationslayout, Auswahl der besten Schriftart für deine Website und vieles, vieles mehr. 

Ein Bereich des Webdesigns, über den du dir vielleicht nicht genug Gedanken machst, ist die Wahl der Schriftart.

Eine gut aussehende Schriftart auszuwählen ist eine Sache. Wenn du ein gutes Gespür für die Stimme und den Stil der Marke hast, ist es viel einfacher, Schriftarten zu finden, die eine ähnliche Ausstrahlung vermitteln.

 

Inhaltsverzeichnis

  • Warum brauchst du Schriftkombinationen?
  • Was ist bei der Paarung von Schriftarten zu beachten?
  • 4 Regeln für die Kombination von Schriftarten im Web-Design

– Regel Nr. 1: Verwende nicht mehr als drei Schriftarten auf deiner Website

– Regel Nr. 2: Harmonie und Kontrast sind gut; Konflikt ist schlecht

– Regel Nr. 3: Hast du keine Angst vor Paaren innerhalb von Schriftarten-Überfamilien?

– Regel Nr. 4: Stelle sicher, dass deine Schriftarten die richtige Größe und Form haben

  • Die 30 besten Schriftkombinationen für Web-Design

Warum brauchst du Schriftkombinationen?

Websites brauchen mehr als nur eine Schriftart – um eine Hierarchie zu schaffen, um Besucher mit viel Text zu fesseln und um Besuchern unterschwellig mehr über die Persönlichkeit und den Ansatz der Marke zu vermitteln. 

Wenn du diese zusätzliche Ebene der Komplexität zu dem Mix hinzufügst, können die Dinge knifflig werden. Es geht nicht nur darum, Schriftarten miteinander zu kombinieren, sondern auch mit dem Design deiner Website.

Ich bin mir sicher, dass du auf deiner Reise durch das Web schon auf solche Szenarien gestoßen bist: 

  • Zwei langweilige Schriftarten erschweren das Lesen eines langen Blogbeitrags, und du überfliegst schließlich die Überschriften, um zu sehen, ob du die Geschichte auf diese Weise zusammensetzen kannst. 
  • Eine lustige und einzigartige kursive Schriftart führt die Besucher in das Unternehmen ein, nur um dann mit einer zu kleinen und supereinfachen Schriftart diesen ersten Eindruck zu widerlegen.
  • Auf der Website wird behauptet, dass das Unternehmen einen jugendlichen und innovativen Ansatz verfolgt, weshalb die Retro-Schriftarten so fehl am Platz wirken. 

Bei der Kombination von Schriftarten kann einfach zu viel schief gehen, wenn man sich nicht die Zeit nimmt, um zu verstehen, wie Schriftarten zusammenpassen. 

Was bei der Kombination von Schriftarten zu beachten ist

In unserem Leitfaden zu den besten Schriftarten für Websites haben wir die wichtigsten Merkmale zusammengefasst, auf die du achten solltest: 

1. Leserlichkeit

Einer der Gründe, warum Serifen in der Literatur und in Zeitungen bevorzugt werden, liegt in der Lesbarkeit. Die Serifen (Füße) am oberen und unteren Ende der Zeichen erleichtern es den Lesern, zwischen ähnlich aussehenden Zeichen wie dem großen „I“ und dem kleinen „l“ zu unterscheiden, so dass es nicht zu Verständnisproblemen kommt. 

Wenn du eine Seite mit mehr als 600 Wörtern entwirfst, wäre es keine schlechte Idee, aus diesem Grund eine Serifenschrift für den Fließtext zu verwenden. 

Wenn du jedoch eine serifenlose Schrift mit ausgeprägten Buchstabenformen (auch ohne Serifen) findest, solltest du dich nicht scheuen, zu experimentieren. Im Folgenden findest du einige Beispiele für die Verwendung von serifenlosen Schriften sowohl im Fließtext als auch in der Kopfzeile.

2. Lesbarkeit

Einer der Gründe, warum San-Serifen lange Zeit als die bessere Wahl für Online-Texte galten, war ihre gute Lesbarkeit. Studien haben jedoch gezeigt, dass die Lesbarkeit von Texten mit und ohne Serifen kaum Unterschiede aufweist – zumindest bei kleineren Schriftgrößen.

Da sich die Bildschirmauflösungen im Laufe der Jahre stark verbessert haben, konnten Typographen Schriftarten in beiden Stilen entwickeln, die gleichermaßen gut lesbar sind. Wie die NNG erklärt: 

„Die alte Usability-Richtlinie für Online-Typografie war einfach: Bleibe bei serifenlosen Schriften. Da Computerbildschirme zu schlecht waren, um Serifen richtig darzustellen, führte der Versuch, Serifenschriften in Textgröße zu verwenden, zu unscharfen Buchstabenformen“.

Während andere Schriftarten – wie z. B. übermäßig dekorative – außerhalb von großen Kopfzeilen zu schwer lesbar sein können, haben Designer viele Möglichkeiten, den Text auf einer Seite mit Serifen und serifenlosen Schriften zu gestalten.

Worauf du also achten solltest, ist die Größe und der Abstand deiner Zeichen, denn das wirkt sich auf die Lesbarkeit und Verständlichkeit aus.

3. Komfort

Manche Webdesigner zögern, Schriftarten wie Helvetica oder Times New Roman zu verwenden, weil sie zu häufig verwendet werden. Bei der Wahl der Schriftart und der Schriftkombination geht es jedoch nicht darum, wie du über die Typografie deiner Website denkst, sondern darum, wie gut sie für deine Besucher lesbar ist. 

Es ist also keine Schande, sich für Klassiker zu entscheiden, wenn sie ihren Zweck erfüllen.

4. Stil

Wähle Schriftarten und -stile, die gut zu deiner Marke passen. Serifenschriften wirken zum Beispiel traditioneller und seriöser als kursive Schriften, die eher skurril und lustig sind. 

Allein durch die Wahl der richtigen Schriftarten kannst du den Besuchern eine Menge über deine Marke erzählen.

Verliere diese Regeln nicht aus den Augen, wenn du zum nächsten Schritt der Gestaltung mit Typografie übergehst:

 

4 Regeln für die Paarung von Schriftarten im Web-Design 

Sobald du ein gutes Gefühl dafür hast, welche Schriftarten am besten geeignet sind, musst du dir eine tolle Kombination einfallen lassen. 

Hier sind einige Regeln, an die du dich bei der Kombination von Schriftarten halten solltest: 

Regel Nr. 1: Verwende nicht mehr als drei Schriftarten auf deiner Website

Du brauchen eine Schriftart für deinen Kopfzeilentext, die auch in größerem Format gut aussieht und die Aufmerksamkeit auf sich zieht. Und du brauchst eine Schriftart für deinen Fließtext, die sowohl lesbar als auch gut lesbar ist. 

Wähle zunächst diese beiden aus und füge nur dann eine weitere hinzu, wenn du sie unbedingt brauchst. Im Folgenden zeigen wir dir einige Beispiele, bei denen das der Fall sein könnte.

Regel Nr. 2: Harmonie und Kontrast sind gut; Konflikt ist schlecht

Deine Schriftkombination muss ausgewogen sein. 

Das Wichtigste ist, dass sie sich gegenseitig ergänzen. Das bedeutet, dass sie, auch wenn sie unterschiedlich aussehen, für Besucher und Leser eine einheitliche Front bilden. 

Eine gute Möglichkeit, dies zu erreichen, ist die Kombination einer serifenbetonten mit einer serifenlosen Schrift, aber das ist nicht die einzige Möglichkeit, Harmonie in Ihre Typografie zu bringen. 

Du kannst auch eine Kopf- oder Display-Schriftart mit viel Persönlichkeit verwenden und sie mit neutralem Text ausgleichen. 

Achte nur darauf, dass sich die Stile nicht widersprechen. Eine schroffe Gothic-Serif-Schrift würde beispielsweise nicht gut zu einer sehr femininen Kursivschrift passen.

Regel Nr. 3: Hast du keine Angst vor Kombinationen innerhalb von Schriftarten-Superfamilien?

Es spricht nichts dagegen, Schriftpaare zu verwenden, die aus derselben Schriftfamilie stammen, solange die Stile nicht zu ähnlich aussehen. Du kannst sie gut miteinander kombinieren, aber es sollte nicht schwer sein, sie voneinander zu unterscheiden. 

Innerhalb von Superfamilien, die ein paar Dutzend verschiedene Stile (mindestens) zur Auswahl haben, findest du einige nette Kombinationsmöglichkeiten. Dünn vs. dick. Condensed vs. Extended. Serif vs. Sans Serif. 

Es ist auch wichtig zu berücksichtigen, wie unterschiedliche Größen und Gewichtungen einen Kontrast zwischen den Stilen innerhalb derselben Familie schaffen. Das kann ausreichen, um ein attraktives Schriftpaar zu schaffen. 

Regel Nr. 4: Achte darauf, dass deine Schriftarten die richtige Größe und Form für ihre Aufgabe haben

Einer der Gründe, warum wir überhaupt Schriftpaare brauchen, ist die Hierarchie auf Webseiten. Aber eine Vergrößerung der Schrift um 10 Pixel führt nicht unbedingt zu einer Hierarchie. 

Deshalb brauchen wir verschiedene Schriftarten, die unterschiedliche Rollen spielen. 

Du könntest zum Beispiel eine hohe, verkürzte serifenlose Schriftart verwenden, um deiner Überschrift einen schnellen und kraftvollen Ausdruck zu verleihen. Im Fließtext könntest du dann eine Serifenschrift mit runderen und großzügigeren Buchstaben verwenden, die deinen Lesern etwas Raum zum Atmen gibt, während sie die Botschaft aufnehmen.

 

Die 30 besten Schriftkombinationen für Web-Design

Bei der Zusammenstellung der besten Schriftkombinationen wollten wir sicherstellen, dass wir eine gute Mischung aus verschiedenen Kombinationen und Anwendungsfällen haben, auf die sie angewendet werden können. Du wirst also nicht nur serifenlose und serifenbetonte Schriften sehen, die gut zusammenpassen. 

Wir haben Schriften aus einer Vielzahl von Quellen bezogen – Google Fonts, Adobe Fonts, Schriftarten-Repositories wie Fonts.com sowie unabhängige Schriftarten-Foundries – was uns (und dir) mehr Flexibilität beim Mischen und Kombinieren der Schriften bietet. 

Schauen wir uns das einmal genauer an:

1. Abril Fatface & Lato

Hier hast du eine starke Kombination aus klassischer und moderner Werbetypografie. Abril Fatface wurde entworfen, um Werbeschriften aus dem Vereinigten Königreich und Frankreich um 1800 zu ähneln. Lato wurde in jüngerer Zeit als firmeneigene Schriftart für ein Unternehmen entworfen.

Kombiniert man die beiden, erhält man eine scharfe Kombination von Schriften, die sich hervorragend für Websites von Marketing- und Digitalagenturen eignen.

Hole dir die Schriftarten: 

  • Abril Fatface
  • Lato

2. Alegreya Sans Black & Alegreya

Dies ist das erste Beispiel für eine Schriftart-Superfamilie. Das würde man bei diesem Beispiel auch nicht unbedingt vermuten. 

Die Kombination aus Alegreya Sans Black und Alegreya wurde ursprünglich für die Literatur entwickelt und eignet sich hervorragend für Blogs – für private und berufliche Zwecke. Die fette Überschrift ist nicht zu aufdringlich und harmoniert gut mit dem sorgfältig gestalteten Serifenrumpf. 

Hole dir die Schriftarten: 

  • Alegreya
  • Alegreya Sans

3. Aqua Grotesque & Roboto Slab Thin

Die Kombination von Aqua Grotesque und Roboto Slab Thin ist eine gute Wahl für Websites oder Marken, die sich auf die Kundengewinnung in der Zukunft konzentrieren. Softwareunternehmen wären sicher eine gute Wahl für diese futuristische Kombination. Unternehmen, die Maschinen oder Fahrzeuge bauen, an Energieinitiativen arbeiten und so weiter, würden ebenfalls von dieser Kombination profitieren. 

Aufgrund der Leichtigkeit des Textes eignet sich diese Schriftart am besten für eine Homepage oder interne Seiten mit kurzen Textabschnitten. 

Hole dir die Schriftarten: 

  • Aqua Grotesque
  • Roboto 

4. Archivo Schwarz & Roboto

Hier haben wir eine Paarung von zwei serifenlosen Schriften. Archivo Black ist eine groteske serifenlose Schrift, die im Vergleich zum neogrotesken und geometrischen Stil von Roboto etwas unvollkommen wirkt. 

Dies ist ein großartiges Beispiel dafür, wie man Schriftarten in Übereinstimmung miteinander verwenden kann. Ja, es sind zwei serifenlose Schriften, aber die unvollkommene/perfekte Paarung ihrer Zeichensätze schafft ein gutes Gleichgewicht. Dies würde sich sehr gut eignen, um einer E-Commerce-Website eine jugendliche und vertrauenswürdige Ausstrahlung zu verleihen. 

Hole dir die Schriftarten: 

  • Archivo
  • Roboto 

5. Bebas Neue & Alter Standard TT

Bebas Neue ist eine wunderschön gestaltete Display-Schriftart mit einem kondensierten Zeichensatz in Großbuchstaben. Aufgrund ihrer schmaleren Buchstaben kannst du sie viel größer dimensionieren als breitere Schriften und eine eindrucksvollere Überschrift erstellen, da sie über dem altmodischen Stil der Old Standard TT steht. 

Diese Schrift würde sich gut auf einer Website für Filmkritiken, Bücher, Broadway-Stücke usw. machen. 

Hole dir die Schriftarten: 

  • Bebas Neue
  • Alter Standard TT

6. Cooper Hewitt Heavy & Cooper Hewitt Thin

Als Cooper Hewitt, das Smithsonian Design Museum, beschloss, sein Branding für das einundzwanzigste Jahrhundert neu zu erfinden, war diese Schriftart nur ein Teil der Wiedergeburt. Obwohl es sich nicht um eine Superfamilie von Schriften handelt, sind ihre Stile so vielseitig, dass du verschiedene Schnitte miteinander kombinieren kannst, um einen auffälligen Kontrast zu erzeugen. 

Diese künstlerische Schriftart macht sich gut an den Wänden von Websites für Designer, Fotografen und andere Kreative. Da die Bilder ohnehin den größten Teil des Textes ausmachen, ist der hellere Text kein Problem, da es nicht viel Text gibt, auf den man sie anwenden kann.

Hole dir die Schriftarten: 

  • Cooper Hewitt

7. Exo 2 & Alegreya Sans

Dieses Paar ist ein echter Hingucker. Auf den ersten Blick fällt der futuristisch anmutende Kopf der Exo 2 auf. Bei näherer Betrachtung fällt uns auch auf, dass die humanistische Serifenlose der Alegreya nicht so neutral oder schlicht wirkt, wie es beispielsweise eine geometrische Serifenlose tun würde. 

Diese Kombination eignet sich sehr gut für Blogs von Unternehmen aus den Bereichen Technik, Verteidigung und Luft- und Raumfahrt – wo das Lesen wichtig ist, man aber dennoch den einzigartigen Ton des Themas bewahren möchte. 

Hole dir die Schriftarten: 

  • Exo 2
  • Alegreya Sans

8. Fira Sans Black & PT Serif

Sowohl Fira Sans als auch PT Serif sind auf gute Lesbarkeit ausgelegt. 

Obwohl wir dieses Duo realistischerweise überall auf einer Website oder einem Blog mit einer großen Leserschaft verwenden könnten, ähnelt der Ton dem von Zeitungscovern, die die wichtigsten Schlagzeilen des Tages herausschreien. Daher eignet sich dieses Schriftpaar besonders gut für Nachrichtenseiten – vor allem im Bereich Sport und Unterhaltung.

Hole dir die Schriftarten: 

  • Fira Sans
  • PT Serif

9. Josefin Sans Bold & Josefin Slab Semi-Bold

Josefin Sans und Josefin (Slab) sind Google-Schriften. Obwohl sie keine Superfamilie sind, sind sie Schwesterfamilien, die gut zusammenpassen. 

Was die Verwendung anbelangt, so wurden diese Vintage-Schriften für die Verwendung als größere Schriftarten konzipiert und gehören daher auf die Startseite deiner Website. Und da sie den geometrischen Schriften der 1920er (Sans) und 1930er Jahre (Slab) nachempfunden sind, solltest du sie auf Websites mit ähnlichem Retro-Look einsetzen. Wie Restaurants, Bars, Friseurläden usw.

Hole dir die Schriftarten: 

  • Josefin Sans
  • Josefin Slab 

10. Karla Bold & Spektrales Licht

Karla und Spectral haben beide ihre Macken (Karlas Kerning ist etwas unregelmäßig und Spectrals Rundungen sind nicht so ausgeprägt wie bei anderen Serifen), was sie zu einem liebenswerten Paar macht. 

Dieses Duo würde vor allem jüngere Verbraucher ansprechen. Es wirkt ehrlich, freundlich und sympathisch – etwas, das sich Millennials und Gen Zers von Marken wünschen. Wenn du also eine Website oder einen Blog erstellst, der sich an eine jüngere Zielgruppe richtet, ist dieses Schriftpaar eine gute Wahl. 

Hole dir die Schriftarten: 

  • Karla
  • Spektral

11. Lato & Merriweather

Sowohl Lato als auch Merriweather haben ein starkes und robustes Erscheinungsbild, das sie sehr gut lesbar macht. Darüber hinaus wirken sie einladender – als ob die Seite eine Reise wert wäre und nicht nur eine lästige Leseaufgabe, durch die man sich durchquälen muss. 

Da keine der beiden Schriftarten wirklich „buchhaft“ wirkt, kannst du diese Kombination gerne auf Websites von Start-ups und kleinen Unternehmen verwenden. Dir werden bei potenziellen Kunden einen sehr positiven ersten Eindruck hinterlassen.

Kaufe die Schriftarten: 

  • Lato
  • Merriweather

12. Lato & Roboto

Hier sehen wir Lato gepaart mit Roboto. Dieses Paar gibt ein scharfes und professionelles Bild ab.

Die Unterschiede zwischen der Paarung von Lato und Merriweather und Lato und Roboto sind subtil genug. Die kleinere, kontrolliertere Anmutung von Roboto macht diese Paarung jedoch zu einer besseren Wahl für größere Unternehmenswebsites in Bereichen wie Pharma, Biotech oder Gesundheitswesen, wo Technologie und Wissenschaft eine wichtige Rolle beim Aufbau von Vertrauen bei den Kunden spielen. 

Holen dir die Schriftarten: 

  • Lato
  • Roboto

13. League Gothic & PT Serif

Der Kontrast zwischen diesen beiden Schriften ist groß. League Gothic steht hoch über der wohlproportionierten und abgerundeten PT Serif. Die beiden lassen den Text seriös wirken, ohne dabei völlig abweisend zu sein.

Diese Kombination eignet sich gut für Websites für Fintech- oder Finanzdienstleistungen. Das Design ist intelligent und wirkt nicht verschwenderisch. 

Hole dir die Schriftarten: 

  • League Gothic
  • PT Serif

14. League Spartan & Libre Baskerville

Wenn wir an Sparta denken, denken wir an Macht, Stärke, Intelligenz und Loyalität – und das entspricht auch der Ausstrahlung der Schrift League Spartan. Es ist eine starke Schrift mit scharfen Kanten, die viel Platz einnimmt. In Kombination mit den abgerundeten Buchstaben der Libre Baskerville lässt sich der Tonfall nicht verleugnen. 

Verwende dieses starke Duo bei der Gestaltung von Websites für Unternehmer, Redner, Berater und alle anderen, deren Gedanken und Stimmen gehört werden müssen. 

Hole die Schriftarten: 

  • League Spartan
  • Libre Baskerville

15. Libre Baskerville & Source Sans Pro

Hier siehst du, was passiert, wenn du Baskerville den ersten Platz überlässt. Die Stimmung ändert sich völlig, vor allem, wenn man bedenkt, dass die Serifenschrift in der ersten Reihe steht (normalerweise ist es umgekehrt). 

Wenn man die Formel auf diese Weise auf den Kopf stellt – vor allem, wenn man moderne Stile aus dem zwanzigsten Jahrhundert verwendet – sendet man die Botschaft aus: „Wir respektieren, was vor uns war, aber wir haben keine Angst, die Normen in Frage zu stellen.“ Daher würde dieses Schriftpaar auf Websites von unterrepräsentierten Unternehmern (z. B. Frauen, farbige Personen usw.) sehr gut aussehen.

Kaufe dir die Schriftarten: 

  • Libre Baskerville
  • Source Sans Pro 

16. Libre Franklin & Libre Baskerville

Mit dieser Kombination kann man gut spielen. Beide Libres basieren auf klassischen Schriftarten aus der Literatur. Die Franklin in der Kopfzeile verändert jedoch die gesamte Atmosphäre der Website. Und da Franklin in 18 verschiedenen Stilen erhältlich ist, von hell bis fett, kannst du damit spielen, wie direkt du deinen Header-Text haben möchtest. 

Dieses Schriftpaar eignet sich gut für Blogs, bei denen es viel zu lesen gibt, die aber dennoch unterhaltsam und freundlich wirken sollen: persönliche Blogs, Reiseblogs, Food-Blogs usw.

Kaufe die Schriftarten: 

  • Libre Franklin
  • Libre Baskerville

17. Lobster & Roboto Condensed

Lobster ist die einzige kursive Schrift, die wir in diese Liste der Schriftartenkombinationen aufgenommen haben. Während du kursive Schriften zur Gestaltung von Text auf der Homepage verwenden kannst, sind sie in kleineren Kopfzeilen nicht immer leicht zu lesen. 

Lobster ist eine gute Ausnahme von der Regel, da sie sich eher wie eine Schriftart mit zusätzlicher Würze anfühlt, als eine handschriftliche Schriftart. In Kombination mit der neutraleren Roboto kannst du diese Schriftarten verwenden, um eine Website für das Gastgewerbe oder die Reisebranche aufzupeppen.

Hole dir die Schriftarten: 

  • Hummer
  • Roboto

18. Lora & Merriweather

Dieses Duo verwendet zwei sehr beliebte Serifenschriften, von denen jede einen einzigartigen Stil mitbringt. Lora hat bürstenartige Striche, die der Kopfzeile eine warme und kreative Ausstrahlung verleihen, während Merriweather stabiler und berechenbarer wirkt. 

Diese Kombination eignet sich gut für Websites von Kreativen wie Webdesignern, Entwicklern, Werbetextern, Vermarktern und so weiter. Genauer gesagt, für Websites von Kreativen, die lange Blogs, Portfolioseiten und Verkaufstrichter enthalten.

Hole dir die Schriftarten: 

  • Lora
  • Merriweather

19. Merriweather Sans Bold & Merriweather

Merriweather wurde entwickelt, um die Lesbarkeit auf Bildschirmen zu verbessern. Und nicht nur das: Die serifenlose und die serifenbetonte Version der Schrift wurden so konzipiert, dass sie miteinander harmonieren. 

Aufgrund des wunderbar kompatiblen Aufbaus dieses Schriftpaars kannst du sie wirklich überall verwenden. Da diese Schriftarten jedoch auch auf kleineren Bildschirmen gut funktionieren, solltest du sie auf E-Commerce-Websites verwenden. Deine mobilen Kunden werden die hervorragende Lesbarkeit deiner Produktseiten zu schätzen wissen.

Hole dir die Schriftarten: 

  • Merriweather Sans
  • Merriweather

20. Montserrat & Droid Serif

Dies ist ein großartiges Beispiel dafür, dass Schriften genau dort eingesetzt werden, wo sie eigentlich hingehören. Das Design der Montserrat stammt aus der brasilianischen Beschilderung, während die Droid Serif für ein komfortables Leseerlebnis auf Android-Geräten entwickelt wurde. 

Du kannst dieses Schriftpaar für Nachrichten- und Unterhaltungsseiten mit einer großen mobilen Leserschaft (d. h. jüngeren Lesern) verwenden. Montserrat lenkt ihre Aufmerksamkeit auf die Schlagzeilen, während der lesbare Fließtext sie bei der Stange hält, auch wenn sie weiter scrollen müssen.

Wähle die Schriftarten: 

  • Montserrat
  • Droid Serif

21. Neue Helvetica & EB Garamond Medium

Die Neue Helvetica bietet eine große Flexibilität in Bezug auf ihre Verwendung (es gibt über 120 Schriftstile). Diese digitalisierte Neuinterpretation der alten Helvetica macht sich gut in Kombination mit einer klassischen Schrift wie EB Garamond. 

Das obige Beispiel zeigt, wie diese Kombination beispielsweise für ein Klatschmagazin nützlich sein könnte, dessen Schlagzeilen die Besucher sofort in ihren Bann ziehen sollen. Aber du könntest diese Kombination (mit anderen, zarteren Varianten der Neuen Helvetica) auch auf Websites von Dienstleistungsunternehmen verwenden, wo moderne Lösungen auf alte Geschäftswerte treffen. 

Hole die Schriftarten: 

  • Neue Helvetica
  • EB Garamond

22. Nexa Bold & Crimson Pro

Bild Mit dem sauberen und einfachen Design der Nexa und dem zugeknöpften und strengen Look der Crimson Pro wirst du diese Schriften verwenden wollen, um Leser in intellektuelle Unternehmungen einzuführen. Podcast-Episoden. Proprietäre Forschungsberichte. Blogs mit Infografiken oder anderen grafiklastigen Inhalten. 

Der gedämpfte Ton dieses Duos ermöglicht es, dass deine aufsehenerregenden visuellen oder Audio-Inhalte einen größeren Eindruck bei deinem Publikum hinterlassen. 

Hole dir die Schriftarten: 

  • Nexa
  • Karminrot Pro

23. Noir Pro & Playfair Display

Playfair Display ist, wie der Name schon sagt, eine Display-Schriftart, d. h. sie ist für die Darstellung in größeren Größen gedacht. Daher sollten Sie das Duo Noir/Playfair Display für Überschriften und Zwischenüberschriften verwenden (auf der Homepage, am Anfang von Blogbeiträgen usw.). Mit dieser Kombination kannst du deiner Seite eine gewisse Dramatik verleihen, ohne dass das Ganze zu aufdringlich wirkt. 

Natürlich brauchst du eine dritte Schriftart für den Fließtext. In diesem Fall wäre eine beliebte Serifenschrift wie Times New Roman oder Georgia ein gutes Gegengewicht zu den beiden anderen.

Hole dir die Schriftarten: 

  • Noir
  • Playfair Display

24. Open Sans & Source Sans

Bild Sowohl Open Sans als auch Source Sans Pro haben ein neutrales und dennoch freundliches Erscheinungsbild, was sehr nützlich ist, wenn du eine Website hast, die sich an globale Verbraucher richtet. Sie müssen sich keine Gedanken über einen zeit- oder ortsspezifischen Stil machen, der nur einen Teil Ihrer Zielgruppe anspricht.

Darüber hinaus verfügen beide Schriften über einen erweiterten Zeichensatz, so dass sie sich hervorragend für mehrsprachige Websites eignen, die in lateinische, kyrillische und griechische Alphabete übersetzt werden. 

Hole dir die Schriftarten: 

  • Opens Sans
  • Source Sans Pro

25. Oswald & Montserrat Extra Light

Die Kombination dieser beiden Schriften hat etwas von einem Schausteller. Die große und schlanke Kopfzeile der Oswald ragt über den helleren Text der Montserrat darunter. Es fühlt sich an, als würde jemand eine Bühne betreten, um eine Ankündigung zu machen, während die Menge darunter still wird. 

Diese Schriftkombination eignet sich hervorragend für Websites, die Veranstaltungen, Konferenzen, Webinare usw. bewerben. Achte nur darauf, dass du die Montserrat Extra Light für kleinere Textabschnitte (wie Zwischenüberschriften oder kurze Absätze) verwendest, damit sie nicht zu einer Herausforderung wird.

Hole dir die Schriftarten: 

  • Oswald
  • Montserrat

26. Oswald & Alter Standard TT

In dieser Paarung haben wir Oswald mit Old Standard TT zusammen. Oswald nimmt immer noch eine dominante Rolle ein, obwohl er in diesem Fall eher autoritär als fordernd wirkt. Und das muss sie auch sein, denn die Old Standard ist eine kleine, lehrbuchähnliche Schrift. 

Dieses Duo eignet sich gut für Websites von Unternehmen des Gesundheitswesens und von Bildungseinrichtungen, die als angesehene Autoritäten in ihrem Bereich wahrgenommen werden wollen. 

Hole dir die Schriftarten: 

  • Oswald
  • Alte Standard TT

27. Playfair Display & Raleway Thin

Die Kombination der Display-Schriften Playfair Display und Raleway eignet sich für die Gestaltung von auffälligen Homepage-Helden oder einleitenden Bannern am oberen Rand von internen Seiten oder Kategorieseiten. 

Da beide Schriften eine zarte und doch starke Ausstrahlung haben (zumindest die Raleway in ihrer „Thin“-Variante), könntest du die obige Kombination zur Gestaltung von Mode-Websites oder solchen für lokale Einzelhändler verwenden. 

Hole dir die Schriftarten: 

  • Playfair Display
  • Raleway

28. PT Sans & PT Serif

PT Sans und PT Serif sind eine dieser Schwesterschriften, die wie geschaffen sind, um zusammen verwendet zu werden. 

Diese Schriftarten haben nicht viel Charakter. Sie sind sauber, einfach und einheitlich im Design, was sie vielseitig einsetzbar macht. Aufgrund ihrer zurückhaltenden Ausstrahlung eignen sie sich jedoch sehr gut für Websites mit großen, auffälligen Bildern, die den größten Teil der Arbeit für den Verkauf der Produkte übernehmen. Wie Websites für Autos, Robotik, intelligente Geräte usw. 

Hole dir die Schriftarten: 

  • PT Sans
  • PT Serif

29. Raleway & Merriweather

Bild Wir haben diese Schriften schon einmal in dieser Liste gesehen – und deine Besucher haben sie wahrscheinlich auch schon im Internet gesehen. Dafür gibt es einen guten Grund. Sie sind beide groß, fett und wunderschön gestaltet.

Wenn du diese beiden beliebten und vertrauten Schriftarten miteinander kombinierst, erhältst du etwas, das sich sehr ehrlich anfühlt und bei dem der Benutzer im Mittelpunkt steht. Diese Kombination eignet sich hervorragend für Websites von professionellen Dienstleistern wie Anwälten, Maklern, Schriftstellern, Beratern usw. 

Hole dir die Schriftarten: 

  • Raleway
  • Merriweather

30. Source Sans Pro & Times New Roman

Times New Roman wird oft abgetan, weil sie überstrapaziert ist. Aber wenn sie zusammen mit einer Source Sans Pro Kopfzeile verwendet wird, ergibt sich ein gutes Gleichgewicht. 

Source Sans Pro ist vom Design her so einfach, dass sie nicht zu überwältigend oder technisch wirkt. Und Times New Roman ist so vertraut, dass sie automatisch ein Gefühl von Ehrlichkeit und Zuverlässigkeit vermittelt. Wenn du eine Website erstellst, auf der du technische oder digitale Produkte verkaufst, ist dieses Schriftartenpaar sehr gut geeignet.

Hole dir die Schriftarten: 

  • Source Sans Pro
  • Times New Roman

 

Einfaches Pairing von Schriften mit der umfangreichen Schriftbibliothek von Elementor

Schriftkombinationen sind wie menschliche Beziehungen: Einige sind füreinander bestimmt, während andere einfach nicht gut funktionieren. 

Das bedeutet nicht, dass du Angst haben musst, wenn es an der Zeit ist, Schriften zu mischen und zu kombinieren. Es bedeutet nur, dass du darauf achten musst, wie viel Reibung es bei der Kombination deiner Schriften gibt und wie viel Reibung sie auf einer Website verursachen können. 

Wie wir im obigen Leitfaden für die Kombination von Schriftarten gesehen haben, solltest du nach Schriftarten suchen, die sich gegenseitig ausgleichen, ein Gefühl der Hierarchie vermitteln und in Bezug auf den Ton eine einheitliche Front darstellen. Und natürlich solltest du nicht vergessen, von vornherein die richtigen Schriftarten auszuwählen. 

Übersetzt von Verena Jütte
von Website Freiburg

Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/font-pairing