XYZ – Ein Leitfaden, um den richtigen Font zu finden

Du erstellst gerade deine Website, schreibst einen Blog oder eröffnest deinen Online-Shop und dir gefällt die Schrift nicht ganz? Sie reflektiert nicht den Eindruck oder die Message die du geben willst? Mit dieser Anleitung den passenden Font für deine Website zu finden, gehst du ins Detail. Am Ende wirst du nicht nur deinen Lieblingsfont finden, sondern auch ganz nebenbei mehr über Web-Desgin lernen. 😉

Font Familien und Typen

Wenn du das Wort “Web Design” hörst, an was denkst du? An das Layout einer Website? Die verschiedenen Stile, Farben und Hintergründe? Beim Web Design geht es auch um Fonts und darum, wie diese am besten harmonieren. Lass Buchstaben und Glyphen sprechen!

Typen

Fonts werden in verschiedene Typen, Schriftarten (typefaces) und Familien unterschieden. Es gibt drei allgemeine Typen, die nach ihrer Verwendung unterschieden werden.

Web-Fonts

Sind Fonts, wie du sie in Web-Anwendungen und Websites siehst. Google und Adobe (Typekit) Fonts bieten eine große Auswahl an.

System-Fonts

Siehst du, wenn du dir PC-Programme und Apps auf den mobilen Geräten verwendest.

Variable-Fonts

Sind Sets von Fonts, die unterschiedliche Dicke und Distanz zwischen den Buchstaben vorweisen. Sie werden gern verwendet, da sie sich gut anpassen.

Beispiel wie variable Fonts sich an den vorhandenen Raum anpassen

Schrifttypen und Font-Familien

Der Schrifttyp beschreibt wie die Buchstaben eines Fonts entworfen sind. Dies umfasst die Dicke oder Gewichtung (fett), die Neigung (kursiv) und die Abstände der Buchstaben (schmal, bzw. condensed).

Eine Font-Familie, wie Arial, kann verschiedene Schrifttypen haben, die dementsprechend einen neuen Namen erhalten, zum Beispiel Arial Black und Arial Narrow.

Font-Familien (blau hinterlegt) und dessen verschiedenen Schrifttypen für Serifen und ohne Serifen

Grundsätzlich kann man Font-Familien in verschiedene Typographien unterteilen: Mit Serifen, ohne Serifen, Display und Skript. Untergeordnete existieren: Unter ihnen Slab Serif, Modern, Monospaced oder nicht-proportional, um ein paar zu nennen.

Fonts mit Serifen, wie Times New Roman, sind ein Klassiker, der mit der gedruckten Presse geboren wurde. Eine Serife ist ein kleiner Strich an einem Buchstaben, der parallel zur Textzeile verläuft. Serifenschriften sind daher für das Auge leichter zu lesen.

Ohne Serifen

Von dieser Familie kennst du bestimmt am besten Arial und Calibri. Dies sind klare Fonts ohne schmückende Extras.

Skript

Diese Fonts gleichen einer Handschrift. Sie sind spielerisch, so wie zum Beispiel Snell Roundhand oder Edwardian.

Display

Fonts, wie Cooper Black oder Fat Face, sind gewagt und unkonventionell. Hier werden beispielsweise Groß- und Kleinbuchstaben gemischt und die Abmessungen der Buchstaben (in Höhe und Breite) vertauscht.

Evergreens und Trends

Was ist deiner Meinung nach eine gute Schrift? Hast du auch schon mal deine eigene Handschrift auf dem schnell gekritzelten Notizzettel nicht mehr lesen können? Natürlich will niemand eine Schrift entziffern müssen.

Schriftarten sollen also:

• skalierbar sein, d.h. in allen Dimensionen und auf allen Medien, digital, als Druck ohne Qualitätsverlust erscheinen.
• entsprechend der Größe und des Designs lesbar und,
• mit anderen Font Familien kompatibel sein.

Eine Website sollte ein Maximum von 3 verschiedenen Fonts zeigen, die miteinander zusammen und sich automatisch auf jede Zeilenlänge anpassen. Diese müssen nicht zwingend aus der gleichen Font-Familie sein, müssen aber auf allen Bildschirmen klar lesbar sein und gut mit allen Farben harmonisieren.

Vielseitige Klassiker, die nie langweilig werden, und für die jedes Auge geübt ist, sind Schriftarten wie:

• Arvo
• Roboto
• Lato
• Merriweather
• Montserrat
• Open Sans
• Times New Roman
• Playfair Display

Fonts in Website Baukästen

Welche Fonts bietet dein Website Editor? Vorlagen von Website-Builder, mit denen du deinen Blog, Online-Shop oder persönliche Homepage kreieren kannst, sind so entwickelt, dass diese bereits Fonts, die dem Thema der Vorlage passen, vorgeben.

Bei Webnode ist dies bequemerweise mit der harmonischen Auswahl an Fonts möglich:

Im Webnode-Editor findest du die wichtigsten Schriftarten in der Navigationszeile des Texteditors aufgelistet.

Apropos, Webnodes meist genutzte Fonts sind:

• Montserrat, Roboto, oder Open Sans aus der ohne Serifen Familie
• Playfair Display, Pt Serif, oder Merriweather aus der Familie mit Serifen

Alle Fonts auf einer Website können auch auf einmal geändert werden, so dass sich deren Kombinationen ändern.

Beispiel von verschiedenen Fonts im Webnode Editor

Schriftkombinationen sind automatisch “bestens gepaart”. Sie ergänzen sich so, dass sie zum Bildhintergrund und zum Layout der Website passen. Sie sind die Kirsche auf dem Sahnehäubchen des Web-Designs.

Trends

Das World Wide Web begann mit serifenlosen Schriftarten. Ganz einfach deshalb, weil Bildschirme damals keine scharfe Auflösung hatten, um handschriftliche und experimentelle Schriftarten ausreichend darzustellen.

Heute sind der Kreativität keine Grenzen gesetzt. Eine “falsche” Schriftart, gibt es nicht. Die Web-Typografie erlebt ihre Renaissance. Google Fonts ist eine Quelle für Designer, um Schriften immer weiterzuentwickeln.

Im Jahr 2020 dominierten serifenlose Schriftarten. Ausdrucksstarke Schriften, wie Goldplay und Versus waren im Kommen. Nun geht der Trend in Richtung Solidität und Klarheit. Dennoch liegen serifenlose Schriften in der digitalen Welt weiterhin ganz oben.

Alle Tippfehler werden in geometrisch klaren serifenlosen Schriften gemacht, denn sie sind:

• kühn
• schneidig
• universell
• solide
• verwenden negativen Raum

Deinen Font wählen

Genug Fakten. Du bist an der Reihe! Wie entscheidest du welche Schriftart deine Geschichte am besten erzählt?

Bedeutung von Fonts

Font-Familien und deren typischen charakterlichen Eigenschaften

Fonts übermitteln eine Stimmung. Sie haben Charakter. Handgeschriebene Schiften fließen, sind elegant oder leidenschaftlich. Durch verlängerte Striche, abgerundete Linien und schleifenartigen Verzierungen deokorieren sie.

Wenn Aschenputtel eine Schriftart tanzte, wäre es Edwardian Font. Genauso sollte ein französisches Michelin-Star Restaurant sein neues Gericht auf den Markt in einer passenden Schriftart hinausrufen.

Display

Fonts sind das Chamäleon der Schriften. Sie wechseln von unterhaltsam zu einzigartig und spielerisch. Der abgerundete Font der Jelly Belly Schachtel springt ins Auge und lockt in die richtige Ecke des Süßigkeiten Ladens.

Modern

Font Typen sind stylisch und gewagt. Du wirst diese im Futura Font der Mode Marke Dolce & Gabbana, als auch bei deinem PayPal Account wieder erkennen.

Serifen

Diese Schriften stehlen bereits Jahrhunderte lang die Aufmerksamkeit der Menschen, wann immer sie einen Zeitschriftenladen betreten. Sie wecken Vertrauen und Respekt, stehen für Tradition.

Die berühmte Modezeitschrift Vogue zum Beispiel verwendet die Serifenschrift Bodoni. Auch Apple zitierte ursprünglich “Think different” in dieser Schriftfamilie.

Dagegen steht eine serifenlose Schrift für Stabilität, Stärke, Klarheit und Sauberkeit. Dies wird gern von Sport und Bekleidungsfirmen zu Nutze gemacht. So wird, z. B. Trade Gothic von Nike oder Helvetica für The North Face verwendet.

Serifenlos

Na, bekommst du langsam ein Gefühl für die feinen Nuancen der Schriftarten? Welche Schriftfamilie ist für dich am besten geeignet?

Um dies genauer herauszufinden, gilt es zu klären, wofür dein Unternehmen steht. Wenn du eine persönliche Website oder einen Blog hast, solltest du dich für eine Schriftart entscheiden, die deine Charaktereigenschaften am besten repräsentiert.

Der Beste Font für deine Website und deine Marke

Gewöhnlich führen 2-3 verschiedene Schriftarten die Besucher/-innen einer Website durch die einzelnen Seiten. Hier beginnt ein neuer Abschnitt mit einer Überschrift in einer anderen, sich fett hervorhebenden Typographie.

Mit unterschiedlichen Schriftarten kannst du auf deiner Website verschiedene Inhalte hervorheben oder den Tonfall ändern. Dies ist sinnvoll, wenn du zum Beispiel jemanden zitieren oder auf neue Angebote deines E-Shops aufmerksam machen willst.

Beantworte folgende Fragen, um deine persönliche Schriftart zu finden:

• Wer ist meine Zielgruppe und was ist für sie wichtig?
• Gibt es eine Schriftart, die die Erfahrungen meiner Kunden/Kundinnen widerspiegelt?
• Passt die Schriftart in den Zusammenhang, in dem diese gesehen werden soll?
• Welche Schriftart präsentiert die Persönlichkeit meiner Marke?
• Passen meine Farben zu der gewählten Schriftart?

Vergiß nicht den Kontext. Wenn deine Website beispielsweise deinen YouTube-Kanal ergänzt und du viele Miniaturansichten auf einer Seite hast, die zu deinen Videos führen, oder wenn du ein/e Künstler/-in bist und Bilder in einer Galerie-Ansicht hast, willst du keine Schrift, die vom visuellen Inhalt ablenkt. Denn, dein Publikum sieht sich deine Inhalte eher an, als dass es sie durchliest.

Achte auf deine Branche. Wenn du zum Beispiel ein/e Anwalt/-in oder Berater/-in bist, möchtest du Vertrauen wecken und Verbindlichkeit sichern. Eine ausdrucksvolle geschwungene Schriftart würde hier den falschen Eindruck geben.

Eine Schriftart muss ebenfalls mit allen Browsern kompatibel sein. Prüfe deine Wahl der Schriftart und deren Zugänglichkeit in allen Browsern auf verschiedenen Geräten, bevor du eine endgültige Entscheidung triffst.

Zu viele Font Familien und Schrifttypen, können die eigentliche Nachricht und die Zusammenhänge ruinieren.

Zu guter Letzt, zu wissen, was man nicht tun soll, ist manchmal einfacher, als sich zu merken was man tun soll. Dies sind die wichtigsten No-nos:

Respektiere die Familie

Verwenden niemals mehr als 3 verschiedene Font Familien. Bleib idealerweise bei einer. Ändere nur dessen Schriftart.

Nicht jeder Mix ist ein Treffer!

Du kannst Fonts mischen. Aber, sei vorsichtig bei Fonts mit gegensätzlichen Eigenschaften, wie z.B. Times New Roman und Edwardian Skript.

Hervorheben

Verwende verzierende schnörkelige Schriftarten oder komplexe Display-Schriften nur um Überschriften hervorzuheben. Vermeide diese im Haupttext oder Beschriftungen.

Raum

Zögere nicht größer zu wählen. Eine gut ersichtliche Schriftgröße, die alle Menschen lesen können, liegt bei 16pt und höher. Solltest du die Größe auf deiner Website unterschreiten, können Menschen mit eingeschränkter Sehkraft deinen Text schlecht bis gar nicht lesen.

Lange Zeilen

Lange Sätze, oder Schriftarten, die viel Leerraum zwischen den Buchstaben haben und schnell eine Zeile füllen, führen dazu, dass die Leser sich in den Zeilen verlieren.

Normalerweise ist das Layout in Vorlagen von Website-Baukästen programmiert, dass Zeilenumbrüche automatisch entstehen, bevor diese manuell erzwungen oder die Zeilen zu lang werden.

Ausgemachte Anordnungen

Selbst wenn du die allerbeste Schriftart für deine Website gefunden hast, nützt dies nichts, wenn der Text nicht richtig auf einer Seite angeordnet ist.

Hiermit meinen wir das einheitliche Zentrieren oder links- und rechtsbündige Schreiben. Wenn du zum Beispiel vollgepackte Textfelder hast, die oben mittig und unten rechts beginnen, wird sich kaum jemand in dem Salat zurechtfinden.

Gliedere also deinen Text. Verwende großzügig Leerzeichen, um dem/der Leser/-in eine Pause zu gönnen.

In diesem Beitrag fragen wir uns: Was ist gutes Web-Design? Neugierig?