Kommentare 53

Meine Top 10 Google Webfonts für Webdesign-Projekte in 2013

Meine Top 10 Google Webfonts fuer 2013 Als Webdesigner ist man immer auf der Suche nach geeigneten, schönen Free-Fonts für neue Webdesigns und dank kostenloser Schriften-Ressourcen wie den Google Webfonts werden die Möglichkeiten glücklicherweise auch immer vielseitiger. Die Zeiten in denen Georgia, Arial und Verdana im Web dominiert haben sind also endlich vorbei (nichts gegen diese Schriften, aber etwas mehr Vielseitigkeit ist doch wünschenswert). Als Inspirationsquelle für mehr typografische Vielfalt in deinen Webdesigns hier eine kleine Sammlung meiner derzeitigen Google Web-Font Favoriten.

1. Source Sans Pro (sans-serif)

Top 10 Google Webfonts 01

Source Sans Pro ist die erste Open-Source Schriftfamilie von Adobe. Die Schriftfamilie ist angenehm schlicht und modern und auf Grund der vielen Schriftschnitte (12 Schnitte von Light 200 bis Ultrabold 900) vielseitig einsetzbar. Source Sans Pro funktioniert prima als Fließtext-Schrift, funktioniert in Light oder Bold aber auch sehr gut als schlichte Überschrift.

2. Muli (sans-serif)

Top 10 Google Webfonts 02

Die minimalistische und rund wirkende Muli gibt es in vier Schnitten (Book 300 und Normal 400, auch jeweils als Italic). Muli kann als moderne, schicke Fließtext-Schrift eingesetzt werden, mir selbst gefällt sie aber besonders für Überschriften.

3. Gentium Basic (serif)

Top 10 Google Webfonts 03

Die Serifen-Schrift Gentium Basic in Normal und Bold (plus jeweils Italic) ist sehr angenehm lesbar und eignet sich daher vor allem, wenn man auf der Suche nach einer serifen Fließtext-Schrift ist. Die Schrift basiert auf der originalen Gentium-Schrift (von 2003) und ist ebenfalls vom Gentium-Schriftdesigner Victor Gaultney gestaltet. Die Gentium gibt es bei Google Webfonts auch noch als Gentium Book Basic.

4. Cabin (sans-serif)

Top 10 Google Webfonts 04

Cabin ist eine sehr gerade, moderne serifenlose Schrift mit 8 Schnitten in der Schriftfamilie (von Normal 400 bis Bold 700). Cabin kann als moderner, serifenloser Fließtext oder auch für Überschriften eingesetzt werden.

5. Julius Sans One (sans-serif, Headlines)

Top 10 Google Webfonts 05

Julius Sans One ist eine extravagante, schlanke Schrift für schicke, moderne Überschriften, Logos oder kurze Slogans geeignet von der Schrift-Foundry Latino Type. Es gibt nur einen Schriftschnitt (Normal 400). Wer nach etwas besonderem sucht, ist die Julius Sans One meiner Ansicht nach eine tolle Wahl.

6. Open Sans (sans-serif)

Top 10 Google Webfonts 06

Die Open Sans ist in den letzten Monaten immer mehr zu einer Standard-Schrift im Web geworden und wird u.a. auch auf der WordPress.com Seite und im aktuellen WordPress Standard-Themes Twenty Twelve genutzt. Open Sans Schriftfamilie beinhaltet 10 Schnitte von Book 300 bis Extra-Bold 800.

7. Raleway (sans-serif)

Top 10 Google Webfonts 07

Raleway ist eine weitere elegante und moderne serifenlose Schrift, die durch 9 Schnitte (Ultra-Light 100 bis Ultra-Bold 900) in der Schriftfamilie sehr vielseitig genutzt werden kann. Mir persönlich gefällt Raleway besonders gut in einem leichten Schnitt als Überschrift.

8. Dosis (sans-serif, Headlines)

Top 10 Google Webfonts 08

Dosis ist eine abgerundete, recht schmale serifenlose Schrift für moderne Überschriften oder Slogans. Es gibt sie in 7 Schriftschnitten (von Light 200 bis Extra-Bold 800). Da Dosis sehr schmal ist, würde ich die Schrift nicht unbedingt für Fließtexte einsetzen.

9. Fjalla One (Display sans-serif, Headlines)

Top 10 Google Webfonts 09

Wer eine fette, schmale Schrift für Überschriften sucht, könnte mit der Fjalla One glücklich werden. Es gibt zwar nur einen Schrift-Schnitt (Normal 400, wirkt eher fett) der Fjalla One, dieser ist meiner Ansicht nach aber eine interessante Alternative z.B. zur häufiger genutzten PT Sans Narrow.

10. Arvo (slab-serif, Headlines)

Top 10 Google Webfonts 10

Arvo ist eine Charakter-starke Slab-Serifenschrift, die in vier Schnitten genutzt werden kann (Normal 400 und Bold 700, plus die jeweiligen Italic-Styles). Durch die Slab-Serifen ist Arvo sehr gut im Web lesbar und eignet sich sehr gut für Überschriften oder Intro-Texte bzw. Text-Slogans.

Welches sind deine Free-Font Favoriten und welchen Font-Dienst nutzt du am liebsten?

Welches sind deine derzeitigen Lieblings-Freefonts für Webdesigns und welchen Dienst zur Einbindung von Schriften findest du am besten geeignet? Bevorzugst du kostenlose Schriften oder setzt du eher auf kostenpflichtige Dienste wie Typekit, um eine noch größere Auswahl an professionellen Schriften zur Verfügung zu haben? Über deine Meinung und deine Font-Tipps freue ich mich sehr!

53 Kommentare

  1. Lukas

    Danke für die Zusammenstallung.
    Mein persönlicher Favorit ist seit einigen Wochen Open Sans! Benutze ich immer wieder und sehr gerne, könnte mMn auf Dauer zu einer “Standardschrift” wie Arial, etc. werden.

  2. Sebastian

    Sehr schöne Zusammenstellung, Ellen!

    Die meisten von dir genannten Schriften habe ich noch nie genutzt.

    Derzeit nutze ich gerne: Droid Serif, Open Sans, Oswald und ja, Arial.

    In Sachen Schriftarten “experimentiere” ich eigentlich recht wenig. Aber für ein Jahr mag ich mich nicht festlegen. Vielleicht kommt nächste Woche schon eine Schriftart, die mich wegbläst. ;-)

  3. Viel Inspiration, vielen Dank für’s cherrypicking. Source Sans und Fjalla gefallen mir besonders. OpenSans, Droid und Ubuntu setze ich oft und gerne ein, hatte aber bei Open Sans merkwürdigerweise in letzter Zeit das Problem, das aus kleinem i in bold ein großes I wurde.

  4. Danke für diesen Beitrag! :)

    Als Dienst kommt bei mir eigentlich hauptsächlich Google Fonts zum Einsatz. Die Fonts die ich grundsätzlich nutze, sind Open Sans und Oswald. Sind wohl sehr beliebte Schriftarten, wie man den Kommentaren entnehmen kann. :)

    Danke nochmal! :)

  5. Droid Sans und Delicious. In speziellen Fällen “Ubahn”. Zwar sind die letzten beiden free to use, aber nicht als Webfont verfügbar. Bei Fontsquirrel kann man diese aber problemlos in einen Webfont umwandeln lassen.

    • Hallo Chris,

      hoffe du ließt meine Antwort hier zu deinem Kommentar, falls nicht, ich freue mich auch auf Rückmeldung von allen anderen :-)

      Ich bin auch auf die “Delicious” gestoßen -> http://www.exljbris.com/delicious.html

      Kann ich diese denn ohne Bedenken in meinen Webprojekten verwenden, falls ja, hast du sie selbst in einen Webfont umgewandelt oder hast du ggfs. eine Quelle?

      Besten Gruß, Jens.

      @Ellen: Vielen Dank für die Zusammenstellung, hab mir hier schon das ein oder andere Mal Inspiration geholt…

  6. Rickie

    Hallo, hab leider keine passende Rubrik gefunden. Kann mir jemand einen Tipp für ein Theme geben, wo ich nur BEwertungen habe? Sprich Startseite und dann dadrunter vlt. nur Bewertungen oder bestimmte Kategorien / Orte anlegen und dadrunter können Nutzer bewerten. Vlt. kennt jemand ein solches Theme.

    VG
    Rick

  7. Verschieden Schriften habe ich getestet und nun bei Source Sans Pro hängengeblieben. Ich bin sehr zufrieden damit. Wie du selbst ansprichst, war die Anzahl der Schriftschnitte ein gewichtiges Argument.
    Vielen Dank für Deine Tipps. Die werde ich bestimmt des öfteren noch einmal anschauen.
    LG Timm

  8. Michael

    Any tips on how to integrate one of these fonts to one of your existing themes? There seem to be many different methods, curious which method you advice to employ for your themes.

    Thanks!

  9. Daniel

    Die Open Sans wird mittlerweile ein wenig inflationär benutzt. Die Source Sans, Ubuntu, Droid Sans, Cabin, Gandhi nutze ich derzeit oft. In meinem letzte Projekt musste ich leider wegen https auf Google Webfonts verzichten, da gab es immer wieder Probleme und habe mich dann für die Gandhi Sans (da das Source Sans Fontface-kit irgendwie Schwierigkeiten mit den Umlauten machte – warum auch immer) entschieden.

  10. Ich mag’s dann doch etwas unkonventionell: Architects Daughter, Rocksalt und Permanent Marker, sind die Fonts, die ich auf meinem Blog einsetze – allerdings nur als Akzentschriftart bei Überschriften. Ansonsten ist wegen der besseren Lesbarkeit eine stinknormale serifenlose Standard Webkompatible Schrift wie Arial, Verdana o.ä. im Einsatz.

  11. Hallo Ellen!
    Danke für diesen tollen Artikel!
    Ich konnte mich aufgrund der unüberschaubaren Menge an Schriftarten kaum Entscheiden. Mithilfe deines Artikel´s habe ich mich nun für Open Sans entschieden.
    Liebe Grüße Culli

  12. Pingback: Top 10 Google Webfonts | pencode

  13. Hallo Ellen,
    ich habe mich auf meiner Website für die “Federo” von den Google Fonts als Auszeichnungsschrift entschieden. Ich hätte auch für die Grundschrift gern einen anderen Font genommen. Jedoch habe ich Angst, dass die Ladegeschwindigkeit darunter lädt. Zeitweise habe ich das Gefühl, wenn ich meine Seite auf dem Handy aufrufe, dass schon diese einzige Schrift beim Laden hängt.
    Gruß, Andreas

  14. Rick

    Hallöchen,

    hey, vielen Dank für die Zusammenfassung. Wie viele andere hier, nutze ich derzeit sehr gerne die Schriftart Open-Sans. Von den vorgestellten Schriftarten gefällt mir Muli, vorallem für Überschriften, sehr gut.

    Mit freundlichen Grüßen,
    lotti

  15. Waldemar

    Hallo,

    Oh, mich hat es sehr gefreut. Nachdem ich neulich auf dein schönes Ari-Theme, das du verschenkst, gekommen bin, und mich etwas in Typografie beschäftigt habe, will ich (als Anfänger) in Ari die Kombination Droid Sans für Fließtext, Raleway für Überschriften und Lobster (als Bild) für das Logo verwenden.
    Hast du vielleicht einen Tipp, wie ich möglichst fix und ohne viel im CSS zu pfuschen es schaffe:
    – Alle Droid Serif durch Raleway zu ersetzen (eben diese dünnere Schrift für Überschriften: die sieht einfach fancy aus)

    Mit freundlichem Gruß,
    Waldemar

  16. Super Aufstellung!! Ich habe selbst jetzt die Source Sans Pro im Einsatz (seit 2 Tagen) und bin echt mega zufrieden! Das ganze als italic und bold wirkt in einem eher technischen Slider sehr sehr cool!

  17. salut!
    ich als skeptischer HTMLer der alten schule habe da mal eine frage. was passiert eigentlich wenn die google-typo mal nicht verfügbar ist mit der seite, sei es wegen einem ausfall, geänderterter nutzungsbedingungen von google oder geänderter rechte der typo. bin bis jetzt noch kein großer fan von. weil ich ja genau die unabhängigkeit mag mit einer eigenen homepage. sonst kann ich ja auch in netzwerke abkehren. dazu gehört es eigene bilder und schriften zu benutzen.

    also wie ist das definiert im falle von google-schriften, wird auf eine standartschrift zurück gegriffen? welche ist das?

  18. Timo

    Bei der mittlerweile recht großen Anzahl an Webfonts ist es schwierig geworden die perfekte Schriftart zu finden. Und was heißt schon perfekt, wenn die Darstellung auf unterschiedlichen Betriebssystemen und Browsern nicht konstant ist.
    Wenn Verdana und Tahoma nicht so schreckliche Fett-Schriftschnitte präsentieren würden, wären sie ideale Webschriften ohne viel Schnickschnack! Aus diesem Grund sind Open-Sans und Droid-Sans so beliebt geworden.
    Aber Vorsicht! Die schöne Welt der mit viel Mühe ausgesuchten Schriftart und gut gestylten Webseite endet oft an der Firewall eines Firmen-Netzwerkes oder an einer älteren Browser-Version! Oft wird dann die Präsentation der neuen Webseite im Büro des Auftraggebers eine peinliche Angelegenheit.
    Viele Firmen-Firewalls reagieren empfindlich auf Google-Webfonts. Mit Typkit habe ich bessere Erfahrungen gemacht.
    Wichtig ist deshalb der Test der Webseite mit einer Fallback-Schriftart, wie z.B. Arial und Helvetica.
    Somit ist man gut auf den Ausfall der Webfonts vorbereitet.
    Ich selber nutze sehr gerne die Open Sans als Verdana-Ersatz und die Droid-Sans, wenn der Text komprimierter dargestellt werden soll. Diese Schriften gehören den wenigen qualitativ hochwertigen Fonts, welche in allen Schriftgrößen eine gute Figur machen.
    Also: Schauen und ausprobieren und – testen, testen, testen…

  19. Ich woltt’ mich bedanken für die Inspiration. Für Fließtext und Überschrift hab ich mich tatsächlich für Source Sans Pro und bei Zitaten für Gentium Basic entschieden. Ich hatte vorher eine gekaufte Schriftart (Visitor TT2 BRK), die sehr gut zum Thema Computer- und Videospiele passte, für Überschriften und Navigation verwendet, zu der ich einen Webfont erstellt hab. Letztlich ist diese Schrift jetzt nur noch im Logo enthalten, weil sich durch die neue Wahl das Schriftbild aber auch wieder informativer zeigt.

  20. Detro

    Hallo,
    danke für die schöne Zusammenstellung. Ich selbst werde mit dem Template baylys versuchen mein neues Projekt umzusetzen. Mal sehen, welche Schriften am besten passen.
    Schöne Grüße

    PS. In der Überschrift ist das “in” nicht nötig ;)

  21. Mein Favorite ist Dosis, diese verwende ich auf meiner Webseite für Überschriften. Für Fließtexte bleibe ich bisher bei Helvetica und Arial – das lässt sich gut lesen, sieht gut aus und verlängert die Ladezeit meiner Seite nicht.

    Für das Testen/Vorschauen der Google Fonts in der eigenen Webseite habe ich folgende Seite erstellt: http://webtypetest.com. Nach Angabe der eigenen Webadresse lassen sich Textelemente in andern Schriftarten darstellen.

  22. Deinen Top 10 kann ich mich im großen und ganzen anschliessen. Ich bleibe irgendwie immer an Open Sans hängen, wobei mir das die H1, H2, H3 usw. nicht so gut gefallen.

    Gibt es eigentlich eine Möglichkeit, H1-H3 zum Beispiel gegen Source Sans Pro auszutauschen und die Standardschrift bei Open Sans zu belassen?

    Lieber Gruss Daniel

  23. Elke

    Hallo Ellen,
    das ist ja eine tolle Zusammenstellung. Allerdings dachte ich bisher immer, dass es nicht viel nützt eine tolle Schrift zu benutzen, wenn andere diese Schrift nicht installiert haben. Sie erhalten dann beim Angucken nur eine Ersatzschrift. Hat sich das geändert? Würde mich freuen über eine Antwort. Danke und Grüße!

    • Noah

      Hallo Elke,

      es gibt bereits sogenannte “Webfonts”. Google bietet zum beispiel diesen Dienst an unter http://www.google.com/fonts. Wenn man eine Webfont benützen will muss man im -Bereich der Website ein -Element mit dem Link zu der Schrift setzen. Bei Google wird alles Schritt für Schritt erklärt. Dann muss man noch im Stylesheet die Schrift mit @font-face zur Website hinzufügen und fertig ist das ganze und jeder kann die Website mit dieser Schriftart betrachten da die Schrift beim Aufruf der Seite von Google mitgeladne wird.

      Liebe Grüße, Noah

  24. Andreas Einbock

    Danke für diese tolle Übersicht. Kannst du eine Kombination von zwei dieser vorgestellten Schriftarten empfehlen? Vom Bauchgefühl würde ich gern die Gentium Basic und die Cabin kombinieren. Spricht da etwas Typografisches dagegen?

Schreibe eine Antwort