10 Awesome Google Font Combinations Trending in 2021

Eine Liste von trendigen Schriftarten handverlesen von Google Fonts, die gut zusammenpassen und wie man sie auf seiner Website installiert.

• Artikel von Jason Beever
• Aktualisiert: 2. Januar 2020
• Tags: Typografie, Webdesign

Die Typografie von Websites war früher eine noch geheimnisvollere Designpraxis als heute. Der komplizierte Prozess der Dekoration einer Webseite mit benutzerdefinierten Schriftarten erforderte einst die Konvertierung und Einbettung von Schriftartendateien, die auf dem Server des Benutzers gehostet werden mussten, und die Auswahl an verfügbaren Schriftarten war auf die eigene Sammlung oder das Wissen des Benutzers über Typografie außerhalb der Standard-Systemschriftarten beschränkt. Infolgedessen sahen die meisten Websites in ihrer Inhaltsformatierung fast identisch aus, die sich auf viele überstrapazierte und banale websichere Schriftarten stützte.

Das alles änderte sich 2010 mit der Veröffentlichung von Google Fonts, einem Open-Source-Projekt, das eine viel einfachere Implementierung benutzerdefinierter Schriftarten auf Websites ermöglicht. Die Installation dieser Schriften auf der eigenen Website ist glücklicherweise ein schneller und einfacher Prozess, aber Sie sollten sich bewusst sein, dass nicht jede Schriftkombination in der Google-Bibliothek ein Rezept für typografischen Erfolg ist. Mit den richtigen Schriftkombinationen und Überlegungen zur Verwendung kann Ihre Online-Marke jedoch Professionalität, Schönheit und Leserfreundlichkeit ausstrahlen, ohne dass Sie teure, maßgeschneiderte Schriftarten benötigen. In diesem Artikel zeige ich Ihnen, wie Sie all dies erreichen können.

Eine Liste von 10 aktuellen Google-Schriftkombinationen

Lassen Sie uns loslegen! In keiner bestimmten Reihenfolge, hier sind 10 der besten Google Font Kombinationen, die derzeit im Trend liegen:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Hier ist eine einfache Kombination, die für fast jeden Einsatzzweck Wunder wirkt. Open Sans ist eine der – wenn nicht sogar die – vielseitigste Schriftart in der gesamten Sammlung von Google Fonts. Sie ist in großen Textblöcken extrem gut lesbar und dennoch auffällig genug für Überschriften.

Einfach. Anspruchsvoll. Vertraut.

Real-World Use

Ich kann mir kein Szenario vorstellen, in dem Open Sans eine schlechte Wahl wäre. Wenn Sie nicht gerade nach einer Serifenschrift suchen, denke ich, dass diese Schrift für fast jedes Unternehmen, jeden Blog, jede Landing Page oder jede Web-App perfekt geeignet ist.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald ist eine großartige Schriftart für Überschriften, unabhängig vom Schriftgewicht oder der Verwendung von Versalien. Ihre komprimierte Art hilft ihr, Aufmerksamkeit zu erregen und hervorzustechen, aber sie sorgt auch für einen angenehm einzigartigen Text als Hauptschriftart.

EB Garamond ist eine elegante Aktualisierung der klassischen Garamond-Schrift. Sie hat einen hohen Wiedererkennungswert und ein zeitloses Erscheinungsbild und verleiht Ihrer Typografie eine unverwechselbare Professionalität.

Real-World Use

Diese Kombination eignet sich gut für Fachleute, die mit einer gehobenen Kundschaft zu tun haben, wie z. B. Anwälte, Immobilienagenturen oder sogar gehobene Boutiquen. Die Vielseitigkeit der Oswald und das klassische Aussehen der EB Garamond eignen sich hervorragend für Produktbeschreibungen, bei denen es wichtig ist, einen Artikel von höchster Qualität hervorzuheben.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat ist wegen ihrer Vielseitigkeit und Einfachheit bei Designern sehr beliebt, und Merriweather passt mit ihrem kontrastreichen Stil und ihrer leichten Lesbarkeit wunderbar dazu. Tauschen Sie sie ruhig als Überschrift oder als Absatztext aus – beides funktioniert hervorragend!

Real-World Use

Diese besondere Kombination ist eine schöne Mischung aus modernem und klassischem Design. Als solche kann sie für viele Arten von Unternehmen verwendet werden. Ich persönlich bin der Meinung, dass diese Schriftarten gut für jede Art von Online-Nachrichtenquelle oder Verlagsagentur geeignet wären.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Die Schriftart Roboto ist mein persönlicher Favorit und wird auch von uns hier bei How To Get Online verwendet. Sie ist extrem vielseitig und bietet eine breite Palette von Schriftschnitten, so dass es praktisch keine Einschränkungen für die Verwendung der Schrift gibt. Modern und geometrisch, aber dennoch freundlich und zuverlässig, ist Roboto ein Wunderwerk aus Form und Funktion.

Real-World Use

Hier ist eine weitere Paarung, für die man nur schwer eine schlechte Verwendung finden kann. Roboto eignet sich zwar für so ziemlich alles, aber ich denke, es ist besonders gut für Tech-Start-ups, moderne kleine Unternehmen oder jede Art von Marke mit Blick auf die Zukunft geeignet.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Es ist wieder unser Freund Roboto! Diesmal geht es allerdings um die Serifenvariante Roboto Slab. Diese Schriftart ist genauso vielseitig wie ihr Cousin, hat aber einen etwas klassischeren Stil. In Kombination mit der markanten und fetten Raleway ergibt sich eine erstaunliche Kombination aus sauberer und raffinierter Typografie.

Real-World Use

Raleway ist eine dieser Schriften, die nach Raffinesse schreit. Wenn sie als Überschrift in Großbuchstaben verwendet wird, eignet sie sich hervorragend für Luxusartikel wie Schmuck, Designerkleidung oder ähnlich gehobene E-Commerce-Produkte. Roboto Slab unterstützt sie gut mit einfachem und ansprechendem beschreibendem Text.

Beide können auch untereinander ausgetauscht werden. Probieren Sie verschiedene Gewichtungsvarianten für beide Schriften in den Überschriften und im Fließtext aus und sehen Sie, welche Paarung Ihre Marke am besten einfängt.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Nach Angaben des Designers wurde Playfair Display von den Buchstabenformen des 18. Jahrhunderts inspiriert, als der Übergang von Federkielen zu Schreibgeräten mit Stahlspitze stattfand. Es ist also keine Überraschung, dass diese Schriftart den Charme der alten Welt ausstrahlt, aber mit einem modernen Touch.

Source Sans Pro treibt die Dinge noch ein bisschen weiter in die Zukunft und schafft eine faszinierende Kombination, die verschnörkelt und gleichzeitig praktisch ist.

Real-World Use

Playfair Display verleiht z.B. einer Tagline oder einer Produktbeschreibung eine persönliche Note. Wenn Sie die Möglichkeit haben, das kaufmännische Und oder die Währungssymbole zu verwenden, werden Sie sofort erkennen, warum sie die perfekte Wahl für ein Produkt oder eine Dienstleistung ist, bei der Luxus und Äußerlichkeiten im Mittelpunkt stehen. Source Sans Pro sorgt für eine moderne und saubere Präsentation des Textes.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One ist vielleicht nicht die vielseitigste Schriftart, aber eine Sache, die sie extrem gut kann, ist die Erstellung von Überschriften, die Aufmerksamkeit verlangen. Ob klein oder groß, Kleinbuchstaben oder Großbuchstaben, diese Buchstaben wirken hypnotisierend, egal, was man mit ihnen macht.

Noto Sans soll eine wirklich universelle Schrift sein, die unabhängig von der Sprache ohne Formatierungsfehler für Benutzer auf der ganzen Welt angezeigt werden kann. Dementsprechend ist die Ästhetik der Schrift ebenso vielseitig wie ihr Nutzen.

Real-World Use

Blogs oder Landing Pages würden sich hervorragend für diese Paarung eignen – oder wirklich alles mit langen Textkörpern, die auffällige Zwischenüberschriften zur Auflockerung des Inhalts benötigen. Die universelle Anpassungsfähigkeit von Noto Sans macht sie auch zu einer guten Wahl, wenn es darum geht, ein internationales Publikum zu erreichen.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya hat eine gewisse Anziehungskraft, die auf mich sehr „erdig“ und freundlich wirkt. Es gibt keine Verstellung ihrer Persönlichkeit; was man sieht, ist das, was man bekommt.

Lato könnte Open Sans als Champion der Allzweck-Schriften in Googles Bibliothek einen Strich durch die Rechnung machen.

Zusammen ergeben sie eine Kombination, die Spaß macht, leicht zu lesen und pragmatisch ist.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Die PT Sans und ihre Geschwister, die PT Sans Narrow, sind eine weitere moderne Variante einer Schrift aus der Alten Welt, die zusammen eine sofortige und unmissverständliche Aussage machen.

Real-World Use

Beide Schriften eignen sich gleichermaßen gut für Überschriften und Fließtext; die von Ihnen gewählte Kombination hängt von der Art Ihrer Worte ab – obwohl ich PT Sans Narrow in kürzeren Abschnitten bevorzuge.

Bestimmt als ein „sehr wichtiges Werkzeug für die moderne digitale Kommunikation“, scheint es am besten geeignet zu sein, diese Schriften für Tech-Startups, Software-Anwendungen oder andere digitale Unternehmen zu verwenden – aber sicherlich nicht darauf beschränkt.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okay, diese hier ist definitiv eher auf der unbeschwerten Seite. Natürlich ist diese Kombination nicht für jeden geeignet, aber der skurrile Charakter von Amatic SC und Josefin Sans sorgt dafür, dass Sie sich von der Masse abheben – vorausgesetzt, Sie lassen Vorsicht walten!

Real-World Use

Wenn Sie ein Künstler, Schauspieler, Musiker oder Entertainer sind, der Spaß an der Sache hat, dann könnte diese Schriftart für die Darstellung Ihrer einzigartigen Persönlichkeit unerlässlich sein. Je nach übergeordnetem Ton und Thema könnte diese Kombination auch für einen Nischenblog geeignet sein.

Ein Ratschlag: Verwenden Sie Amatic SC nicht als Haupttext. Sie werden Ihre Leser in den Wahnsinn treiben.

Bonus: 5 unserer Lieblings-Premium-Schriften

Wir wissen, dass es in diesem Artikel um die besten und angesagtesten Google-Schriften geht, aber wir wollten auch ein paar unserer Lieblings-Premium-Schriften als Bonus erwähnen. Premium-Schriftarten sind natürlich nicht kostenlos – aber sie verleihen Ihrer Website ein einzigartiges und individuelles Design. Diese Schriftarten sind nicht populär oder im Trend, sondern genau das Gegenteil von den oben genannten. Sie eignen sich jedoch hervorragend für diejenigen, die ein individuelles und personalisiertes Design für ihre Marke wünschen, und können gut für Logos oder sogar kreative Überschriften verwendet werden:

Bonus 1: Das Mega Craft Bundle X

Bonus 2: Das Valentine’s Bundle

Bonus 3: Das Cool Font Bundle

Bonus 4: Das Little Graphics Bundle

Bonus 5: Jealous

Warum sollten Sie Google Fonts verwenden?

Willkommen zu dem, was viele Webdesigner als ihren besten Freund betrachten. Aus eigener Erfahrung kann ich Ihnen sagen, dass ich nur noch selten benutzerdefinierte Schriftdateien in Websites einbette. Google Fonts ist jetzt fast ausschließlich der erste und letzte Ort, an den ich mich für die Typografie einer Website wende. Hier der Grund:

• Es ist völlig kostenlos. Es spielt keine Rolle, wie viele Schriftarten Sie auswählen oder auf wie vielen Websites Sie sie verwenden. Du wirst nie einen Cent bezahlen.
• Im März 2018 gibt es über 850 Schriftarten in der Bibliothek. Die Chancen stehen gut, dass Sie den richtigen Stil finden, der zu Ihrer Marke passt.
• Es geht schnell. Da die Schriftarten auf den Servern von Google gehostet werden, sind die Dateien intelligent komprimiert und so konzipiert, dass sie schnell geladen werden.
• Es ist einfach. Ein einfaches Kopieren und Einfügen in eine HTML-Datei, und schon sind Sie fertig.
• Sie ist übersichtlich. Alle Schriftarten sind in einer Datenbank kategorisiert und durchsuchbar. Sie müssen sich nicht mehr durch unübersichtliche Unterordner auf Ihrem Computer wühlen, um die perfekte Schrift zu finden.
• Hatte ich schon erwähnt, dass es kostenlos ist? Es ist kostenlos!

So installieren Sie Google Fonts

Hier ist kein Kopfzerbrechen erforderlich. Gehen Sie einfach zu Google Fonts und suchen Sie die Schriftart(en), die Sie benötigen.

Während Sie Ihre Schriftarten auswählen, werden diese nach und nach zu einer Sammlung am unteren Rand der Seite hinzugefügt. Wenn Sie mit Ihrer Suche fertig sind, klicken Sie auf die untere Registerkarte und ein Fenster mit Einbettungsanweisungen wird angezeigt.

Stile hinzufügen

Von hier aus können Sie zusätzliche Stile wie kursiv, fett, fett-kursiv usw. einfügen. Klicken Sie einfach auf die Registerkarte ANPASSEN und wählen Sie die Stile aus, die Sie benötigen.

Zum Beispiel würde ich hier sowohl normalen als auch fetten Text für die Schriftart Khula auswählen.

Standard oder @Import einbinden?

Sie werden feststellen, dass Sie zwei Möglichkeiten haben, die Schriftarten in Ihre Website einzubinden: Sie können einen Standard-<Link href> verwenden, der in der HTML-Datei Ihrer Website verwendet wird, oder eine @import-URL, die in die CSS-Datei Ihrer Website aufgenommen wird.

Im Allgemeinen ist es am besten, die Zeile <link href> zu kopieren und in Ihre HTML-Datei einzufügen. Auf diese Weise werden Ihre Schriften in der Regel schneller geladen, als wenn Sie darauf warten, dass die CSS-Datei geladen wird. Außerdem bietet diese Methode eine etwas bessere Unterstützung für (sehr) alte Browser.

Wo soll der Code eingefügt werden

Sie kopieren die Codezeile, die Google Ihnen vorgibt, und fügen sie in den <head>-Abschnitt Ihrer HTML-Datei ein. Mit der Schriftart Khula, die ich oben ausgewählt habe, sieht das dann so aus:

Verwendung der Schriftart in Ihrem Style Sheet

Nun rufen Sie die Schriftart einfach wie gewohnt in Ihrem CSS-Code auf. Zur Veranschaulichung könnten Ihre Hauptüberschrift und der Absatztext so aussehen:

Ratschläge zum Zusammenstellen von Schriftarten

Die Entscheidung, welche Schriftarten zusammen gruppiert werden sollen, kann manchmal ein schwieriges künstlerisches Gleichgewicht darstellen. Einerseits ist Ihre Schriftauswahl am wirkungsvollsten, wenn ein ausreichender Kontrast zwischen den Stilen besteht; jede Schrift auf Ihrer Website muss sich von den anderen abheben und eine Rechtfertigung für ihre Verwendung verdienen. Andererseits sollten sich Ihre Schriften stilistisch nicht zu weit voneinander entfernen, da dies den Eindruck erwecken könnte, dass sie willkürlich ausgewählt wurden.

Serif und Sans-Serif

Eine bewährte Methode ist die Kombination einer Serifenschrift mit einer serifenlosen Schrift. Ihre Stile kontrastieren in der Regel gut miteinander und bieten eine einfache Unterscheidung zwischen Überschriften und Absätzen.

Experimentieren ist der Schlüssel

Wenn ich Schriftarten für eine neue Website auswähle, lade ich gerne alle möglichen Google Font-Optionen auf meinen Computer herunter und spiele mit ihnen in einem Textverarbeitungsdokument. Das Herumspielen mit verschiedenen Größen und Gewichten und der Vergleich der Kombinationen nebeneinander ist eine effektive Methode, um die bestmögliche Kombination zu ermitteln. Wenn Sie sich die Zeit zum Experimentieren nehmen, stellen Sie vielleicht sogar fest, dass eine dünne Variante einer bestimmten Schriftart einen besseren Überschriftentext ergibt, als wenn Sie eine völlig andere Schriftart verwenden würden. (Die einfachste Lösung ist oft die beste.)

Fazit

Google Fonts ist eine leistungsstarke Ressource für Heimwerker, die nicht für teure benutzerdefinierte Schriftarten für ihre Website bezahlen wollen. Doch mit großer Macht kommt auch große Verantwortung: Typografie muss gut durchdacht sein, und nicht jede Schriftart ist ein Gewinn. Wir hoffen, dass dieser Leitfaden Ihnen hilft, die richtige Richtung einzuschlagen und Sie dazu inspiriert, die perfekte Schriftart zu finden, die die Persönlichkeit Ihrer Marke widerspiegelt.