10 großartige Google Font-Kombinationen im Trend im Jahr 2020

Eine Liste trendiger Schriftarten, die von Google Fonts ausgewählt wurden und gut zusammenpassen, und wie Sie sie auf Ihrer Website installieren.


Beste Google Fonts-Kombinationen

Die Typografie von Websites war früher eine mysteriösere Designpraxis als heute. Der komplizierte Vorgang des Dekorierens einer Webseite mit benutzerdefinierten Schriftarten erforderte das Konvertieren und Einbetten von Schriftdateien, die auf dem Server des Benutzers gehostet werden sollten, und die Auswahl der verfügbaren Schriftarten beschränkte sich auf die eigene Sammlung oder das Wissen des Benutzers über Typografie außerhalb der Standardsystemschriftarten. Infolgedessen sahen die meisten Websites in ihrer Inhaltsformatierung nahezu identisch aus, was auf vielen überstrapazierten und banalen Elementen beruhte Web-sichere Schriftarten.

Das hat sich 2010 mit der Veröffentlichung von geändert Google Fonts, Ein Open-Source-Projekt, das die Implementierung benutzerdefinierter Schriftarten auf Websites erheblich vereinfacht. Das Installieren dieser Schriftarten auf Ihrer eigenen Website ist zum Glück ein schneller und einfacher Vorgang. Sie sollten sich jedoch bewusst sein, dass nicht jede Schriftkombination in der Google-Bibliothek ein Rezept für typografischen Erfolg ist. Mit den richtigen Schriftpaarungen und Überlegungen zur Verwendung kann Ihre Online-Marke jedoch Professionalität, Schönheit und Leserfreundlichkeit ausstrahlen, ohne dass teure, benutzerdefinierte Schriftarten erforderlich sind. In diesem Artikel werde ich Ihnen zeigen, wie Sie all dies erreichen.

Eine Liste von 10 trendigen Google-Schriftkombinationen

Lasst uns anfangen! In keiner bestimmten Reihenfolge finden Sie hier 10 der derzeit besten Google Font-Kombinationen:

1. Open Sans Condensed + Open Sans

Trending Google Font Combination - Open Sans Condensed und Open Sans

Hier ist eine einfache Kombination, die für nahezu jede Anwendung Wunder wirkt. Öffnen Sie Sans ist eine der vielseitigsten Schriftarten in der gesamten Sammlung von Google Fonts. Es ist extrem einfach, in großen Textblöcken zu lesen, während es dennoch für Schlagzeilen auffällig genug ist.

Einfach. Anspruchsvoll. Familiär. Sie können nichts falsch machen!

Verwendung in der realen Welt

Ich kann mir kein Szenario vorstellen, in dem Öffnen Sie Sans wäre eine schlechte Wahl. Sofern Sie nicht speziell nach einer Serifenschrift suchen, eignet sich diese meiner Meinung nach für nahezu jedes Unternehmen, jeden Blog, jede Zielseite oder jede Web-App perfekt.

2. Oswald + EB Garamond

Trendige Google Fonts-Kombination - Oswald mit EB Garamond

Oswald ist eine großartige Schriftart für Überschriften, unabhängig von der Schriftgröße oder der Verwendung von Großbuchstaben. Seine komprimierte Natur hilft ihm, Aufmerksamkeit und Pop zu erregen, aber es sorgt auch für einen angenehm einzigartigen Text als Schriftart Ihres Hauptkörpers.

EB Garamond ist ein elegantes Update der klassischen Garamond-Schrift. Diese Schrift ist sofort erkennbar und zeitlos im Aussehen und strahlt eine unverwechselbare Professionalität in Ihrer Typografie aus.

Verwendung in der realen Welt

Diese Paarung eignet sich gut für Fachleute, die mit High-End-Kunden wie Anwälten, Immobilienagenturen oder sogar gehobenen Boutiquen zu tun haben. Die Vielseitigkeit von Oswald und das klassische Aussehen von EB Garamond Machen Sie einen großartigen Produktbeschreibungstext, bei dem es wichtig ist, einen Artikel von höchster Qualität hervorzuheben.

3. Montserrat + Merriweather

Trendige Google Fonts-Kombination - Montserrat mit Merriweather

Montserrat ist ein Favorit unter Designern für seine Vielseitigkeit und Einfachheit, und Merriweather passt wunderbar zu seinem kontrastierenden Stil und seiner einfachen Lesbarkeit. Sie können sie auch als Überschriften oder Absatztext austauschen – beide funktionieren hervorragend!

Verwendung in der realen Welt

Diese besondere Kombination ist eine schöne Balance zwischen modernem und klassischem Design. Daher könnte seine vielfältige Verwendung viele Arten von Unternehmen unterstützen. Persönlich bin ich der Meinung, dass diese Schriftarten für jede Art von Online-Nachrichtenquelle oder Verlagsagentur gut geeignet sind.

4. Roboto Thin + Roboto Regular

Trendige Google Fonts-Kombination - Roboto Thin mit Roboto Regular

Das Roboto Die Schriftfamilie ist ein persönlicher Favorit und wird auch hier bei How To Get Online verwendet. Es ist äußerst vielseitig und bietet eine Vielzahl von Schriftstärken. Es gibt praktisch keine Einschränkung, wofür die Schrift verwendet werden kann. Roboto ist modern und geometrisch, aber dennoch freundlich und zuverlässig. Es ist ein Wunderwerk an Form und Funktion.

Verwendung in der realen Welt

Hier ist eine weitere Paarung, für die Sie kaum eine schlechte Verwendung finden würden. Während Roboto funktioniert für fast alles, ich denke, es ist besonders gut für Tech-Start-ups, moderne kleine Unternehmen oder jede Art von Marke mit Blick auf die Zukunft.

5. Raleway + Roboto Platte

Trendige Google Fonts-Kombinationen - Raleway mit Roboto Slab

Es ist unser Freund Roboto nochmal! Diesmal sehen wir uns jedoch die Serifenvariante an, Roboto-Platte. Es ist eine Schriftart, die genauso vielseitig ist wie ihre Cousine, aber etwas klassischer im Stil. In Kombination mit dem unverwechselbaren und mutigen Raleway, Wir haben eine erstaunliche Übereinstimmung von sauberer und raffinierter Typografie.

Verwendung in der realen Welt

Raleway ist eine dieser Schriften, die Raffinesse schreit. Wenn es als All-Caps-Überschrift verwendet wird, eignet es sich hervorragend für Luxusartikel wie Schmuck, Designerkleidung oder ähnlich hochwertige E-Commerce-Produkte. Roboto-Platte unterstützt es gut mit einfachem und zugänglichem beschreibendem Text.

Beide arbeiten auch austauschbar. Probieren Sie verschiedene Gewichtsvarianten für beide Schriftarten in den Überschriften und im Text aus und finden Sie heraus, welche Paarung Ihre Marke am besten erfasst.

6. Playfair Display + Source Sans Pro

Trendkombination für Google-Schriftarten - Playfair-Anzeige mit Source Sans Pro

Laut seinem Designer, Playfair-Anzeige wurde von den Buchstabenformen des 18. Jahrhunderts beim Übergang von Federkielen zu Stiften mit Stahlspitze inspiriert. Kein Wunder also, dass diese Schrift den Charme der alten Welt ausstrahlt, aber einen modernen Touch hat.

Quelle Sans Pro treibt die Dinge ein Stück weiter in die Zukunft und schafft eine faszinierende Kombination, die reich verziert ist und dennoch nützlich ist.

Verwendung in der realen Welt

Playfair-Anzeige Verleiht einem Slogan 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 dies die perfekte Wahl für ein Produkt oder eine Dienstleistung ist, die sich um Luxus und Aussehen dreht. Quelle Sans Pro hält den Text in einer modernen und sauberen Präsentation geerdet.

7. Fjalla One + Noto Sans

Trendige Google Fonts-Kombination - Fjalla One mit Noto Sans

Fjalla Eins Vielleicht ist es nicht die vielseitigste Schriftart, aber eine Sache, die es sehr gut macht, ist, Überschriften zu erstellen, die Aufmerksamkeit erfordern. Klein oder groß, Kleinbuchstaben oder Großbuchstaben, diese Buchstaben sind hypnotisch, egal was Sie damit machen.

Noto Sans Ziel ist es, eine wirklich universelle Schriftart zu sein, die unabhängig von der Sprache ohne Formatierungsfehler für Benutzer auf der ganzen Welt angezeigt werden kann. Passenderweise ist die Ästhetik der Schrift ebenso vielseitig wie ihre Nützlichkeit.

Verwendung in der realen Welt

Blogs oder Zielseiten eignen sich hervorragend für diese Paarung – oder für alles, was lange Textkörper enthält, für deren Aufteilung auffällige Unterüberschriften erforderlich sind. Die universelle Anpassungsfähigkeit von Noto Sans macht es auch zu einer guten Wahl, wenn das Erreichen eines internationalen Publikums Priorität hat.

8. Alegreya + Lato

Trendkombination für Google Fonts - Alegreya mit Lato

Alegreya hat eine gewisse Anziehungskraft, die sich für mich sehr “erdig” und freundlich anfühlt. Es gibt keinen Anspruch auf seine Persönlichkeit; Was du siehst ist was du kriegst.

Lato könnte geben Öffnen Sie Sans ein Renner um sein Geld als Verfechter von Allzweck-Schriftarten in der Google-Bibliothek.

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

9. PT Sans Narrow + PT Sans

Trendige Google Fonts-Kombination - PT Sans Narrow mit PT Sans

Eine weitere moderne Version des Stils der Alten Welt, PT Sans und seine Brüder, PT Sans Narrow, Geben Sie eine sofortige und unverwechselbare Erklärung ab, wenn Sie zusammen gepaart werden.

Verwendung in der realen Welt

Jede Schriftart eignet sich gleichermaßen als Überschrift oder Text. Die bestimmte Paarung, die Sie wählen, hängt von der Art Ihrer Wörter ab – obwohl ich PT Sans Narrow in kürzeren Bursts eher bevorzuge.

Als „sehr wichtiges Werkzeug für die moderne digitale Kommunikation“ gedacht, scheint es am besten geeignet zu sein, diese Schriftarten für Tech-Startups, Softwareanwendungen oder andere digitale Unternehmen zu verwenden – wenn auch nicht darauf beschränkt.

10. Amatic SC + Josefin Sans

Trendige Google Fonts-Kombination - Amatic SC mit Josefin

Okay, das hier ist definitiv eher unbeschwert. Offensichtlich funktioniert diese Kombination nicht für alle, aber für die skurrile Natur beider Amatic SC und Josefin Sans Erstellen Sie etwas, das sich von anderen abhebt – solange Sie vorsichtig sind!

Verwendung in der realen Welt

Wenn Sie ein lustiger Künstler, Musiker oder Entertainer sind, kann diese Schriftart für die Erfassung Ihrer einzigartigen Persönlichkeit von entscheidender Bedeutung sein. Abhängig vom übergreifenden Ton und Thema könnte diese Kombination auch für ein Nischenblog funktionieren.

Ein Tipp: Nicht verwenden Amatic SC als Ihr Hauptteil Text. Sie werden Ihre Leser verrückt machen.

Bonus: 5 unserer bevorzugten Premium-Schriftarten

Wir wissen, dass es in diesem Artikel um die besten und beliebtesten Google-Schriftarten geht, aber wir wollten auch einige unserer bevorzugten Premium-Schriftarten 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 beliebt oder im Trend und in der Tat das Gegenteil von den oben aufgeführten. Diese eignen sich jedoch hervorragend für diejenigen, die ein individuelles und personalisiertes Design für ihre Marke wünschen und sich gut für Logos oder sogar kreative Überschriften eignen:

Bonus 1: Das Mega Craft Bundle X.

Bonus 2: Das Valentinstagspaket

Bonus 3: Das Cool Font Bundle

Bonus 4: Das kleine Grafikpaket

Bonus 5: Eifersüchtig

KURZER TIPP: Premium-Schriftarten bieten Designern die Möglichkeit, ein zeitloses Design zu erzielen, und werden für Logos und Markenidentität dringend empfohlen.

Warum sollten Sie Google Fonts verwenden??

Willkommen bei dem, was viele Webdesigner als ihren besten Freund betrachten. Aus Erfahrung kann ich Ihnen sagen, dass ich selten mehr 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 ist der Grund:

  • Es ist komplett frei. Es spielt keine Rolle, wie viele Schriftarten Sie auswählen oder auf wie vielen Websites Sie sie verwenden. Sie werden niemals einen Cent bezahlen.
  • Ab März 2018 gibt es über 850 Schriftarten in der Bücherei. Möglicherweise finden Sie den richtigen Stil für Ihre Marke.
  • Es ist schnell. Da die Schriftarten auf den Servern von Google gehostet werden, werden die Dateien intelligent komprimiert und so konzipiert, dass sie schnell geladen werden können.
  • Es ist einfach. Durch einfaches Kopieren und Einfügen in eine HTML-Datei sind Sie fertig.
  • Es ist organisiert. Alle Schriftarten sind in einer Datenbank kategorisiert und durchsuchbar. Sie müssen nicht mehr in unordentlichen Unterordnern auf Ihrem Computer nach der perfekten Schriftart suchen.
  • Habe ich schon erwähnt? kostenlos? Es ist kostenlos!

So installieren Sie Google Fonts

Hier sind keine Kopfschmerzen erforderlich. Geh einfach zu Google Fonts und finden Sie die Schriftart (en), die Sie benötigen.

Wenn Sie Ihre Schriftarten auswählen, werden sie kumulativ zu einer Sammlung am Ende der Seite hinzugefügt. Wenn Sie mit Ihrer Suche fertig sind, klicken Sie auf diese untere Registerkarte. Ein Fenster mit Anweisungen zum Einbetten wird angezeigt.

Stile hinzufügen

Von hier aus können Sie zusätzliche Stile wie Kursiv, Fett, Fett-Kursiv usw. hinzufügen. Klicken Sie einfach auf die ANPASSEN Wählen Sie die Stile aus, die Sie für erforderlich halten.

Hier ist zum Beispiel, wie ich beide auswählen würde regulär und Fett gedruckt Text für die Schriftart Khula.

Hinzufügen eines Schriftstils in Google Fonts

Einbetten des Standards oder von @Import?

Sie werden feststellen, dass Sie zwei Möglichkeiten zum Einbetten der Schriftarten in Ihre Website haben: Verwenden eines Standards zur Verwendung in Ihrer Website HTML Datei oder a @ Import URL in Ihre Website aufgenommen werden CSS Datei. Also welches solltest du verwenden?

Im Allgemeinen ist das Kopieren und Einfügen der besten Option Zeile in Ihre HTML-Datei. Ihre Schriftarten werden auf diese Weise normalerweise schneller geladen, anstatt darauf zu warten, dass die CSS-Datei geladen wird. Diese Methode unterstützt auch (sehr) alte Browser etwas besser.

Wo soll der Code abgelegt werden?

Sie werden die Codezeile, die Google Ihnen gibt, kopieren und in die einfügen Abschnitt Ihrer HTML-Datei. Wenn Sie also die oben ausgewählte Khula-Schriftart verwenden, sieht sie folgendermaßen aus:

KURZER TIPP: Sie können Schriftstile auch angeben, indem Sie sie in die durch Kommas getrennte URL schreiben. Zum Beispiel: “https://fonts.googleapis.com/css?family=Khula:fett, kursiv, fett

Verwenden der Schriftart in Ihrem Stylesheet

Jetzt rufen Sie einfach die Schriftart wie gewohnt in Ihrem auf CSS Code. Zu Demonstrationszwecken könnten Ihre Hauptüberschrift und Ihr Absatztext folgendermaßen aussehen:

h1 {
Schriftfamilie: „Khula“, serifenlos;
Schriftgröße: 700;
Schriftgröße: 48px;
}}
p {
Schriftfamilie: „Khula“, serifenlos;
Schriftgröße: 400;
Schriftgröße: 16px;
}}

KURZER TIPP: Stellen Sie sicher, dass Sie eine Fallback-Schriftart wie “Serif”, “Sans-Serif” oder eine ähnliche web-sichere Schriftart angeben, falls Ihre Google-Schriftart in seltenen Fällen nicht geladen werden kann.

Tipps zum Koppeln Ihrer Schriftarten

Die Entscheidung, welche Schriftarten zusammengefasst werden sollen, kann manchmal eine schwierige künstlerische Balance sein. Einerseits ist Ihre Schriftauswahl am effektivsten, wenn die Stile einen ausreichenden Kontrast aufweisen. Jede Schriftart auf Ihrer Website muss sich von den anderen abheben und eine Begründung für ihre Verwendung erhalten. Andererseits möchten Sie nicht, dass Ihre Schriftarten stilistisch zu weit voneinander entfernt sind, was den Eindruck erwecken könnte, dass sie zufällig ausgewählt wurden.

KURZER TIPP: Überlegen Sie, welche Emotionen oder Ideen eine bestimmte Schriftart hervorruft. Versuchen Sie, es mit einer anderen Schriftart zu koppeln, die dieselbe Emotion oder Idee hervorruft. Es geht darum, die richtigen Schriftarten zu finden, die zu Ihrer einzigartigen Marke passen. Sie wissen von Natur aus, wann sich eine Schriftart wie Ihre Marke anfühlt oder ob sie gemischte Signale liefert.

Serif und Sans-Serif

Eine bewährte Methode besteht darin, eine Serifenschrift mit einer serifenlosen zu koppeln. Ihre Stile kontrastieren 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, möchte ich alle möglichen Google-Schriftartenoptionen auf meinen Computer herunterladen und in einem Textverarbeitungsdokument damit spielen. Das Zappeln mit verschiedenen Größen und Gewichten und das Vergleichen der Kombinationen nebeneinander ist eine effektive Methode, um die bestmögliche Paarung zu ermitteln. Wenn Sie sich die Zeit zum Experimentieren nehmen, können Sie dies sogar mithilfe von a feststellen dünn Durch Variation einer bestimmten Schriftart wird ein besserer Überschriftentext erzielt, als wenn Sie eine völlig separate 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 auf ihrer Website bezahlen möchten. Aber mit großer Kraft geht eine große Verantwortung einher: Typografie erfordert sorgfältige Überlegungen, damit sie gut funktioniert, und nicht jede Schriftart da draußen ist ein Gewinner. Wir hoffen, dass dieser Leitfaden Sie in die richtige Richtung lenkt und Sie dazu inspiriert, die perfekte Schriftpaarung zu finden, um die Persönlichkeit Ihrer Marke einzufangen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map