1.7 Element #2: Schriftarten

Dass Farben einen grossen Einfluss auf die Stimmung eines Designs haben, ist wohl schnell klar.

Aber Schriftarten?

Auch wenn man vielleicht nicht sofort daran denkt, aber Schriftarten haben einen grossen Einfluss auf die Emotion und Stimmung:

Das ist natürlich ein etwas überspitztes Beispiel 😉

Und doch haben Schriftarten einen zwar etwas subtileren, aber mindestens so wichtigen Einfluss auf das Design wie Farben.

Typografie, also alles was zum Thema Gestalten von Schriftarten gehört, ist nicht übertrieben eine Wissenschaft für sich.

Ich werde gar nicht erst versuchen, Dir die Fachbegriffe und Hintergründe wie Kerning (Abstand zwischen verschiedenen einzelnen Buchstaben-Kombinationen) oder Tracking (Abstände zwischen Buchstaben über das Wort verteilt) beizubringen.

Das Ziel dieser Lektion ist „nur“, dass Du bewusst eine Schriftart für Dein Design auswählen kannst, welche sowohl hochwertig als auch passend für Dich ist.

Wenn Du das geschafft hast, hast Du nämlich einen grossen und entscheidenden Schritt Richtung „professionelles“ Design geschafft.

Hier, was Du dafür wissen musst:

Die 4 verschiedenen grundlegenden Schriftarten

Bevor Du eine konkrete Schrift auswählen kannst, musst Du Dich für eine Schriftart entscheiden.

Die Schriftart gibt den grundsätzlichen Stil und damit Wirkung und Emotion der Schrift vor. Jede Schriftart hat Tausende verschiedener Schriften.

Hier eine Übersicht und Beschreibung der 4 verschiedenen Schriftarten, welche Du grundsätzlich auswählen kannst:

#1: Serifen Schriften: Serifen sind diese feinen kleinen Linien am Ende der Buchstaben:

Der Text ist jeweils der Name der Schriftart, also hier z.B. Garamond.

#2: Sans Serif (Serifenlose) Schriften:
Bei Sans Serif Schriften fehlen die Serifen, sprich es sind sehr geradlinige Buchstaben:

#3: Slab Serif Schriften (oder auch Block Serifen oder Egyptienne genannt):
Slab Serif sind sozusagen eine etwas modernere Variante der Serifen Schriften. Die Serifen sind dabei geradlinig und mit einer ähnlich dicken Strichstärke wie die Buchstaben selbst:

#4: Sogenannte Display oder Zierschriften:
In diese Kategorie fallen alle Schriften, welche speziell für Überschriften und Titel (Headlines) oder Logos gestaltet worden sind. Diese sind oft bewusst etwas auffälliger und einzigartig gestaltet, und sollen vor allem auch sehr gross (eben als Headline) dargestellt werden können.

Es gibt grob 3 verschiedene Unterarten von Display Schriften:

1. „Allgemeine“ Display oder dekorative Schriften: Diese können sowohl relativ simpel als auch etwas spezieller sein, und sowohl mit als auch ohne Serifen sein:

2. Script (Schreibschrift): Diese ahmen die klassische Schreibschrift („Schnürlischrift“, wie wir es in der Schweiz nennen) nach, welche wir in der Schule gelernt haben bzw. noch viel früher in Dokumenten und Briefen Standard war:

3. Handwriting (Handschrift): Diese ahmen die natürliche Handschrift in den unterschiedlichsten Stilen nach (z.B. wie Stifte oder Pinselstriche):

Ein Wort der Warnung: Display Schriften sind zwar verlockend, eben weil sie so auffällig und speziell sind. Aber vor allem die besonders auffälligen und speziellen Schriften können schnell klischeehaft, kindisch oder schlicht unprofessionell wirken.

Auch hier gilt wie überall im Design: Weniger ist mehr.

Entweder bist Du zu 100% sicher, dass eine bestimmte Display Schrift zu Deinem Projekt passt, oder ich empfehle Dir einfach bei den 3 anderen Schriftarten (also Serif, Sans Serif und Slab Serif) zu bleiben.

Wie viele Schriftarten bzw. Schriften Du brauchst

Genau gleich wie bei den Farben, empfehle ich Dir, Dich auf 1 oder 2 Schriften (und Schriftarten) zu beschränken.

3 oder mehr verschiedene Schriften zu kombinieren, würde ich wirklich nur erfahrenen Designern überlassen.

Du brauchst grundsätzlich lediglich 2 Schriften (oder sogar nur 1, wie Du noch sehen wirst):

1. Eine Schrift für die Titel.
2. Eine Schrift für den (Fliess-)Text.

Bei der Wahl der Schrift für diese 2 Elemente gilt es ein Grundprinzip zu beachten: Kontrast und Balance.

Kontrast heisst: Die Schriften für den Titel und den Text müssen sich eindeutig voneinander unterscheiden.

Balance heisst: Die Schriften haben ähnliche Merkmale, so dass sie zusammenpassen.

Hört sich etwas abstrakt an? Ist aber eigentlich relativ simpel. Hier 2 Beispiele, die das verdeutlichen:

2 Schriftarten, die überhaupt keine Ähnlichkeit (Balance) haben („Great Vibes“ als Titel und „Montserrat“ als Text):

Die Schriften scheinen sich (ähnlich wie bei Farben) zu „beissen“.

Die verschnörkelte Titelschrift (Script/Handschrift) wirkt sehr klassisch und verspielt, während der Text sehr eine sehr moderne, schlichte und geometrische Schriftart hat.

Eine ebenfalls klassischere und schlichte Serifen Schrift würde viel besser zu so einer Titelschrift passen.

Und hier 2 Schriftarten, die zu ähnlich sind, also kaum Kontrast haben („Bree Serif“ als Titel und „PT Serif“ als Text):

Das kennst Du sicher:

Es ist sehr verwirrend und störend für das Auge, wenn etwas nur einen kleinen Tick schräg, versetzt oder asymmetrisch ist.

Das ist hier genau der Fall:

Der Titel ist eine Slab Serif Schrift kombiniert mit einer sehr ähnlich aussehenden Serifen Schrift.

Anstatt einer Serifen Schrift als Text, würde eine Sans Serif Schrift viel mehr Kontrast und Abwechslung für das Auge reinbringen.

Oder aber die Titelschrift könnte z.B. einfach viel fetter oder in GROSSBUCHSTABEN geschrieben werden. Das würde ebenfalls den Kontrast erhöhen.

Aber keine Sorge:

Mit den folgenden konkreten Tipps zur Schriften-Auswahl kann fast nichts schiefgehen:

Deine Wahl der Schriftarten

Diese Wahl triffst Du am besten in 2 Schritten:

• Schritt #1: Wähle zuerst die Titel Schriftart. Die Titel Schrift hat die stärkste Wirkung auf das Design.
• Schritt #2: Wähle die (Fliess-)Text Schriftart passend zur Titel Schriftart aus. Die Text Schrift soll primär lesbar sein und mit der Titel Schrift harmonieren – und nicht die Aufmerksamkeit auf sich selbst ziehen.

Wählen wir also zuerst die Titel Schriftart aus:

Auch hier kannst Du wieder auf Deine Vorzüge der Faszination zurückgreifen.

Hier eine Übersicht über die Wirkung der verschiedenen Schriftarten und für welche Vorzüge der Faszination diese insbesondere passen:

• Serifen Schriften wirken typischerweise edel, traditionell, zuverlässig, respektabel, selbstbewusst, intellektuell und angesehen.
  Sie passen für: Emotion, Power, Prestige, Stabilität, Tiefgang, Wachsamkeit
• Sans Serif Schriften wirken typischerweise modern, klar, vielseitig, innovativ, freundlich, einladend und ebenfalls zuverlässig.
  Sie passen für: Innovation, Emotion, Power, Prestige, Stabilität, Tiefgang, Wachsamkeit
• Slab Serif Schriften wirken typischerweise besonders modern, auffällig, mutig, kräftig, dabei dennoch freundlich und bodenständig.
  Sie passen für: Innovation, Emotion, Power, Prestige, Stabilität
• Bei „allgemeinen“ Display Schriften hängt die Wirkung grundsätzlich davon ab, ob es eine Serif, Slab Serif oder Sans Serif Schriftart ist (Du kannst diese also gemäss deren Beschreibungen wählen).
  Die etwas „spezielleren“ Display Schriften können aber auch eine ganz eigene Wirkung haben. Hier als Beispiel „Fredoka One“:
  
  Obwohl eigentlich eine Sans Serif Schrift, wirkt sie durch die abgerundeten Ecken primär verspielt, jung, lustig und sehr freundlich und menschlich, während sie hingegen nicht mehr innovativ oder zuverlässig wirkt.
• Script Schriften (Schreibschrift) wirken typischerweise elegant, formell, klassisch, edel und traditionell.
  Sie passen (unter Umständen) für: Emotion, Prestige, Stabilität
• Handwriting Schriften (Handschrift) wirken typischerweise freundlich, kreativ, einladend, künstlerisch, einzigartig, verspielt, lustig, kunstvoll und/oder bodenständig.
  Sie passen (unter Umständen) für: Emotion, Tiefgang

Du siehst:

Bei den Schriftarten ist die Auswahl nicht ganz so „ausgeglichen“ wie bei den Farben:

• Sans Serif Schriften gehen immer.
• Serif und Slab Serif Schriften sind etwas differenzierter und schliessen sozusagen ihr jeweiliges Gegenüber aus (während also z.B. eine klassische Serif Schrift schlicht nicht zu Innovation passt, passt eine moderne und „laute“ Slab Serif eher nicht zu Tiefgang und Wachsamkeit).
• Script und Handwriting Schriften passen meiner Meinung nach am ehesten zum Vorzug der Emotion (da eine Handschrift natürlich etwas Persönliches ist und damit automatisch mit mehr Gefühl, Nostalgie oder Erinnerungen verbunden wird). Aber selbst da würde ich es nur in gewissen Branchen einsetzen. Einige Beispiele: Alles rund um das Thema Hochzeit oder Kinder, hochwertiges Handwerk oder Kunst, hausgemachte Feinkost, Delikatessen oder Spezialitäten, Mikrobrauerei, Café.

Als nächstes zum Schritt #2: Wir wählen die (Fliess-)Text Schriftart passend zur Titel Schriftart aus.

Wie gesagt, die Text Schrift selbst soll keine Aufmerksamkeit auf sich selber ziehen, sondern primär einfach perfekt lesbar sein.

Hier musst Du Dich grundsätzlich nur zwischen Serif oder Sans Serif entscheiden.

Leider kann ich Dir bei dieser Entscheidung keine hilfreiche Faustregel oder Tipp geben:

Egal welche Schriftart Du für den Titel gewählt hast, sowohl eine Serif als auch Sans Serif Schrift lässt sich grundsätzlich mit allem kombinieren.

Darum einfach als 2 allgemeinere Hinweise und Tipp:

1. Denk einfach an das Konzept von Balance und Kontrast: Deshalb passt zu einem Titel mit Serif oder Slab Serif praktisch immer ein Fliesstext mit einer Sans Serif (und umgekehrt).
2. Die einfachste (und trotzdem toll aussehende) und minimalistische Lösung: Benutze einfach die genau gleiche Schrift für die Titel und den Text. Das klappt natürlich nur, wenn die von Dir gewählte Schrift keine Display Schrift ist (sprich auch für Fliesstext geeignet ist). Kontrast kannst Du nämlich auch durch die Grösse und Stärke (also fette Schrift) erhalten.

Falls es Dich genauer interessiert: Hier ist sehr gut beschrieben, was eine gute Fliesstext (= Body Text) Schrift ausmacht: https://rafaltomal.com/choosing-a-body-text-font-for-your-website/

Aber keine Sorge, das musst Du natürlich nicht selber für jede einzelne Schrift herausfinden: Es ist grundsätzlich immer angegeben, ob eine Schrift für Fliesstext gedacht ist oder nicht.

Deine Wahl der einzelnen Schriften

Jetzt wo Du weisst, welche Schriftart zu Dir passt, musst Du „nur“ noch die genaue Schrift auswählen.

Auch hier zeige ich Dir verschiedene Wege und Inspirationsquellen, damit wirklich jeder tolle Schriften findet (und Du selber entscheiden kannst, wie viel Zeit und Kreativität Du investieren möchtest).

Inspirationsquelle #1: Selber Google Fonts durchstöbern

Grundsätzlich kannst Du einfach auf die Google Fonts Website (https://fonts.google.com/) gehen, und die gewünschte Schriftart-Kategorie nach einer Schrift durchsuchen, die Dir gefällt:

Wenn Du eine Schrift anklickst (Tipp: Auf den Namen der Schrift klicken, nicht auf das rote Plus Symbol), siehst Du unten auch gleich beliebte Kombinationen für diese Schrift:

Wenn Dich diese Masse an Möglichkeiten etwas überfordert und Du nicht weisst, wo Du anfangen sollst, empfehle ich Dir die nächste Option:

Inspirationsquelle #2: Handverlesene Google Fonts Kombination verwenden

Das ist der mit Abstand einfachste Weg, ein tolle Schrift Kombination zu erhalten.

Die Auswahl ist zwar leider jeweils nicht riesig, aber jede dieser handverlesenen Schrift Kombinationen ist eine grossartige Wahl:

• https://typespiration.com/
• https://artisanthemes.io/best-google-fonts-combinations-modern-agency-website/

Und wie gesagt:

Du musst Dir bei der Schrift Auswahl nie Sorgen machen, dass ein Besucher die einzelnen Schriften erkennt. Er merkt lediglich (unbewusst), ob das Design stimmig ist oder nicht.

Inspirationsquelle #3: Die 40 „besten“ Google Fonts

Das „beste“ ist natürlich auch bei erfahrenen Designern immer auch Geschmackssache.

Aber: Wenn Du eine dieser Schriften verwendest, kannst Du Dir zumindest sicher sein, keine klischeehafte oder unprofessionelle Schrift zu wählen.

Hier der Link zu den 40 besten Google Fonts: https://www.typewolf.com/google-fonts

Gleich als zusätzlicher Tipp: Bei diesen 40 Schriftarten hat der Autor die Schriften mit einem * markiert, welche für den Fliesstext geeignet sind:

Die linke Schrift Libre Franklin ist für den Fliesstext geeignet, die rechte Cormorant hingegen nicht.

Diese Liste ist also einerseits eine gute Anlaufstelle, um einfach eine gute Fliesstext Schrift zu finden.

Andererseits ist sie auch ein gutes Beispiel das zeigt, wie Du nur mit einer einzigen Schrift trotzdem einen schönen Kontrast zwischen Titel und Fliesstext haben kannst.

Übrigens, die Website https://www.typewolf.com/ ist generell eine tolle Anlaufstelle um Inspiration und Ideen zu finden.

Inspirationsquelle #4: Etwas kreativere Google Fonts Kombinationen

Hier findest Du 100 kreative Kombinationen von Google Fonts: http://100daysoffonts.com/

Einige dieser „speziellere“ Beispiele kannst Du nicht einfach 1:1 für Deine Website übernehmen.

Aber: Wenn Du aber offen dafür bist etwas zu experimentieren, ist das ein guter Start um einige Ideen zu erhalten.

Inspirationsquelle #5: Schrift Kombinationen von einer „künstlichen Intelligenz“ generieren lassen

Künstliche Intelligenz ist natürlich etwas übertrieben ausgedrückt, aber das Tool FontJoy ist wirklich toll: https://fontjoy.com/

Es kreiert automatisch anhand des Konzepts von Kontrast und Balance Schrift Kombinationen.

Du kannst angeben, wie viel Kontrast/Balance die Kombination haben soll und Dir mit einem Klick neue Vorschläge generieren lassen:

Der Nachteil ist, dass Du nicht angeben kannst, dass Du z.B. eben gezielt eine Serifen Schrift als Titel haben möchtest.

Ausprobieren und etwas Geduld ist also angesagt 🙂

Ausserdem brauchst Du natürlich nur 2 Schriften. Wobei Du natürlich gerne auch 3 Schriften notieren kannst. Wie gesagt, die Regeln sollen Dir helfen, aber sind nicht absolut 🙂

Warum Google Fonts? Bzw. was wären Alternativen zu Google Fonts?

Es gibt einen kleinen Nachteil mit den Google Fonts:

Das es die #1 Anlaufstelle für praktisch alle Webdesigner ist und die Auswahl relativ übersichtlich ist (980 Schriften, als ich diese Lektion schrieb), wirst Du natürlich nicht die einzige Person sein, die eine bestimmte Schriftart verwendet.

Wie gesagt: Das ist aber grundsätzlich kein Problem: Mit den Schriften willst Du genau wie mit den Farben die richtige Stimmung erzeugen. Praktisch kein Besucher wird Dich und Deinen Brand anhand der Schriftart wiedererkennen (oder merken, dass Deine Schriftart auch auf anderen Websites verwendet wird).

Ich empfehle Dir darum ausdrücklich, Dich vorerst auf Google Fonts zu beschränken. Eine noch etwas exklusivere und „bessere“ Schriftart wird keinerlei spürbaren Einfluss auf Dein Projekt haben.

Ich will Dir nur der Vollständigkeitshalber zeigen, was es da draussen noch gibt und warum wir auf Google Fonts setzen (eben weil es einerseits gratis ist und Du es andererseits direkt ohne zusätzlichen technischen Aufwand in Deinem WordPress Theme verwenden kannst).

Hier also 3 Alternativen:

Adobe Fonts (ehemals Typekit) sind in jedem kostenpflichtigen (monatlichen) Adobe Abo inbegriffen (z.B. dem Standard „Photography“ Plan für Adobe Photoshop für 10$ pro Monat). Hat aktuell 1847 verschiedene Schriften. Besonders interessant, weil eben für lediglich 10$ pro Monat (welche man primär eigentlich für die Software Photoshop bezahlt), alle Schriftarten unbegrenzt verwenden kann.

MyFonts.com (der Firma Monotype) liefert die weltweit grösste Auswahl mit über 130’000 verschiedenen Schriften, inklusive Klassikern wie z.B. Baskerville oder Century Gothic). Die Preise starten meistens bei einem einmaligen Fixbetrag von 29$, wobei diese nur bis 10’000 Seitenaufrufen Deiner Website pro Monat gültig ist. Wenn Du mehr Seitenaufrufe pro Monat hast, musst Du eine weitere Lizenz kaufen.

FontSpring.com hat ebenfalls eine riesige Bibliothek mit aktuell 69’000 Schriften. Ähnliche Preise und Lizenzmodell wie MyFonts.com.

Bei entsprechendem Bedarf werde ich natürlich gerne eine Anleitung machen, die zeigt, wie Du Schriften von anderen Quellen technisch auf Deiner Website integrieren kannst (schreibe am besten einfach einen Kommentar am Ende der Lektion).

Die optimale Schriftgrösse und Zeilenlänge für die Lesbarkeit

Neben dem „gut aussehen“ und die richtige Stimmung und Eindruck zu hinterlassen, haben Schriftarten noch ein zweites, genau so wichtiges Ziel:

Die optimale Lesbarkeit Deiner Inhalte.

In einer Zeit, in der jeder Texte nur noch überfliegt, können wir es uns einfach nicht mehr leisten, den Besucher mit einer Wand von Text zu erschlagen.

Und es gibt immer noch viele „künstlerisch“ gestaltete Websites, welche scheinbar keinen Gedanken an so etwas Fundamentales wie die Lesbarkeit der Texte verschwendet hat (ob jetzt bewusst oder unbewusst):

Link: https://www.humbertpoyet.com/about/info

Versteh mich nicht falsch: Keine Frage, diese Beispiel-Website ist wunderschön und als Hochglanzbroschüre tiptop. Aber um Besucher zum Lesen zu bewegen und zu überzeugen sehr ungeeignet (und nebenbei bemerkt aus diesem Grund auch nicht für SEO Zwecke ideal).

Was macht also die Lesbarkeit einer Website aus?

Die 2 wichtigsten Eigenschaften (neben der Schriftart selbst) sind Schriftgrösse & Zeilenlänge.

Für die Schriftgrösse gilt:

Der Fliesstext (Body Text) sollte mindestens 16 Pixel gross sein, besser aber 18 oder 20 Pixel.

Die Zeiten von 10 oder 12 Pixel kleinen Texten, die auf kleine Bildschirme passen müssen, ist definitiv vorbei.

Für die Zeilenlänge gilt:

Für die Zeilenlänge (also nach wie vielen Zeichen eine neue Zeile beginnt) hat sich gemäss verschiedenen Studien 45 bis 85 Zeichen (inklusive Leer- und Satzzeichen) als optimale Länge herausgestellt.

In meinem WordPress Paket hast Du standardmässig ca. 83 Zeichen pro Zeile. Die dort verwendete Schrift „PT Serif“ hat relativ schmale Buchstaben. Sprich, mit einer anderen Schrift wirst Du eher Richtung 60-70 Zeichen kommen – genau in der goldenen Mitte.

Im Beispiel oben ist die Schriftgrösse lediglich 17 Pixel, und werden es je nach Bildschirmauflösung über 200 Zeichen, was das Lesen von längeren Texten äusserst mühsam machen würde.

Auch hier gilt natürlich: Das sind nur grundlegende Richtlinien, keine unumstösslichen Gesetze. Aber mit dieser Faustregel bist Du auf der sicheren Seite und bietest Deinen Besuchern ein angenehmes Leseerlebnis.

Und mit meinem WordPress Paket erhältst Du natürlich genau das grundlegende Design und Struktur, welche auf diese optimale Lesbarkeit ausgerichtet ist:

Verhältnismässig schmale Zeilenlänge, Bilder und Zitate die aber über die Zeilenlänge hinausgehen, und zentrierte Inhalte ohne Sidebar.

Viele moderne und auf Inhalt fokussierte Websites gestalten darum ihre Inhalte in genau dieser Weise (ein bekannteres Beispiel ist Medium.com).

Schau mir über die Schultern

Hier wie ich die Wahl der Schriftart und dann der Schriften angegangen bin:

Zur Erinnerung: Meine 2 Vorzüge der Faszination sind Tiefgang und Innovation.

Zuerst zur Schriftart:

Script und Handwriting Schriften fallen mit diesen Vorzügen eindeutig weg (keine Emotion als Vorzug).

Serif (wegen Tiefgang) und Slab Serif (wegen Innovation) würden grundsätzlich beide passen.

Aber ich entscheide mich für die Titel Schrift einfach für Sans Serif, welches für beide Vorzüge perfekt passt.

Dann die Wahl der konkreten Schriften:

Um Dir auch hier zu zeigen, dass der einfachste Weg zu einem tollen Design führen kann, gehe ich wieder den einfachsten Weg für mein Projekt und wähle einfach eine der auf https://typespiration.com/ gezeigten Schrift Kombinationen (Inspirationsquelle #2).

Mir gefallen diese 2 Beispiele besonders, mit den kräftigen Sans Serif Schriften als Titelschrift:

Es ist auch gleich nochmals ein perfektes Beispiel das zeigt, dass zu einer bestimmten Titel Schriftart (hier eben Sans Serif) sowohl eine Sans Serif als auch Serif Schrift passt.

Mir gefällt ausserdem bei der ersten Variante, dass der Fliesstext eine Serifen Schrift ist. Das passt immer noch perfekt zu meinem Vorzug Tiefgang, weshalb ich mich also für die Schriften Open Sans und Crimson Text entschieden habe 🙂