XYZ – Ein Leitfaden, um den richtigen Font zu finden

Junge Frau im gelben T-Shirt am Schreibtisch vor dem Imac sitzend.

Font Familien und Typen

Wenn Sie das Wort “Web Design” hören, an was denken Sie? 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 harmonisch zusammenpassen.

Lassen Sie uns 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 Sie sie in Web-Anwendungen und Websites sehen. Google und Adobe (Typekit) Fonts bieten eine große Auswahl an.

System-Fonts

Sehen Sie, wenn Sie sich PC-Programme und Apps auf den mobilen Geräten ansehen.

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

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

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 kennen Sie 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 Ihrer Meinung nach eine gute Schrift? Haben Sie auch schon mal Ihre 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 sein
  • 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 Ihnen Ihr Website Editor? Vorlagen von Website-Builder, mit denen Sie Ihren Blog, Ihren Online-Shop oder persönliche Homepage kreieren können, sind so entwickelt, dass diese bereits Fonts, die dem Thema der Vorlage entsprechen, vorgeben.

Bequemerweise ist dies mit der harmonischen Auswahl an Fonts bei Webnode möglich.

Im Webnode-Editor finden Sie die wichtigsten Schriftarten in der Navigationszeile aufgelistet.

Im Webnode-Editor finden Sie die wichtigsten Schriftarten in der Navigationszeile 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 auf einmal geändert werden. So, dass Sie sich deren Kombinationen ändern.

Beispiel von verschiedenen Fonts im Webnode Editor

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

Ihren Font wählen

Genug Fakten. Sie sind an der Reihe. Wie entscheiden Sie welche Schriftart Ihre Geschichte am besten erzählt?

Bedeutung von Fonts

Font-Familien und deren typischen charakterlichen Eigenschaften

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 sind sie sehr dekorativ.

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. Sie werden diese im Futura Font der Mode Marke Dolce & Gabbana, als auch bei Ihrem 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, bekommen Sie langsam ein Gefühl für die feinen Nuancen der Schriftarten? Welche Schriftfamilie ist für Sie am besten geeignet?

Um dies genauer herauszufinden, gilt es zu klären, wofür Ihr Unternehmen steht. Wenn Sie eine persönliche Website oder einen Blog haben, sollten Sie sich für eine Schriftart entscheiden, die Ihre Charaktereigenschaften am besten repräsentiert.

Die Beste Schrift für Ihre Marke

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

Mit unterschiedlichen Schriftarten können Sie auf Ihrer Website verschiedene Inhalte hervorheben oder den Tonfall ändern. Dies ist sinnvoll, wenn Sie zum Beispiel jemanden zitieren oder auf neue Angebote Ihres E-Shops aufmerksam machen wollen.

Beantworten Sie nun folgende Fragen, um Ihre 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 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?

Vergessen Sie nicht den Kontext. Wenn Ihre Website beispielsweise Ihren YouTube-Kanal ergänzt und Sie viele Miniaturansichten auf einer Seite haben, die zu Ihren Videos führen, oder wenn Sie ein Künstler sind und Bilder in einer Galerie-Ansicht haben, wollen Sie keine Schrift, die von dem visuellen Inhalt ablenkt. Denn, Ihr Publikum sieht sich Ihre Inhalte eher an, als dass es sie durchliest.

Achten Sie auf Ihre Branche. Wenn Sie zum Beispiel ein Anwalt oder Berater sind, möchten Sie 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üfen Sie Ihre Wahl der Schriftart und deren Zugänglichkeit in allen Browsern auf verschiedenen Geräten, bevor Sie Ihre endgültige Entscheidung treffen.

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

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:

Respektieren Sie die Familie

Verwenden Sie niemals mehr als 3 verschiedene Font Familien. Bleiben Sie idealerweise bei einer. Ändern Sie nur dessen Schriftart.

Nicht jeder Mix ist ein Treffer!

Sie können Fonts mischen. Aber, sein Sie vorsichtig bei Fonts mit gegensätzlichen Eigenschaften, wie z.B. Times New Roman und Edwardian Skript.

Hervorheben

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

Raum

Zögern Sie nicht größer zu wählen. Eine gut ersichtliche Schriftgröße, die alle Menschen lesen können, liegt bei 16pt und höher. Sollten Sie die Größe auf Ihrer Website unterschreiten, können Menschen mit eingeschränkter Sehkraft Ihren 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 Sie die allerbeste Schriftart für Ihre Website gefunden haben, 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 Sie zum Beispiel vollgepackte Textfelder haben, die oben mittig und unten rechts beginnen, wird sich kaum jemand in dem Salat zurechtfinden.

Gliedern Sie also Ihren Text. Verwenden Sie großzügig Leerzeichen, um dem Leser eine Pause zu gönnen.

Sollten Sie sich mehr für Web-Design interessieren, finden Sie in diesem Blog Artikel weitere nützliche Informationen, wie Sie Ihre Website gestalten können.