Conterest ツ

Clever Bloggen

  • Blogtipps
    • Blogtipps
    • Blogger Income
    • Blogtraffic
    • Pinterest
    • Schrift & Grafik
    • Social Media
    • WordPress
  • Blogstart
    • Anleitung in 18 Schritten
    • Blog schreiben für Einsteiger
  • (Blog)Schreiben
  • 💠 eBooks
  • Gelbe Seite
  • Lexikon
    • 27 wichtige Begriffe

So findest du die schönsten Google Fonts und Font Kombinationen

Stand vom 2. April 2018 | Erschienen 21. Dezember 2015 | 17 Kommentare | Autor Sven Lennartz | Kategorie: Schrift & Grafik | ** Blogarchiv |

Lesezeit: 10 Minuten

So findest du die schönsten Google Fonts und Font Kombinationen

Die Google Fonts haben sich seit ihrer Einführung 2010 nachhaltig einen Platz im Web erobert. Vorbei sind die Zeiten, in denen man mit nur wenigen Standardschriften auskommen musste. Heutzutage hat der Seitenbetreiber und Blogger Hunderte davon zur Auswahl.

Google ist zwar nur eine Möglichkeit, aber die am weitesten verbreitete, was am Preis liegen könnte. Die Google Fonts nämlich darf jeder kostenlos nutzen – ohne Anmeldung, ohne Daten preiszugeben.

Werbung

Auch wenn es mit Typekit von Adobe ein zu bezahlendes Konkurrenzprodukt mit noch mehr Auswahl gibt, auf den Vorteil sollte man nicht verzichten. Oder willst du doch lieber andere kostenlose Fonts nutzen? Auch diese Liste könnte dir gefallen: 80 fantastische Schriften

Es gibt rund 848 Google Schriftarten (Stand 02/2018). Alle sind als Open Source frei einsetzbar. Du kannst die Schriften herunterladen und damit Grafiken oder Logos erstellen, du kannst sie in ein Stylesheet einbinden und auf deiner Website nutzen. WordPress Blogger kennen Plugins dafür, viele moderne Themes bringen einen Fontwähler gleich mit.

google-fonts-paar-2

Oben: Zwei Zeilen = ein Font. Die untere Zeile ist fett, trotzdem ist das Ergebnis ziemlich langweilig.

google-fonts-paar

Ganz anders bei dieser Beispielpaarung. Die zweite Schrift sorgt für Pepp

Et-Zeichen, das Fragezeichen und den Hashtag (#). Soweit ich sagen kann, sind Sonderzeichen und deutsche Umlaute in den meisten dieser Schriften enthalten, wenn nicht gar in allen.

Wenn es nun schon so viele davon gibt, bleibt erstens die Frage, was einsetzen und zweitens, was zueinanderpasst? Denn warum solltest du nicht mehrere Fonts miteinander kombinieren? Hier bei Conterest mache ich in den Beitragsbildern regen Gebrauch und zeige dir die schönsten Google Fonts und Font Kombinationen. Denn häufig nutze ich zwei davon in einem Bild. Klick dich durch die Beiträge, um zu sehen, was damit möglich ist.

google-font-paar-3

Es ist durchaus verbreitet, Überschrift und Fließtext in einem anderen Font zu setzen. Natürlich wird davon kein Posting besser, aber man lenkt den Blick des Lesers auf den Text. Der kann nämlich gar nicht anders als den Kontrast beachten. Unglücklicherweise ist die Verschwisterung von Schriften nicht so einfach. Hier ein schicker aktueller Artikel zum Thema: 2017 Trendy Google Fonts Combinations und auch noch etwas auf Deutsch: Unsere Google Font Empfehlungen für 2017 mit tollen neuen Fonts.

Conterest verwendet, jetzt wo ich diese Zeilen schreibe, den Google Font Lato Dosis für die Überschriften und Ek Mukta den Fließtext. Aber das mag sich auch wieder ändern. Ich bin da experimentierfreudig. Nur für den Fall, dass du fragen wolltest.

Hier ist meine persönliche Liste mit Lieblings Fontkombinationen. 11 Paarungen und zwar weitgehend Sans Serif, also ohne Füßchen. Geeignet für Beitragsbilder und vieles mehr. Nicht wenige dieser Fonts sind neu in der Googelschen Sammlung.

 Google Fonts Kombinationen

Die besten Designs zu finden ist angesichts der Menge der Möglichkeiten alles andere einfach, zudem braucht man einen Blick dafür. Weil das so ist, haben hilfreiche Zeitgenossen Werkzeuge entworfen, mit deren Hilfe man dem Problem beikommen kann. Die Links dazu zeige ich dir gleich …

google fonts haiku regentag

Oben: Ich hätte nie gedacht, dass ich einmal eines meiner Gedichte in einem Artikel würde unterbringen können. Aber da musst du jetzt durch. Diese Poesiegrafik verwendet gleich 3 Schriftarten. Hauptschrift ist Ubuntu.

Anfängerfrage – wo kann man das nutzen?
Einsetzen kann man Google Fonts überall da, wo man selbst Stylesheets einbauen kann/darf. Auch bei WordPress.com geht es, aber nur in der kostenpflichtigen Variante (nennt sich dann Custom Design). Selbst gehostete Blogs können Plugins verwenden und haben so nicht die geringsten Probleme, oft unterstützen gute Themes bereits die Verwendung von Google Fonts.

Anzeige:

Dies sind die beliebtesten Google Fonts

google-fonts-beliebteste

Praktische Tipps für den Einsatz von Google Fonts

1 | 
Gegensätze ziehen sich an, das gilt Erstrecht für Fonts. Erst durch Unterschiede entsteht die gewünschte Spannung. Kommt man auf die Idee, zwei einander ähnliche Schriften miteinander zu vermählen, geht die Sache meist schief. Das Ergebnis wirkt komisch, irgendwas scheint nicht zu stimmen, der Leser wird irritiert.

2 |
Die Schriften müssen zum Inhalt passen. Man kleidet sich dem Anlaß entsprechend. Logisch oder? Das stimmt auch, wenn man mit einem Pärchen hantiert. Allerdings hat man mehr Möglichkeiten, Widersprüche zu riskieren.

3 |
Man spricht nicht umsonst von Font Pairing oder Schriftpaarungen, denn mit noch mehr Schriften als zwei wird es schwierig. Drei oder weitere Fonts zu mischen, sollte man den Profis überlassen.

4 |
Du kannst du solche Paarungen auch in der Textverarbeitung oder in Präsentationen einsetzen. Nur mit dem eBook wird es schwierig, sofern man nicht auf Bilder zurückgreifen will. Der Font für einen Fließtext lässt sich zwar einbetten, aber ob die Reader sich daran halten? Letztlich gelten die Einstellungen des Nutzers und der kann die beste Absicht guten Designs schnell zunichtemachen.

Beispiele: empfohlene Kombinationen nach Font Customizer

  • Lobster + Droid Sans (more pairings)
  • Bitter + Source Sans Pro (more pairings)
  • Dancing Script & EB Garamond (more pairings)
  • Dosis + Open Sans (more pairings)
  • Fjalla One + Open Sans (more pairings)
  • Lato + Grand (more pairings)
  • Oswald + Droid (more pairings)

Und wenn dir das noch nicht genügt, dann habe ich noch 25 Beispiele. Variationen dieser Art eignen sich für Beitragsbilder, Visuals, Illustrationen, Präsentationen, Buchcover, eBook-Cover oder für Social Media. Nicht geeignet sind sie für Fließtext (den Textblock), dort gelten andere Regeln.

Die folgenden Muster sind keine Regeln, sondern sollen als Anregung für deine eigenen Experimente dienen. Aus den über 800 Schriftarten lässt sich einiges zaubern.

expletus-antic-slabdosis-droid-regularkelly-slab-lilita-oneyanone-kaffeesatz-ramblaplay-bold-quicksandsofia-ramabhadraek-mukta-raleway-dotsfredoka-cagliostroubuntu-rochesternote-this-breeiceland-cabinhomenaje-aclonica  Lobster-Dosisbitter-sofiafjalla-opensansjosefin-latosarpanch-robotobaumans-josefindroid-passion-onelancelot-dosiskhand-exo-2  lilita-one-ruthieasap-cagliostro  khand-philosopher

Weitere Ideen, diesmal in Farbe:

google-font-kombinationen

Links zum Thema Google Fonts

  • Google Webfonts Integration ohne Plugin – inklusive meiner Lieblingsfonts

Werkzeuge, mit denen du die besten Google Font Paarungen finden kannst

Die Sprache sämtlicher Tools ist das Englische. Wenn du etwas auf Deutsch kennst, ich würde mich freuen davon zu erfahren. Also, welche Schriftart Paare können wir benutzen? Welche Kombinationen sind die schönsten?

Colourful Webfonts Generator
Der Generatror von Martin Hahn verspricht 100 Webfonts Kombinationen x 100 Colour Schemes= 10.000 Kombinationen. Knopfdruck genügt, jedesmal lädt sich eine andere zufällige Kombi.

fontkombi

Hand-Picked Tales from Æsop’s Fables with Hand-Picked Type from Google Fonts
Eine am Beispiel uralter Fabeln schön aufgemachte Präsentation, die uns zeigt wie Google Fonts miteinander harmonisieren können.

google fonts pairs

Mixfont – A modern font generator
Dieser Generator greift unter anderem auf Google Fonts zurück. Gezeigt werden Paarungen in verschiedenen Umgebungen und Anwendungen. Außerdem gibt es eine Bestenliste.

Fontpair
Vergleiche ziehen, passende Schriften finden. Nicht mehr, nicht weniger.

fontpair

Type A
Dies ist eine Sammlung von Basisstyles zur besseren Lesbarkeit auf verschiedenen Geräten. Verwende diese für Blogs oder als Ausgangspunkt für jedes Projekt.

Font Pairs type-a

Beautiful Web Type
Eine Galerie mit dem Schönsten was das Google Font-Arsenal hergibt. Die Fonts werden nicht benannt, sind aber direkt verlinkt.

Font Pairs web-type-sample

Typecast
Google Fonts zum Ausprobieren. Mit Live-Ansicht und vielen Optionen.

font-testing

Typewolf Eine ständig aktualisierte Sammlung der besten kostenlosen Schriftarten.

typewolf-sample

Typ.io
Welche Schrift geht mit welcher anderen? Hier findest du über 1200 Beispiele aus dem Web-Leben.

typio

Web Font Blender
Ein weiteres interaktives Tool.

webfontblender

The Web Font Combinator
Hier wird live im Browser kombiniert.

fontcombinator

Typespiration
Eine schicke Galerie mit Beispielen. Hier kann man sich anregen lassen. Wer es braucht, kann den Quellcode gleich mitnehmen.

Fonts in Use
Na was? Font Kombinationen in freier Wildbahn beobachtet. Nicht auf Google Fonts bezogen. Als Anregung aber toll.

fontsinuse

Typegenius
Dieses Werkzeug ist anders. Das Tool kennt sowohl Google als auch Typekit Fonts, allerdings nur ein eher kleines Stück vom großen Kuchen. Typegenius taucht in seine Datenbank und liefert Ideen und Screenshots.

typegenius

Ein nützliches WordPress Plugin zum Fontvergleich

Großartige Arbeit verrichtet der Font Customizer. Mit diesem Plugin kann man sämtliche Google Web Fonts live testen. Das läuft komplett unter „Design“ > „Anpassen“ im Backend. Es stehen alle typografischen Möglichkeiten zur Verfügung, die diese Fonts bieten zuzüglich diverser CSS3 Effekte wie Schattenwurf. Allerdings ist das Arbeiten in dem schmalen Fenster ermüdend. Ein zusätzliches Plugin für den Einsatz der Fonts kann man sich sparen.

fontcustomizer
Font Customizer. Der orangenenfarbene Link kündigt keine  Premium Version des Plugins an, sondern ein komplettes Theme.

Lesenswerte Artikel über Google Schriftpaarungen und Typografie

  • A Beginner’s Guide to Pairing Fonts
  • 10 Great Google Font Combinations You Can Copy
  • 10 Useful Google Font Combinations for Your Next Site
  • 5 Google Font Combinations That You’ll Fall in Love With
  • Great Google Web Font Combinations Part 1 – Part 2
  • Let 2015 Be The Year Of Understanding Web Font Typography
  • Will Google Fonts Ever Be Shut Down?
  • 100 Days of Fonts – Typographische Beispiele, alle mit Google Fonts gemacht
  • Wie gewohnt kommt man bei Pinterest auf seine visuellen Kosten

Auch beim online Bildwerkzeug Canva hat man sich des Themas angenommen. Hier geht es zwar nicht direkt um Google Fonts, aber da ich dir Canva bereits vorgestellt habe, helfen diese beiden Artikel vielleicht weiter. The Ultimate Guide to Font Pairing Part 1 | Part 2

fontpairing

Übrigens …
Google zeigt an, wie oft die Fonts angeschaut wurden. Die Zahl, man kann ihr live beim Wachsen zusehen, ist schwindelerregend. Auf derselben Seite kannst du auch feststellen, welche Fonts am häufigsten Verwendung finden – mit großem Abstand sind es Open Sans und Roboto.

Anzeige:

Werkstattbericht 🔧

Im Beitragsbild oben verwende ich die folgenden Google Fonts: Proza Libre und Cormorant Garamond. Das Public Domain Foto stammt von Pixabay.

  • pinnen  543 
  • teilen  
  • twittern  2 
  • teilen 
  • info 

Hallo liebe Bloggerinnen und Blogger!

Sven Avatar

Ich bin Sven Lennartz. Ich bin Schriftsteller, Unternehmer und natürlich Blogger. Als erfolgreicher Gründer habe ich die Magazine für Webdesigner  Dr. Web und Smashing Magazine aufgebaut. Hier möchte ich etwas zurückgeben. Ich unterstütze dich bei allem, was mit dem Bloggen zu tun hat.

Meine Empfehlung für dein Wordpress Hosting

Mein Tipp: Raidboxes WP Hosting

Kommentare

  1. Andreas Kunz meint

    11. Juni 2015 um 18:33

    Danke! Ein sehr guter und hilfreicher Beitrag!

  2. Sven Lennartz meint

    12. Juni 2015 um 8:39

    Gerne, Andreas :-)

  3. Marius meint

    25. Januar 2016 um 15:35

    Ein sehr hilfreicher Beitrag und eine sehr gute Linkssammlung, vielen Dank für die Inspiration

  4. Sven Lennartz meint

    25. Januar 2016 um 17:46

    Danke dir, Marius :-)

  5. Andreas Renk meint

    12. Mai 2016 um 9:04

    Hallo,

    vorab erst einmal mein Kompliment zu diesem Artikel. Sehr hilfreich und gut geschrieben.

    Ich habe dazu gleich eine Frage mit der ich mich schon einige Zeit beschäftigen muss.
    Bei der Font Dosis scheint es einen Fehler zu geben. Bei Wörtern die die Buchstabenfolge „fi“ enthalten verschwindet der i-Punkt im „f“.

    Es ist hier auf der Seite schön an der Überschrift zu sehen. im Wort „findest“.

    Bei unserer Seite tritt dies sehr häufig auf, weil wir Sehr oft den Begriff „Konfigurator“ verwenden. http://www.confirado.de

    Würde mich interessieren, wenn es dazu eine Lösung gibt.

  6. Sven Lennartz meint

    12. Mai 2016 um 10:09

    Hallo Andreas,

    ich bin mir ziemlich sicher, dass es Absicht ist und so gehört. Das „f“ ragt so weit über das „i“, das kaum Platz für das Tüpfelchen bleibt oder das Ergebnis einfach nur unschön aussähe.

    Bleibt natürlich die Frage warum es gerade hier nicht der Fall ist. Es ist nachweislich der Font Dosis und er wird direkt und aktuell vom Google-Server geladen. Der Buchstabe „f“ ist verändert. Das sehe ich so aber nur im Firefox, nutze ich Chrome, ist es so wie bei euch ohne I-Punkt. Seltsam. Erklären kann ich es nicht. Persönlich finde ich die Version mit dem geschwungenen „f“ eleganter.

  7. Andreas Renk meint

    12. Mai 2016 um 15:35

    Sehr merkwürdig. Anfangs gab es dieses Verhalten auch nur im Safari…

    Auch das Verhalten mit der CSS Eigenschaft letter-spacing ist sehr merkwürdig. Wenn Du da mal die Pixelzahl höher drehst, erweitern sich alle Buchstabenabstände. Außer die Abstände zwischen dem „f“ und dem „i“

    Wenn ich was rausfinde, werde ich es hier berichten

  8. Sven Lennartz meint

    12. Mai 2016 um 15:45

    Ich denke hier sind wir im Bereich der Ligaturen. „fi“ ist da wohl ein sehr typischer Fall.

    https://de.wikipedia.org/wiki/Ligatur_%28Typografie%29

    Die Browser haben jeweils ihre eigenen Voreinstellungen. Mittels CSS3 sollte man das beeinflussen können.

  9. Persephone meint

    5. Juli 2016 um 6:22

    Nachdem ich verschiedene Blogbeiträge gelesen habe, in denen überall das gleiche oberflächliche Bla bla stand oder nur kostenpflichtige Fonts angeboten wurden, ist das hier mit Abstand der beste Beitrag. Ich bedanke mich auch, weil ich hier endlich das gefunden habe, wonach ich lange gesucht habe. DANKE!

    PS: Khand & Philosopher und Playfair & Open Sans sind die heutigen Favoriten (Logo), mal schauen, ob es dabei bleibt.

  10. Sven Lennartz meint

    5. Juli 2016 um 20:04

    Hallo Persephone,

    danke für deine freundlichen Worte :-) Khand setze ich auch gern ein in Beitragsbilder, es ist so schön kompakt.

  11. leo knoben meint

    22. Juli 2017 um 9:29

    keine Dikusion, eine große Bitte: verhelfen sie mir zu den schönen Schriften el Pago: „Rochester“ Ruthie und sacramento. Ich kann kein englisch, bin 88 und wäre trotzdem gerne geholfen Danke schön sagt leo knoben

  12. Sven Lennartz meint

    22. Juli 2017 um 21:04

    Hallo!

    als google fonts wären die hier:

    https://fonts.google.com/specimen/Rochester
    https://fonts.google.com/specimen/Ruthie
    https://fonts.google.com/specimen/Sacramento

    war das die frage? die fonts können dort auch heruntergeladen werden.

    PS: es gibt eine suchfunktion bei google fonts – oben rechts

Trackbacks/ Pingbacks

  1. Canva.com - Online-Grafiken im Handumdrehen - Dr. Web sagt:
    18. September 2015 um 13:54 Uhr

    […] Einsatz kommen Google Fonts, das ist praktisch, wenn man die schon kennt, und die Auswahl ist gut. Dr. Web verwendet die […]

  2. Canva: Create Online Graphics Easily | NOUPE sagt:
    14. Oktober 2015 um 15:49 Uhr

    […] uses Google Fonts, which is helpful for those who are familiar with them already, and because it offers a large […]

  3. Ein WordPress Theme entwickeln - Allaboutgaming sagt:
    30. Dezember 2015 um 15:09 Uhr

    […] (www.google.com/fonts). Anregungen für die passende Schriftart bei Google Fonts findest Du im  Artikel von Sven Lennartz auf conterest.de. Weitere Quellen für kostenlose Fonts wie beispielsweise 1001FreeFonts findest du mit der Google […]

  4. Wie ein Artikel bei Conterest entsteht - 1 Jahr Conterest sagt:
    10. November 2016 um 13:15 Uhr

    […] wechsele ich von Bild zu Bild. Dabei benutze ich nur das, was Windows mir mitgeliefert hat und die Google Fonts. Letzte bestehen inzwischen aus über 800 Font Familien. Man darf sich da frei bedienen und muss […]

  5. Weihnachtsferien – Dinchen bloggt sagt:
    28. Dezember 2017 um 18:59 Uhr

    […] und mit einigen Schriftarten experimentieren. Die Idee dazu hatte ich aus einem Artikel von Sven Lennartz […]

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Hallo Blogger!

Rubriken bei Conterest

  • Bloggen (102)
  • Blogger Income (18)
  • Blogstart (48)
  • Blogtraffic (24)
  • Pinterest (16)
  • Schreiben (26)
  • Schrift & Grafik (23)
  • Social Media (13)
  • Wordpress (26)

eBook Ideen fürs Blog

eBook: Ideen fürs Blog

Meine Empfehlung

Beliebte Blogartikel

  • Wieso Bloggen? 100 Gründe
  • Blog schreiben für Einsteiger
  • Blogger Kodex
  • 55 Blogger Erfahrungen
  • 23 Zitate von Bloggern
  • Bloggen verbindet …
  • Kleine Dinge im Blog
  • Blog Content
  • Blog Fotos

Mein Roman:

Neu bei Conterest

  • Wann und wo bloggen? Zeiten und Orte für Blogger
  • Blogminimalismus: Einfach nur Bloggen – und sonst gar nichts
  • Wie du mit diesem einem simplen Tipp erfolgreicher bloggst und schreibst
  • Die 59 schönsten Frühlingswörter – Wortliste
  • 9 Dinge, die ich als Blogger mache … obwohl ich nicht sollte

eBook Bloggen für Einsteiger

eBook: Bloggen für Einsteiger

 

conterest.de · Das Blog für Blogger von Sven Lennartz · ESTD 2015 · Clever Bloggen · Datenschutz · Impressum