Website-Schriften: So findest du die passende Schrift für deine Website

15. Juni 2023
Lesedauer: 5 Minuten
Wenn du eine Website erstellt gibt es viele gestalterische Entscheidungen, die du im Vorfeld treffen musst. Dazu gehört auch die Wahl der geeigneten Schriften für deine Website.

Denn wie du vielleicht schon ahnst, gibt es an einer Website.

Das Thema Schriften ist gar nicht so einfach und ein sicherer Umgang damit erfordert viel Erfahrung. 
In diesem Beitrag möchte ich auch gar nicht so sehr in die Geschichte der Schriften eintauchen, sondern dir viel:mehr Tipps an die Hand geben, worauf du bei der Auswahl deiner Schriften auf deiner Website achten solltest.
 
Los geht’s!

Wie viele Schriften brauche ich für meine Website?

Auf einer Website hast du unterschiedliche Textarten:

Überschriften

Überschriften dienen dazu, den Inhalt einer Seite oder eines Abschnitts zusammenzufassen und die Aufmerksamkeit der Leser zu erregen. Sie werden oft in größeren Schriftgrößen und in fett oder kursiv dargestellt.

Fließtext

Fließtext ist der Hauptinhalt einer Website und besteht aus zusammenhängenden Absätzen und Sätzen. Er liefert detaillierte Informationen, Erklärungen oder Beschreibungen zu einem bestimmten Thema.

Unterüberschriften

Unterüberschriften werden verwendet, um den Fließtext in Abschnitte oder Themenbereiche zu gliedern. Sie sind in der Regel kleiner und weniger hervorgehoben als Hauptüberschriften, aber größer und fettgedruckt als normaler Fließtext.

Zitate

Zitate können auf einer Website verwendet werden, um besondere Aussagen, Expertenmeinungen oder inspirierende Texte hervorzuheben. Sie können in Anführungszeichen gesetzt oder durch Einrückungen oder Hervorhebungen visuell hervorgehoben werden.

Listen

Listen, wie zum Beispiel Aufzählungen oder nummerierte Listen, helfen dabei, Informationen übersichtlich und leicht verständlich darzustellen. Sie werden verwendet, um Punkte, Merkmale, Anleitungen oder Schritte aufzulisten.

Call-to-Action (CTA)

CTAs sind spezielle Texte oder Buttons, die die Benutzer dazu auffordern, eine bestimmte Aktion auszuführen, wie z.B. einen Newsletter abonnieren, ein Produkt kaufen oder Kontakt aufnehmen. Sie sind oft kurz und prägnant formuliert, um die Benutzer zum Handeln zu motivieren.

An alle hier aufgezählten Textarten gibt es eine andere Anforderung. Überschriften z.B. sollen direkt auffallen und als erstes gelesen werde. Fließtexte müssen gut lesbar sein, Zitate vermitteln eine persönliche Note.
 
Aus diesem Grund empfehle ich dir mindestens zwei verschiedene Schriftarten für die Überschriften & Fließtexte zu wählen. Allerdings würde ich nicht mehr als maximal drei Schriftarten miteinander kombinieren.

Welche Unterschiedlichen Schriftgruppen gibt es?

Schriftarten sind in unterschiedlichen Gruppen gegliedert. Hier geb ich dir einen Überblick der gängigsten Schriftgruppen und ihrer Wirkung

Serifenschriften

Element 2Melone
Diese Schriften haben an den Enden die Serifen (die aussehen wie kleine Häkchen).

Sie wirken:
  • traditionell
  • altmotisch
  • bodenständig
 

Serifenlose Schriften

Element 3Melone
Sind gerade geschnitten und ohne Serifen an den Enden.
 
Sie wirken:
  • neutral
  • nüchtern
  • rational
  • modern

Schreibschiften

Element 4Melone
Geschwungene & Formale Schriften.

Sie wirken:
  • förmlich
  • elegant
  • gehoben


Freie Handschriften

Element 5Melone 1
Geschwungene und Charakterstarke Schriften wie “von Hand” geschrieben.

Sie wirken:
  • menschlich
  • persönlich
  • kindlich

Die Wirkung ist hier sehr pauschal beschrieben und soll dir nur einen ersten Eindruck vermitteln, wie einer Schrift einen Charakter zugesprochen wird.

Welche Anforderungen gibt es an Website-Schriften?

Wie in der Einleitung bereits erwähnt gibt es für jeden Anwendungsbereich unterschiedliche Anforderungen an Schriften.
 
Die Anforderungen an Zeitungs-Schriften sind andere wie an Schriften, die du für ein Buch verwendest. Schriften für digitale Interfaces müssen anderen Kriterien Standhalten wie Schriften für ein Plakat.
Wenn du z.B. ein Buch schreibst, soll die Schrift gut lesbar und möglichst unauffällig sein. Sie ordnet sich dem Text unter und hat keine auffälligen Charaktereigenschaften.
 
Und welche Anforderungen gibt es jetzt speziell an Website-Schriften?

Bildschirmauflösung

Die große Herausforderung an Website-Schriften sind Pixel & die unterschiedlichen Bildschirmauflösungen. Je nachdem von welchem Gerät (Smartphone, Bildschirm, Retina-Display) deine Website betrachtet wird, wird die Schrift anders dargestellt. Du kennst wahrscheinlich noch pixelige Darstellung wie diese hier:

Element 1Melone

Bildschirmauflösungen werden in Zeiten von Retina Displays immer besser, dennoch dürfen wir nicht außer Acht lassen, dass noch ganz viele unterschiedliche Bildschirmauflösungen im Umlauf sind.

Platz

In Deutschland werden rund 84% der Internetaufrufe von einem Smartphone getätigt. (Quelle Statista). Was bedeutet das die Schriften weniger Platz zur verfügung haben. Sie brauchen viel Platz auf kleinem Raum und sollen gut lesbar sein.

Dynamische Layouts

Es gibt kein festes Layout bei Websites sondern die Anforderung, dass Websites responsiv sein müssen. Das heißt, dass die Schriften in unendlich vielen Darstellungsformen gut lesbar sein müssen.

Lizenzkosten

Ein wichtiger Punkt sind die Lizenzkosten. Denn viele Schriften haben je nach Website-Aufrufe oder verwendung (Website, App, Ads) eigene Lizenzkosten. Die sollten ebenfalls mit Berücksichtigt werden.

Welche Schriften eignen sich für meine Website?

Eine gute Nachricht vorweg. Du kannst für deine Website Serifenlose und Serifenschriften verwenden. Früher ging die Empfehlung klar zur Serifenlosen Schrift. Durch die schlechte Auflösung mancher Bildschirme konnte man Serifenschriften nicht gut lesen. Da die Auflösung der Schriften immer besser wird, sind Serifen kein großes Problem mehr.

Serifenschriften

Wenn du Serifen Schriften verwendest. Dann achte Darauf, dass die Serifen nicht zu dünn sind, sondern auch deutlich erkennbar sind. Wenn die Serifen zu dünn sind, verschwimmt das Bild und sie sind nicht gut lesbar. 

Element 2Melone 1

Gut geeignete Serifenschriften: Georgia, Droid Serif Regular, Adelle Regular, Baskerville, Playfair Display

Schmale Schriften

Schmale Schriften eignen sich mehr als Breite Schriften, da sie weniger  Platz brauchen. Hier siehst du als Beispiel zwei Serifenlose Schriften (Links Montserrat und rechts Open Sans) Textlänge und Größe sind gleich. Montserrat verbraucht viel mehr Platz, was die mobile Nutzung negativ beeinträchtigt

Element 4Melone 1

Gut geeignete Serifenlose Schriften: Lato, Open Sans, Verdana, Karla, Noto Sans

Linienstärke

Schriften bei der die Linienstärke stark varriert sind ebenfalls nicht gut für Websites geeignet. Teste die Schrift immer auf verschiedenen Hintergründen um zu prüfen, ob die Schrift auch unter verschiedenen Bedingungen gut lesbar ist. 

Element 5Melone 2

Akzentschriften

Schreibschriften oder freie Handschriften geben deinen Texten nochmal eine ganz persönliche Note. 

Wenn du auf der Suche nach Schreibschriften bist, dann ist es wichtig eine Schrift zu wählen, die Lesbar ist. 

Achtung!
Bei freie Handschriften wird man ganz schnell Betriebsblind was die Lesbarkeit betrifft. Zeige Texte unbedingt einer 3. Person, um zu prüfen, ob sie für andere ebenfalls lesbar ist. 

Setze Schreibschriften in Maßen ein! 
Am besten nutzt du die Schrift für kurze Zitate oder um einzelne Worte hervorzuheben. 
Lange Sätze sind schwer lesbar.

Hilfreiche Website

Wenn es dir schwer fällt geeignete Schriftpaare zu finden, empfehle ich dir Websites wie z.B. fontpair.co
Dort bekommst du viele passende Fontkombinationen angezeigt. 

Wenn du auf der Suche nach kostenlosen Fonts bist, dann ist Google Fonts eine gute Anlaufstelle. Beim verwenden von Google Fonts solltest du darauf achten, dass sie Lokal eingebunden sind und nicht direkt von der Website verknüpft werden. Hier findest du meinen Blog Beitrag dazu

Kostenpflichtige Fonts findest du auf Seiten wie Creative Market, MyFonts oder Envato Elements

Die Lesbarkeit der Texte ist das A und O auf deiner Website. Am Besten du probierst potenzielle Schriften direkt auf verschiedenen Endgeräten aus, um einen guten Eindruck von der Schrift zu bekommen. 

Ich wünsch dir viel Freude beim probieren und finden deiner passenden Website Schrift!

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du einmal monatlich vielmehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

Stefanie Friedel1

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar
Webdesignerin

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Inhalt

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar

Child Theme

Ein “Child Theme” ist eine Art von WordPress-Theme, das die Funktionalität und das Design eines anderen Themes, des sogenannten “Parent Themes”, erbt und erweitert. Es ermöglicht dir, Anpassungen am Design oder an der Funktionalität deiner Website vorzunehmen, ohne das ursprüngliche Parent Theme zu verändern. So bleiben deine Änderungen auch nach einem Update des Parent Themes erhalten. Child Themes sind besonders nützlich, wenn du Anpassungen am Code vornehmen möchtest, ohne das Risiko einzugehen, dass deine Änderungen bei einem Update des Hauptthemes verloren gehen.

Website-Checkliste

Hole dir die
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein