Google Fonts ist der bekannteste und grösste Anbieter von Webfonts. Die Vorteile von Google Fonts sind schnell aufgezählt: Über 1000 Schriftarten, intuitive Suchfunktionen, einfach auf der Website einzubinden und das alles auch noch kostenlos.
Die ideale Schrift oder eine passende Kombination von Schriften zu finden, kann dennoch zur Herausforderung werden. Dieser Beitrag zeigt, wie Sie fündig werden und wie Sie Google Fonts dafür nutzen können.
Schriften im Web: gestern und heute
Es ist noch gar nicht so lange her, da mussten die Website-Leser/innen eine Schrift auch auf dem eigenen Gerät installiert haben, damit diese auf einer Website auch entsprechend angezeigt werden konnte. Heute gibt es eine sehr vielfältige Auswahl an websicheren Schriften, sodass der Fokus auf das «Look and Feel» einer Schrift gelegt und eine Website typografisch ansprechend gestaltet werden kann. Anhand der Schriften kann einer Website nun ein eigener Charakter gegeben werden.
Schriften besitzt einen Charakter und wecken Emotionen
Um sich nicht durch die gesamte Google Fonts Sammlung durchklicken zu müssen, macht es Sinn, sich Gedanken darüber zu machen, was die Ziele der Website sind. Denn wie die Farben können auch Schriften Gefühle hervorrufen und im Unterbewusstsein den Betrachter lenken oder eine bestimmte Stimmung vermitteln. Gewisse Schriften wirken elegant, andere modern, langweilig oder vernünftig…
Die gewählte Schrift soll also einerseits den Charakter des Unternehmens widerspiegeln und gleichzeitig die Zielgruppe ansprechen. Da wären wir einmal mehr bei der Zielgruppendefinition.
Unabhängig von der Zielgruppe lässt sich sagen, dass alle Leser/innen etwas verbindet: Sie entscheiden auf den ersten Blick, ob sie einen Text lesen oder ihn vornherein links liegen lassen. Letzteres kann passieren, wenn ein Textabschnitt oder die Zeilen zu lang sind, diese zu eng beieinander stehen oder eine schlecht lesbare Schrift gewählt wurde.
Schriften für den Fliesstext
Der Fliesstext – auch Lauftext genannt – ist ein Text, der in einem Stück fortlaufend gesetzt ist und keine Unterbrechungen durch Titel oder Bilder hat. Dem Leser kommt also eine Flut an Buchstaben entgegen. Deshalb ist es enorm wichtig, dass mit der Wahl der Schrift im Fliesstextes nicht experimentiert wird, sondern auf solide Schriften zurück gegriffen wird mit einer guten Lesbarkeit.
Doch nicht nur die Wahl der Schrift ist für einen Fliesstext wichtig – auch die Schriftgrösse spielt eine Rolle. Machen Sie den Text nicht zu klein, sodass gewährleistet ist, dass das Auge vom vielen Text nicht zu stark belastet wird.
Von Bedeutung ist auch die Zeilenlänge und der Zeilenabstand. Um eine gute Lesbarkeit zu gewährleisten, sollte eine Zeile nicht zu kurz und nicht zu lang sein. Denn zu lange Zeilen wirken abschreckend und beeinträchtigen den Lesefluss. Zu kurze Zeilen hingegen führen zu häufigen Zeilenumbrüchen und unschönen Worttrennungen. Der Zeilenabstand sollte nicht zu eng und nicht zu gross gesetzt werden. Als Faustregel kann gesagt werden, dass der Zeilenabstand grösser als der Wortabstand sein sollte.
Ein Fliesstext dient meist der reinen Informationsvermittlung. Eine mit Bedacht gewählte Schrift, kann die Aussage des Textes aber auch visuell unterstützen.
Finden Sie also mit Google Fonts die richtige Schrift, um Ihrem Webdesign einen persönlichen Charakter zu verpassen und Ihren Inhalt subtil zu unterstreichen.
Google Fonts: den Schrifttyp (Kategorie) wählen
Der Umfang der von Google zur Verfügung gestellten Schriftarten ist riesig und vielfältig. Dank der Filter- und Sortiermöglichkeit wird die Suche vereinfacht. Die Kategorieauswahl betrifft den Schrifttyp – und damit kann man schon eine grosse Auswahl raus filtern. Natürlich erst, wenn man weiss, nach was man auf der Suche ist. Für den Fliesstext kommen sowohl Schriften mit Serifen und solche ohne Serifen in Frage. Der Entscheid basiert nicht zuletzt auf dem Kontext, in dem die Schrift zur Anwendung kommt.
Die Schriften in Headlines dürfen je nach Kontext persönlich wirken, weshalb die Kategorie «Handwriting» interessant wird. Zwei weitere zur Auswahl stehende Kriterien sind «Display» und «Monospace».
Der Sammelbegriff «Display Font» führt eventuell etwas in die Irre – denn dies bedeutet nicht, dass es Schriften sind, die speziell für Bildschirme gemacht wurden. Viel mehr kommen Display-Schriften bei Headlines oder Auszeichnungen zum Einsatz – nämlich dann, wenn man etwas aufzeigen will («to display»).
«Monospace» sind nichtproportionale Schriftarten – also Schriften, bei denen jeder Buchstabe eine feste, gleiche Breite hat. Bei allen anderen Schriften nehmen die Zeichen die Breite ein, die sie optisch benötigen. Monospace-Schriften eignen sich zum Beispiel gut für Tabelleninhalte. In einem Fliesstext hingegen sind sie weniger leserfreundlich, da die optische Anpassung der einzelnen Buchstaben nicht gegeben ist.
Der Nutzen der Sortierung in Google Fonts
Sortieren lassen sich die Schriften in Google Fonts nach Alphabet, Erscheinungsdatum, Name, Trend oder Popularität. Per Default wird nach Popularität sortiert. Das heisst die Schriften, die am meisten Downloads verzeichnen, werden als erstes Aufgeführt. Ein sicherlich wichtiger Aspekt, denn je mehr Downloads, desto grösser ist die Wahrscheinlichkeit, dass eine Schrift für gut empfunden wird, die Lesbarkeit gegeben ist und eine grosse Auswahl an Schriftschnitten besteht.
Verschiedene Schriftschnitte (also zum Beispiel Light, Normal, Fett oder Kursiv) innerhalb eines Fonts sind wichtig. Denn mit verschiedenen Schriftschnitten lassen sich Textauszeichnungen oder Zitate hervorheben. Je mehr Schriftschnitte eine Schrift hat, umso vielfältiger kann diese eingesetzt werden. Wird also die Hauptschrift beziehungsweise eine Schrift für den Fliesstext gesucht, sollte man eine Schrift wählen, die mehrere Schriftschnitte zur Auswahl hat.
Font properties in Google Fonts: Proportionen verleihen Charakter
Dieses Kriterium kann man unter dem Punkt «Font properties» auswählen. Ebenfalls da lässt sich eine Auswahl zu der Strichstärke (Thickness) treffen. Sucht man eine dicke, fette Schrift oder will man die Buchstaben in einer filigranen Strichstärke haben, kann man da den Filter ansetzen.
Mit dem Punkt «Slant» lässt sich definieren, ob die Buchstaben gerade oder schräg sein sollen. Wenn der Filter nach rechts gezogen wird, werden einem kursive Schriftschnitte angezeigt.
Die Buchstabenweite lässt sich mit «Width» einstellen – es lässt sich also bestimmen, ob die Buchstaben eher schmal oder weit laufen sollen. Zieht man da den Regler nach links, zeigt es einem «Condensed» Schriften an – also Schriften, die im Vergleich zu einem Normalschnitt schmaler laufen.
Wie die unterschiedlichen Schriften aussehen, kann man unter «Sentence» einstellen. Entweder man kann sich das ganze Alphabet einer Schrift anschauen, einen vorgegeben Satz, einen ganzen Abschnitt oder die Zahlen – die hilfreichste Auswahl ist «Custom». Hier kann man selber etwas reinschreiben und man sieht direkt, wie es mit den einzelnen Schriften aussieht. Die Schriftgrösse lässt sich über einen Regler von 8 px bis 300 px anzeigen.
Die Kür der Schriftwahl: die Kombination von zwei Schriften
Klickt man auf die ausgewählte Schriftart, kommt man auf die Unterseite. Hier erhält man weitere Informationen zu den Schriften mit den dazugehörigen Schriftschnitten und den Schriftzeichen, den «Glyphen». Auch hier ist wichtig, dass die wichtigsten Zeichen in einer Schrift vorhanden sind. Wie zum Beispiel das «@»-Zeichen, alle Satzzeichen und auch die Nummern. Ausserdem erhält man weitere Informationen zu der Schrift, dem Designer und der Lizenz.
Ein zusätzlicher Punkt versteckt sich beinahe am Ende der Seite. Nämlich der Punkt «Pairings». Hier werden mit der gewählten Schrift beliebte Paarungen aufgezeigt. Dies kann ein hilfreiches Mittel sein, Kombinationen von zwei Schriften auszuwählen. Zwei Schriften werden kombiniert, um durch die Schriftunterschiede eine Spannung aufzubauen. Wichtig ist, dass sich die zwei Schriften nicht zu ähnlich sind und klar unterschieden werden können. Man spricht nicht umsonst von Schriftpaarungen, denn mehr als zwei verschiedene Schriften einzusetzen ist ein nicht ganz einfaches Unterfangen. Am besten wählt man eine gut lesbare, klassische Schrift für den Fliesstext und ist dafür bei Headlines, Leads oder Zitaten experimentierfreudiger – die sollen dem Betrachter ja schliesslich ins Auge fallen.
Fazit: Google Fonts ist ein Gewinn für Webdesigner
Google Fonts bietet einen einfachen Zugang in die Welt der Webfonts und vereinfacht die Suche nach einer passenden Schrift für die eigene Website.
Wählen Sie für einen längeren Text eine bewährte Schrift, die eine gute Lesbarkeit aufweist. Suchen Sie sich für Überschriften und Zitate eine Schrift, die Charaktereigenschaften aufweist, die sie auch vermitteln wollen.
Am besten besuchen Sie die Seite mal und tauchen in die grosse Vielfalt der Webfonts ein.