Welche Schrift du für deine Website wählst, hat einen Einfluss darauf wie sie wahrgenommen wird.
Die Schrift, die du auswählst, sollte also zum Gesamtkonzept deiner Website passen.
Google bietet eine Unmenge an Schriften völlig kostenlos an! Eigentlich unglaublich und dazu lassen sie sich erst noch problemlos in die Website einbinden. Besonders wenn deine Webpräsenz mit WordPress erstellt ist. Denn WordPress bietet verschiedene Plugins für das Einbinden von Google Fonts. Und je nach Theme kannst du es auch direkt darüber machen.
Begriffe rund um Google Fonts und Schriften
Serif:
Serifenschriften werden überwiegend für Zeitungen und Zeitschriften eingesetzt. Sie haben unten am Buchstaben kleine waagrechte Striche. Dadurch wird der Lesefluss verbessert.
Für den Fliesstext einer Website sind sie nur bedingt geeignet.
Sans Serif:
Bei den Sans Serif Schriften fehlen die kleinen waagrechten Striche am Buchstaben. Diese Schriften werden sehr oft für den Fliesstext auf einer Website eingesetzt.
Display:
Sehr plakative Schriften die, wie der Name schon sagt, sehr oft für Werbung und Reklame eingesetzt wird.
Handwriting:
Da sagt der Name alles. Es sind Schriften, die der Handschrift nachempfunden sind. Sehr dekorativ und können punktuell eingesetzt attraktiv wirken.
Monospace:
Hier beansprucht jeder Buchstabe den gleichen Platz. D.h. ein i “verbraucht” gleichviel Platz wie ein o. Das macht das Schriftbild sehr unruhig und wirkt irritierend.
Seit die DSGVO vor bald 2 Jahren in Kraft getreten ist, empfiehlt es sich, die Schriften lokal einzubinden. Aber darum soll es hier nicht gehen, sondern darum, wie du schnell und effizient eine Schrift bei Google Fonts findest.
Tipps rund um Schriften und ihre Wirkung findest du in diesem Blogartikel: Wie du einfach die passende Schrift für deine Website findest.
Auf den ersten Blick siehst du, dass es fast tausend Schriften gibt. Deshalb ist es wichtig, dass du strukturiert vorgehst, um "deine" Schrift zu finden.
Jetzt zeige ich dir kurz was sich hinter den einzelnen Punkten verbirgt:
- Wenn du schon weisst wie die Schrift heisst, kannst du hier gezielt danach suchen.
- Beim Klick auf den Pfeil öffnet sich ein kleines Fenster (eine Dropdown) und du kannst angeben was du in das Feld daneben eingeben möchtest. Custom hat sich bewährt. Im nächsten Bild siehst du es im Detail.
- Mit dem Regler kannst du die Grösse der Schrift festlegen. Es lohnt sich bei den Schriften, die in die engere Wahl kommen, mehrere Grössen zu testen.
- Hier kannst du die Hintergrundfarbe der Seite verändern. Du kannst zwischen schwarz und weiss wählen.
- Wenn du die Schriften statt nebeneinander in Blöcken, lieber untereinander angezeigt haben möchtest, dann kannst du hier klicken.
- Mit dem Pfeil kannst du alle Einstellungen die gemacht hast wieder rückgängig machen (Reset).
Details zu Punkt 2 im Bild hier unten:
Jetzt geht's richtig los. In einem ersten Schritt gebe ich immer einen Satz ein, der zu der Website passt. So dass möglichst viele Buchstaben und alle Zahlen zu sehen sind. Der Satz muss keinen Sinn machen. Es geht nur darum, dass du siehst wie die Schrift wirkt.
Danach hake ich alle Schriftypen ab, die ich nicht benötige. Das reduziert die Anzahl der Schriften drastisch.
Meistens kannst du die Schriften Display und Monospace gleich abhaken.
Wenn du nicht nach einer speziellen Akzentschrift suchst auch Handwriting.
Und schon musst du nur noch zwischen Serif und Sans Serif entscheiden.
Wenn du hier Latin eingibst, bekommst du nur Sprachen die auch die Umlaute kennen.
Latin extended enthält noch weitere Schriftzeichen für osteuropäische Sprachen.
Auch damit kannst du die Anzahl der angezeigten Schriften nochmals etwas reduzieren.
Bei den Font Properties kannst du ebenfalls nochmals verschiedene Einstellungen vornehmen.
1. Du kannst sagen ab wievielen Schriftschnitten, d.h kursiv, dick, dünn etc. du eine Schrift angezeigt haben willst. Ich empfehle dir immer mind. 4 Schriftschnitte auszuwählen, denn es gibt dir mehr Möglichkeiten mit der gleichen Schrift zu spielen.
An den Punkten 2-4 verändere ich nie etwas.
Das kann dann so aussehen:
Wenn dir eine Schrift gefällt kannst du sie dir merken indem du aufs Plus klickst. Sobald das geschehen ist siehst du unten rechts einen schwarzen Balken und das Plus verwandelt sich in ein Minus.
Wenn du dir die Details, die Schriftschnitte und die Buchstaben im Detail ansehen willst klickst du in der Box auf "SEE SPCIMEN".
Wenn du die Schrift nicht siehst, einfach mit der Maus in diese Ecke fahren. Dann taucht sie auf.
Dann siehst du auf einer Seite alles zu dieser Schrift:
- Wie sie in allen Schriftschnitten aussieht.
- Welche Buchstaben, Ziffern und Zeichen es gibt.
- Wie sie mit einer anderen Schrift als Überschrift oder als Fliesstext wirkt. Mit den kleinen Pfeilen kannst du wechseln.
Wenn du die passende Schrift gefunden hast, kannst du unten auf den schwarzen Balken rechts klicken. Da siehst du die Schrift oder die Schriften die du ausgewählt hast.
Mit einem Klick auf das Minus kannst du die Schriften wieder abwählen. Sie verschwinden dann aus dieser Ansicht.
Wenn du die Schrift hast, die du benötigst, kannst du noch anhaken, welche Schriftschnitte du genau herunterladen willst. Meistens macht es Sinn, die Regular in normal und kursiv sowie mindestens einen fetten Schriftschnitt auszuwählen.
Jetzt kannst du sie mit dem Pfeil, rechts oben in der Box, auf deinen PC herunterladen. Die Dateien kommen als zip-Datei. Das bedeutet du musst sie noch "auspacken". Dazu klickst du mit der rechten Maustaste auf den Ordner mit der Schrift und suchst dir den Befehl "Extrahieren". Nun wird ein neuer Ordner mit deinen Schriften angelegt.
Unten in dem Kasten siehst du auch die genauen Angaben für's CSS. Aber die brauchst du im Normalfall nicht.
Herzliche Gratulation! Jetzt sind deine Schriften bereit zum Einbinden auf deiner Website.
Google Fonts bietet 996 kostenlose Schriften für deine Website! Da kannst du endlos Zeit vertrödeln. Wenn du lieber effizient die passende Schrift finden willst, dann sieh dir meine Schritt für Schritt Anleitung an.