Wie du die richtige Schriftart wählst

Schriftarten - der Kern einer Webseite

Zu Beginn eines jeden neuen Projekts stellt sich immer die Frage: "Welche Schriftart(en) sollte ich wählen?". Entweder du nimmst die am häufigsten verwendeten Schriftarten und belässt es dabei - was durchaus funktioniert, aber dein Projekt wird sich wahrscheinlich nicht so sehr von anderen abheben - oder du kannst dir auch die Mühe machen und eine passende und ansprechende Schriftart auswählen - keine Sorge, dieser Artikel wird dir helfen, diesen Prozess zu vereinfachen, und wir stellen dir sogar einige unserer besten Seiten für kostenlose Schriftarten zur Verfügung.

Die Grundlagen (für Anfänger)

Als Schriftart bezeichnet man den Stil, in dem ein Text dargestellt wird. Sie kann zum Beispiel fett, dünn oder regulär sein, was als Schriftstärke bezeichnet wird. Kursiv oder unterstrichen sind zusätzliche Attribute, die keinen Einfluss auf die Schriftstärke haben. Fette Schriften, stellen einen modernen und schlichten Stil dar, während dünne und hohe Schriften ein erhabenes und elegantes Aussehen haben.

Indem du die Schriftgröße erhöhst, steigerst du die Bedeutung des ausgewählten Textes - aber Vorsicht: Übertreibe es nicht, sonst wird der Nutzer schnell überfordert.

Darüber hinaus kann ein größerer Zeilenabstand die Lesbarkeit umfangreicher, zusammenhängender Texte, wie sie in Blogs oder Artikeln zu finden sind, verbessern - auch hier kommt es darauf an, den richtigen Abstand zu finden. Ein hilfreicher Tipp ist hier, je nach persönlicher Vorliebe, etwa 1,1 bis 1,3 pt zu nehmen.

Unterscheidung zwischen verschiedenen Schrifttypen

Es gibt viele verschiedene Arten von Schriftarten, und jede hat ihre Vorteile sowie bessere oder schlechtere Anwendungsfälle. Werfen wir einen Blick auf die wichtigsten Arten:

Serif

Serif-Schriften sind die klassischen Schriftarten wie Times New Roman, Roboto Slab und viele mehr. Sie sind eine raffinierte Schriftart und eignen sich daher perfekt für luxuriöse oder anspruchsvolle Projekte. An dieser Stelle ist es sehr wichtig, zwischen einer fetten Schriftart, besser geeignet für z.B. einen College-Pulli, und einer normalen oder dünnen, gut geeignet für z.B. ein Luxusprodukt (so wie im Beispiel) zu unterscheiden.

Das Logo des hochwertigen Möbelgeschäfts profitiert von der dünnen Serif-Schrift und diese unterstreicht das schlichte aber dennoch elegante Erscheinungsbild sowie die Botschaft von Qualität und Handwerkskunst des Geschäfts.

Anwendungsfall: Luxuriöse, delikate und seriöse Projekte

Infografik die Anwendungsfälle einer Serif Schriftart im Vergleich zeigt

Sans-Serif

Sans-Serif-Schriften sind am weitesten verbreitet, da sie leicht zu lesen sind, in fast jeder Größe und in jedem Erscheinungsbild gut aussehen und daher in den letzten Jahren immer mehr an Beliebtheit gewonnen haben. Prominente Beispiele sind Helvetica, Roboto, Montserrat und Open Sans.

Sie eignen sich perfekt als Ergänzung zu einer komplexeren Schriftart, da sie nicht im Rampenlicht stehen und somit perfekt geeignet für lange Textpassagen sind. So kannst du dem Nutzer große Mengen an Inhalt auf eine angenehme Art und Weise näher bringen.

Anwendungsfall: Moderne, schlichte und grafik- oder inhaltsschwere Projekte

Infografik die eine Sans-Serif Schriftart mit einer Serif Schriftart gegenüberstellt

Display

Wie der Name schon sagt, sind diese Schriftarten ein Statement - sie besitzen einzigartige Eigenschaften und stechen auch in komplexen Umgebungen heraus. Dies kann eine gute Eigenschaft sein, wenn sie an den richtigen Stellen und nicht zu oft verwendet werden, da sonst ihre positive Wirkung erlischt.

Anwendungsfall: Banner, Flugblätter, große Website-Titel oder Logos

Infografik zur Visualisierung der Unterschiede zwischen einer Sans-Serif Schriftart und einer Display Schriftart

Unterscheidung zwischen einer Haupt- und einer Hilfsschriftart (supporting font)

Dieser Schritt ist recht einfach und kurz. Deine Hauptschriftart wird für Titel, manchmal für Untertitel und allgemein für kurze Texte mit großer Wirkung verwendet. Jetzt fragst du dich vielleicht, warum sie nicht überall verwendet wird? Schaue dir dazu den Vergleich unten an:

Es ist viel schwieriger, den kleinen Text zu lesen, da unsere Hauptschriftart ziemlich komplex ist. Wenn wir jetzt eine supporting font wie „Inter“ einführen, können wir den Leser gleichermaßen überzeugen, denn die auffällige Überschrift zieht die Aufmerksamkeit des Lesers auf die Sektion und die Inhalte sind nun durch die klar strukturierte Font besser zu lesen.

Infografik zur richtigen Verwendung von Haupt und Nebenschriftarten im Webdesign. Vergleich zwischen richtigem Beispiel und falscher Anwendung.

Die Wahl der richtigen Schriftart

Jetzt, da du weißt, welche Schriftarten es gibt und wie man sie gestaltet, kannst du die für dein Projekt am besten geeignete Schriftart auswählen. Da sich die perfekte Schriftart leider nicht von selbst findet, empfehle ich dir, dir die folgenden Fragen zu stellen und zu versuchen, das Gelernte anzuwenden:

  • Was gestaltest du (Website, Banner, Post)?
  • Ist die Marke deines Kunden bereits gut etabliert oder ein Newcomer (Dann kannst du etwas kreativer werden)?
  • Wer ist die Zielgruppe (Gen-Z, Millenials, Baby-Boomer)?

Dann hilft es zusätzlich, die Auswahl der Schriftarten auf 3 zu beschränken. Platziere sie in deinem Entwurf nebeneinander und vergleichen sie anschließend - aber sei dir bewusst, dass man oft dazu neigt, die Schriftart zu wählen, mit der man am vertrautesten ist oder die du bereits verwendet hast.

Versuchen, diese Voreingenommenheit zurückzustellen und denke an die oben genannten Fragen. Um diesen Prozess zu erleichtern, kannst du dich von spannenden Projekten auf dribble.com oder awwwards inspirieren lassen oder, falls vorhanden, einen Kollegen oder Freund fragen.

Infografik die Beispiele für die Wahl einer guten Schriftart mit Negativbeispielen gegenüberstellt

Quellen für Schriftarten

Viele Schriftarten sind oftmals leider sehr teuer und daher vor allem bei kleineren Projekten, obwohl sie perfekt passen würden, nicht verwendbar. Deshalb haben wir unsere Lieblingsquellen für kostenlose Schriftarten (für den persönlichen und kommerziellen Gebrauch) zusammengestellt. Das Durchsuchen der endlosen Anzahl von Schriftarten kann überwältigend und ermüdend sein, daher ist das Filtern und Eingrenzen der Ergebnisse entsprechend den Anforderungen des Projekts essenziell.

Um dich nicht länger warten zu lassen, ist hier die erste Website, fonts.google.com. Bei der großen Anzahl von Schriftarten musst du zwar filtern, aber du wirst höchstwahrscheinlich finden, was du brauchst.

Wenn du auf der Suche nach einer Nischenschriftart bist, solltest du fontshare.com ausprobieren. Sie bieten zwar ebefalls kostenpflichtige Versionen an, aber ihr kostenloses Sortiment ist bereits sehr umfangreich.

Falls die beiden genannten Quellen noch keine Schriftart für dich hatten, gibt es immer noch die Möglichkeit, eine von awwwards.com ausgewählte Bibliothek zu durchsuchen. Aber sei dir bewusst, dass einige dieser Schriftarten nur Demoversionen sind und möglicherweise nicht in deinem Projekt verwendet werden dürfen. Und wenn du nun doch Geld ausgeben möchtest oder kannst, verwenden die meisten der nominierten Websites vielseitige und einzigartige Schriftarten - wie z.B. mammut.com (allerdings kostet deren Schriftart mehr als 20.000 €).

Du weißt schon genau, welche Schriftart du verwenden willst, weil deine Lieblingswebseite sie benutzt, aber du weißt nicht, wie sie heißt? Keine Sorge, wir haben eine Lösung, denn es gibt mehrere Möglichkeiten, die Schriftart zu finden. Am einfachsten ist es, eine Erweiterung für deinen Browser herunterzuladen, wie z. B. fonts ninja (Chrome). Aktiviere das Add-on, besuche die Webseite mit der gewünschten Schriftart, klicke auf fonts ninja (wahrscheinlich in der oberen rechten Ecke) und bewege den Mauszeiger über die Schrift, die du identifizieren möchtest – et voilá.

Zusammenfassung

Und das war's auch schon. Lass uns nochmal gemeinsam über das Gelernte schauen!

Schritt 1: Die Grundlagen – Lerne einige paar Fachbegriffe und allgemeine Informationen über Schriftarten

Schritt 2: Unterscheide die wichtigsten Schriftarten: Serif, Sans-Serif und Display

Schritt 3: Du weißt nicht, welche Schriftart du willst? Stelle dir wichtige Fragen wie: Was entwerfe ich? Wer ist das Zielpublikum? Was harmoniert mit dem bestehenden Branding?

Schritt 4: Vergiss nicht, deine Hauptschriftart adäquat zu verwenden und eine Hilfsschriftart einzuführen, um Textpassagen besser leserlich zu machen.

Schritt 5: Du weißt, welche Art von Schrift du verwendet möchtest, hast aber noch Zweifel? Bei google fonts oder fontshare findest du ein umfassendes, kostenloses Sortiment. Wenn du bereit bist, viel Geld auszugeben, kannst du auch awwwards oder dribble in Kombination mit fonts ninja verwenden, um die gewünschte Schriftart zu identifizieren.

Teile diesen Artikel