Als ich vor bald 20 Jahren meine Ausbildung an der Webmaster-Akademie gemacht habe, gab es noch nicht viel Auswahl bei den Schriften. Entweder eine Firma hatte eine eigene Schrift oder man musste auf die „websicheren“ Schriften ausweichen.
Websichere Schriften sind solche, die auf (fast) jedem PC vorhanden sind. Das heisst sie müssen nicht von einem Server geladen werden.
Damals machten wir uns aus naheliegenden Gründen keine grossen Gedanken, welche Schrift wir verwenden. Meistens kam die Verdana zum Einsatz, die gut lesbar war.
Natürlich gab es auch damals schon Schriften, die man kaufen (lizensieren) konnte, aber meist war das zu teuer und aufwendig.
Als Google uns dann all die schönen kostenlosen Fonts geschenkt hat, wurde endlich alles anders. Die Schriften fanden auf Websites die Beachtung, die sie verdienen.
Wieso die Wahl der richtigen Schrift so wichtig ist, siehst du gleich selbst.
Der Charakter einer Schrift
Du liest richtig. Auch eine Schrift hat einen Charakter.
Ich habe dir verschiedene Beispiele gemacht. Bitte sieh dir die Schriften an und fühle in dich hinein. Was löst die jeweilige Schrift bei dir aus?
Siehst und vor allem spürst du die Unterschiede?
Das Wichtigste rund um Schriften für deine Website
Damit du die passende Schrift für deine Website findest, die zu deinen Wunschkunden passt, brauchst du ein Basiswissen.
Keine Angst, das ist nicht viel und danach kannst du bei allem rund um Schriften mitreden.
1. Serifen / Sans Serif
Serife Schrift
Wie du auf dem Bild siehst, gibt es bei den Serifen immer so kleine waagrechte Striche an den Buchstaben. Diese Schriften werden vor allem in Zeitungen und Zeitschriften eingesetzt, da diese kleinen Striche dem Auge beim Lesen helfen in der Zeile zu bleiben.
Eine sehr bekannte Schriftart mit Serifen ist die «Times New Roman».
Serife Schrift sollte auf der Website nie zu klein dargestellt werden. Sonst können die Serifen ihre Aufgabe nicht mehr erfüllen und machen die Schrift schwer lesbar.
Aus diesem Grund empfiehlt es sich diese Schriften als Überschriften zu nutzen.
Sans Serife Schrift
Der Name sagt eigentlich schon alles. Diese Schriften haben keine kleinen waagrechten Striche. Als sie erfunden wurden, waren sie neu und für viele war der Anblick grotesk. Deshalb wird sie manchmal auch heute noch als «Grotesk-Schrift» bezeichnet.
Arial, die du sicher kennst, ist eine Vertreterin für serifenlose Schriften.
Sie gelten als modern und sind ideal für den PC, da sie auch in kleinen Schriftgrössen gut lesbar sind.
Deshalb werden sie meistens für den Fliesstext genutzt und oft auch für Überschriften.
2. Schriftfamilie
Eine Schriftfamilie besteht aus dünnen, dicken und kursiven Varianten derselben Schrift.
3. Schriftschnitt
Die verschiedenen Varianten einer Schriftfamilie werden Schriftschnitte genannt.
4. Schriftstärke
Wie „dick“ sind die Linien eines Buchstabens oder einer Zahl? Ist die Strichstärke gleichmässig oder unterschiedlich?
5. Laufweite
Wie „dick“ sind die Linien eines Buchstabens oder einer Zahl? Ist die Strichstärke gleichmässig oder unterschiedlich?
6. Mittellänge
Nicht bei allen Buchstaben ist die waagerechte Linie in der Mitte. Manchmal ist die Mittellänge, wie sie genannt wird, auch sehr tief oder hoch angesetzt.
7. Zeilenhöhe
Nicht bei allen Buchstaben ist die waagerechte Linie in der Mitte. Manchmal ist die Mittellänge, wie sie genannt wird, auch sehr tief oder hoch angesetzt.
Die Lesbarkeit der Schrift auf verschiedenen Bildschirmgrössen
Das A und O bei der Wahl der Schrift ist die Lesbarkeit. Diese wird von verschiedenen Faktoren geprägt.
- Grösse der Schrift – Je nach Schriftart ist sie nur gross gut lesbar.
- Kontrast der Schrift zum Hintergrund.
- Abstände zwischen den Buchstaben (Laufweite) und den Wörtern.
- Abstände zwischen den Zeilen (Zeilenhöhe).
Verschiedene Schriftfamilien auf einer Website
Es gibt unzählige schöne Schriften. Ich darf zum Glück viele einsetzen. Aber immer auf verschiedenen Websites.
Im Prinzip reicht eine Schrift aus, um eine Website zu gestalten. Wenn sie genügend Schriftschnitte hat, kann das attraktiv wirken. Sehr harmonisch und doch mit genügend Spannung.
Häufig kommen zwei Schriften zum Einsatz. Eine für den Fliesstext und eine für die Überschriften.
Manchmal wird für besondere Elemente noch eine dritte Schrift eingesetzt. Das ist meistens eine Handschrift, die sehr auffällig ist. Diese darf jedoch nur sehr sparsam eingesetzt werden.
Als Faustregel gilt: Nicht mehr als zwei Schriften auswählen.
Die Auswahl der Schriften für deine Website
Du weisst jetzt, dass Schriften mehr sind als aneinandergereihte Buchstaben. Sie wirken auf unser Unterbewusstsein.
Schriften sind ein wenig wie Kleider für deine Worte.
Stell dir vor, du kommst in ausgebeulten Jogginghosen zu einem eleganten Geburtstagsfest. Das ist nicht passend und du wirst unangenehm auffallen.
So ist es auch, wenn du die falsche Schrift für deine Website auswählst.
Für wen erstellst du deine Website?
Wer ist deine Zielgruppe? Welche Menschen sind deine Wunschkunden?
Mit dieser Frage steht und fällt alles. Nicht nur bei der Wahl der Schriften. Wenn du die Planung deiner Website seriös erledigt hast, weisst du das und kannst sofort loslegen und die passende Schrift aussuchen.
Wo du schöne Schriften findest, erfährst du gleich etwas weiter unten.
Welche Schrift ist das?
Manchmal surfst du durchs Netz und siehst eine schöne Schrift, die auch zu deiner Zielgruppe passen würde. Nur was für eine Schrift ist das?
Das kannst du ganz einfach herausfinden. Wenn du mit Goolge Chrome im Internet unterwegs bist, kannst du dir die Erweiterung „WhatFont“ installieren.
Wenn du noch nie eine Erweiterung installiert hast, erfährst du hier wie das geht. https://claudiabarfuss.ch/google-chrome-erweiterung-installieren/
Sobald du sie installiert hast, siehst du dieses Icon oben im Browser:
Du klickst darauf und kannst nun zu der Schrift fahren, die dich interessiert. Sofort wird dir die Schrift angezeigt. Mit einem weiteren Klick erfährst du die Details zur Schrift:
Vergiss nicht nachher nochmals oben in das Icon zu klicken. Sonst zeigt er dir ständig alle Schriften an.
Kostenlose Schriften
Ich empfehle dir bei Google Fonts nach einer passenden Schrift zu suchen. Dort stehen dir zurzeit (März 2020) 996 Schriften zur Verfügung. Ich bin sicher, du findest da die passende.
Im Video zeige ich dir, wie du effektiv nach einer Google-Schrift suchst:
Google Fonts und die DSGVO
Als die DSGVO in Kraft getreten ist, gab es viele Veränderungen. Immer noch umstritten ist, ob Google Fonts weiterhin so verwendet werden dürfen wie bisher.
Wenn du auf Nummer sicher gehen willst, empfehle ich dir die Google Fonts lokal einzubinden.
Jonas Tietgen hat eine tolle Anleitung dazu geschrieben.
Brauchst du eine oder zwei Schriften?
Hast du dich entschieden nur eine Schrift einzusetzen, kannst du gleich zum nächsten Abschnitt springen.
Wenn du dich für zwei Schriften entschieden hast, dann überlegst du dir nun, ob beide serifenlos sein sollen oder eine mit Serifen, eine ohne.
So findest du die Hauptschrift
Ich suche immer als erstes nach der Schrift für den Fliesstext. Sobald ich die habe, kann ich entscheiden, ob ich allenfalls noch eine zweite Schrift für die Überschriften benötige.
Wie du genau vorgehst, habe ich dir im Video etwas weiter oben bereits gezeigt. Hier noch die Kurzfassung:
Am Bildschirm sind serifenlose Schriften sehr gut lesbar. Deshalb reduziere ich die Auswahl immer auf die serifenlosen Schriften.
Im nächsten Schritt stelle ich ein, dass die Schrift mindestens 5 Schriftschnitte haben soll.
Jetzt gibst du einen Satz ein mit Wörtern, die auf deiner Website immer wieder vorkommen. Idealerweise kommen viele verschiedene Buchstaben und auch Zahlen darin vor.
Schau dir nun die Schriften an, die angezeigt werden. Welche passen zu deinen Wunschkunden?
Pick dir die interessantesten Schriften raus und sieh sie dir dann nebeneinander an. Welche passt am besten?
Praxistipp: Such dir eine Hauptschrift aus, die viele verschiedene Schriftschnitte hat. So bist du bestens gerüstet.
Falls nötig: Die zweite Schrift finden
Wenn du noch nach einer zweiten Schrift suchst, dann gehst du nochmals genau gleich vor bis du zum letzten Schritt kommst.
Jetzt kommt die schwierige Frage, ob die beiden Schriften gut miteinander harmonieren.
Wenn du dir unsicher bist, findest du auch viele passende Schriftpaare auf dieser Website: https://fontpair.co/
Herzliche Gratulation! Nun hast du beide Schriften für deine Website gefunden und kannst loslegen. Viel Spass dabei.