So wählst du Schriftarten für deine Website aus

Die passenden Schriftarten verleihen deiner Website Persönlichkeit und sorgen für eine visuelle Hierarchie, wodurch sie deine Zielgruppe ansprechen und deine Markenpersönlichkeit definieren. Hier geht es um mehr als nur die Wahl eines Designs; die geeignete Schriftart ist ein starkes Element, das eine Website inspirierender und funktionaler macht. 

Passende Schriftarten für deine Website kannst du finden, wenn du dir ein Grundwissen über Schriften aneignest. Das ermöglicht dir, fundierte Entscheidungen zu treffen und eine optisch attraktive und benutzerfreundliche Website zu erstellen.

Schriftarten

Die geeignete Schriftart kann viel bewirken und den für Besucher:innen deiner Website perfekten Ton bestimmen. Es gibt verschiedenen Schriftartenfamilien, die sich aus sogenannten Schriftstilen zusammensetzen. Hier sind die drei wichtigsten Schriftstile, die du in Betracht ziehen solltest.

1. Serif

Sind dir schon mal diese kleinen Schnörkel aufgefallen, die sich bei manchen Schriftarten an den Enden von Buchstaben befinden? Sie werden als Serifen bezeichnet. Betrachte sie als kleine dekorative Details, die ein bisschen Persönlichkeit und Eleganz verleihen.

Ein einfaches großes „A“ wird beispielsweise durch „Füßchen“ zu einem „A“ in Serifenschrift. Serifenschriftstile werden traditionell als „Roman“ bezeichnet. Zu den wichtigsten Merkmalen von Serifenschriftarten gehören:

• Autorität: Ein Serifenschriftstil eignet sich am besten für Websites, die ein hohes Maß an Professionalität, Fachkompetenz und Autorität vermitteln müssen.

• Seriöse Persönlichkeit: Diese Schriftartenfamilien sind ideal für Anwaltskanzleien, Krankenhäuser, Berater:innen, Finanzmakler:innen, Anbieter:innen von Dienstleistungen für Unternehmen etc. 

• Lesefreundlich: Sie eignen sich auch hervorragend für Websites mit vielen Inhalten, wie Blogs.

• Klassischer Stil: Serifenschriftarten verleihen deiner Website ein klassischeres und eleganteres Aussehen.

2. Sans Serif

„Sans“ ist das französische Wort für „ohne“. Sans Serif bezieht sich also auf Schriften ohne diese zusätzlichen Striche – anders ausgedrückt: ohne Serifen. Auf unserer Blog-Website verwenden wir zum Beispiel eine serifenlose Schriftart. Serifenlose Schriftarten haben ein paar gemeinsame Merkmale.

• Moderner Stil: Serifenlose Schriftstile eignen sich am besten für Websites, die in erster Linie einladend und zugänglich sein sollen oder die vermitteln wollen, dass sie modern, innovativ und unkompliziert sind.

• Kreativ und offen: Diese Schriftartenfamilien eignen sich hervorragend für Künstlergalerien, technische Dienstleistungen, Pflegedienste, Dienstleistungen für zu Hause, Bildungseinrichtungen und Blogger:innen. 

• Zugänglicher Ton: Serifenlose Schriftarten lassen deine Website ungezwungen wirken, sodass sich Besucher:innen willkommen und selbstbewusst fühlen, was ihnen das Navigieren erleichtert.

3. Script

Der als Script bekannte Schriftstil erinnert an eine natürliche Handschrift und eignet sich hervorragend, um deiner Website eine individuelle Note zu verleihen. 

Script-Schriftstile sind vielleicht nicht die beste Wahl für lange Absätze, aber sie machen sich gut als Überschriften. Zu den gängigen Anwendungen für Script-Schriftarten gehören:

• Hervorhebung: Der Script-Schriftstil sorgt für eine besondere Note und lenkt die Aufmerksamkeit auf wichtigen Text. 

• Eleganter Stil: Script-Schriftarten können Elemente auf Websites aus den Bereichen Reisen, Hochzeiten, Gastgewerbe, ganzheitlichen Wellness und Kulinarik hervorheben.

• Verspielt und filigran: Diese Schriftarten verleihen jeder Website etwas Verträumtes, indem sie direkt die Emotionen der Besucher:innen ansprechen.

Erfahre, wie du mit einfachem Code eine Script-Schriftart hinzufügst, um etwas hervorzuheben

Gestaltung der ausgewählten Schriftarten

Die Wahl der passenden Schriftarten umfasst mehr als nur die Wahl des geeigneten Schriftstils. Du solltest auch die Schriftstärke, die Schriftgröße, den Zeichenabstand und den Stil berücksichtigen. 

Sie helfen Nutzer:innen, deine Botschaft zu verstehen, indem sie eine visuelle Hierarchie schaffen und für eine gute Übersicht sorgen. Wenn Text beispielsweise größer, fetter oder in einer anderen Farbe oder einem anderen Stil ist, ist es wahrscheinlicher, dass er die Aufmerksamkeit auf sich zieht und daher in der visuellen Hierarchie einer Seite höher angesiedelt ist. 

Erfahre, wie du Schriftarten auf Squarespace gestalten kannst

Schriftstärken

Die Schriftstärke bezieht sich darauf, wie dick oder dünn die Buchstaben dargestellt sind. Diese Werte reichen von dünn (100) bis extra fett (900). Die Schriftstärken für Überschriften liegen in der Regel zwischen 500 und 900, während für Absätze normalerweise eine Schriftstärke von 400 gewählt wird.

Schriftgröße

Schriftgrößen wirken sich darauf aus, welcher Text auf einer Webseite Aufmerksamkeit erregt und wie gut lesbar er ist.

Strebe eine Schriftgröße zwischen 14 und 19 Pixeln an. Damit bietest du die beste Lesbarkeit. Setze außerdem deine Schriftgröße für Absatz 2 auf 1 rem. Alle anderen Schriftgrößen werden von dieser Basisgröße aus extrapoliert. „Rem“ ist eine spezielle Einheit, mit der sich deine Textgröße auf verschiedenen Bildschirmen automatisch anpassen lässt.

Squarespace skaliert deine Schriftgrößen automatisch und stellt auf diese Weise sicher, dass wichtige Elemente wie Überschriften hervorstechen.  Es verwendet auch ganz von selbst geeignete Größen, aber du solltest bei der Anpassung deiner Website trotzdem darauf achten.

Zeichenabstand

Das Anpassen des Zeichenabstands kann die Lesbarkeit verbessern, besonders bei Überschriften oder großen Textblöcken. Bei Überschriften und Buttons kannst du es sogar mit leicht negativen Zeichenabständen versuchen (bis zu -0,06). Denke nur daran, dass Lesbarkeit und Scannbarkeit Priorität haben. Dazu wirst du gleich mehr erfahren.

Schriftart-Stile

Verwende Kursivschrift, Fettschrift oder Unterstreichungen sparsam, um bestimmte Wörter oder Ausdrücke hervorzuheben. Du könntest zum Beispiel durch eine Unterstreichung das Wort „neu“ hervorheben, wenn du einen neuen Online-Kurs anbietest, oder ein wichtiges Projekt in den Fokus rücken, das du gerade zu deiner Startseite hinzugefügt hast. Wenn du diese Stile zu oft verwendest, kann dein Text unübersichtlich wirken und schwer lesbar sein.

Überlegungen zur Barrierefreiheit

Denke daran, dass deine Schriftarten für alle leicht lesbar sein sollten. Hier sind einige wichtige Überlegungen zur Barrierefreiheit, die es zu berücksichtigen gilt.

• Kontrast: Achte darauf, dass sich deine Text- und deine Hintergrundfarbe ausreichend unterscheiden. Ist der Kontrast zu gering, leidet die Lesbarkeit. 

• Lesbarkeit: Deine Schriftarten sollten auf jeder Bildschirmgröße leicht lesbar sein. Einfachere und angemessen dimensionierte Schriftarten machen deine Inhalte für Besucher:innen gut lesbar.

Zusammenfassung:

• Halte die Grundschriftgröße zwischen 14 und 19 px.

• Lass Absatz 2 bei 1 REM.

• Verwende für Überschriften eine Schriftstärke von 500 bis 900, idealerweise 600.

• Beginne bei der Schriftstärke des Textkörpers mit 400, eine Zeichenabstand von 0 und einer Zeilenhöhe von etwa 1,4 bis 1,9.

Diese Einstellungen optimieren deine Seiten im Hinblick auf die Lesbarkeit. Das ist für den Aufbau deines Publikums von entscheidender Bedeutung, weil Besucher:innen eher mit qualitativ hochwertigen Inhalten interagieren, wenn diese leicht lesbar sind.

Auswahl deiner Schriftarten: zu berücksichtigende Faktoren

Jetzt, wo du ein Gespür für den Einsatz von Schriftarten mit und ohne Serifen sowie ein besseres Verständnis von Schriftstärken, -größen und -stilen hast, sollten wir das Gesamtbild betrachten. Welche Faktoren solltest du bei der Auswahl deiner Schriftarten berücksichtigen?

Markenidentität

Deine Schriften sollten die Persönlichkeit und die Werte deiner Marke widerspiegeln. Bist du verspielt und modern oder klassisch und elegant? Vermittle das durch deine Schriftarten.

Ein modernes HIIT-Trainingsstudio mit starker Persönlichkeit und einem starken Ton möchte vielleicht serifenlose Schriften mit hoher Schriftstärke verwenden. Ein:e Massagetherapeut: könnte hingegen eine Schriftart mit oder ohne Serifen und geringer Stärke wählen, um die luftige und friedliche Atmosphäre der Praxis aufzugreifen.

Lesbarkeit

Letztlich sind die besten Schriftarten für deine Website solche, die die Augen schonen. Wenn Besucher:innen ihre Augen zusammenkneifen müssen, um deinen Inhalt zu lesen, oder wenn die Schrift zu ausgefallen ist, klicken sie wahrscheinlich weg.

Halte die Besucher:innen bei der Stange, indem du ihnen das Lesen und das Erkennen einzelner Buchstaben und Wörter leicht machst. Setze nicht auf etwas, das deiner Meinung nach Eindruck macht, sondern lege lieber Wert auf sehr gut lesbare Schriftarten, insbesondere beim Textkörper. 

Wenn du dich zwischen zwei Schriftarten entscheiden musst, probiere jede auf einer Beispielseite aus, die du gerade erstellst, und frage dich: „Wie leicht fällt das Lesen des Textes?“ Wähle die Schriftart, die am leichtesten lesbar ist. 

Schriftart-Kombinationen

Kombiniere Schriftarten, um ein visuell ansprechendes und einheitliches Design zu kreieren. Beispielsweise kann ein fetter, serifenloser Schriftstil in Kombination mit einem Serifenschriftstil elegant und modern wirken.

Achte beim Kombinieren von Schriftarten auf einer Seite immer auf Konsistenz, Ausgewogenheit und einen guten Fluss von oben nach unten. 

Die auf Squarespace integrierten Schriftartenkombinationen sind ein guter Ausgangspunkt, um dir bei der Auswahl einer Kombination zu helfen, die zu deiner Markenidentität und deinen Zielen passt. Es handelt sich um professionell zusammengestellte Kombinationen, die mit Sicherheit attraktiv und professionell aussehen werden. 

Scannbarkeit

Die Leute lesen normalerweise nicht alles, was auf einer Seite steht. Sie scannen den Text auf der Suche nach wichtigen Informationen. Wenn sie diese finden, lesen sie den Text möglichweise noch einmal gründlicher. 

Verwende eine Schriftart, die es den Leuten leicht macht, deine Seite zu überfliegen, um das zu finden, was sie brauchen. Verwende klare Überschriften, Unterüberschriften und Aufzählungspunkte, um die Scanbarkeit deiner Seite zu verbessern. 

Größe auf verschiedenen Geräten

Deine Schriftart sieht auf einem Desktop vielleicht toll aus, aber gilt das auch für die Darstellung auf Mobilgeräten? Deine Schriftarten müssen sich gut skalieren lassen und auch auf kleineren Bildschirmen lesbar bleiben. Vergiss nicht, dir eine Vorschau deiner Website auf Tablets und Mobilgeräten, aber auch auf großen Bildschirmen wie Desktop-Monitoren anzusehen.

Sieh dir weitere Tipps zur Auswahl von Designmerkmalen für deine Website an

Finde deine perfekte Schriftart

Squarespace bietet eine große Auswahl an Schriftarten, mit denen du deine Website optimal gestalten kannst. Das Menü mit den Website-Stilen ist dein Tor zu einer Welt voller wunderschöner Schriftarten. Experimentiere und entdecke diejenigen, die die Vision deiner Website zum Leben erwecken. 

Um dir den Einstieg zu erleichtern, haben wir ein paar Favoriten ausgewählt, die deiner Website einen modernen und ansprechenden Touch verleihen.

Sans Serif

• Nunito Sans

• Manrope

• Dela Gothic One

• Work Sans

• Inter

• DM Sans

• Poppins 

• Fairwater Sans

Serif

• Young Serif

• Baskerville Display PT

• Fino

• Dapifer

• Sirenne Eighteen MVB

• Playfair Display

• Ohno Fatface

Du kannst Script- und „Hidden Gem“ -Schriftarten erkunden, indem du auf einer Squarespace-Website auf einen beliebigen Text klickst und dann Familie und Alle Schriften durchsuchen auswählst. 

Script

• Imperial Script

• Scriptorama Markdown JF

• Luxurious Script

• Livermore Script ATF Rough No. 1

• Sketchnote Text

Hidden Gem

• Outfit 

• Arboria

• DM Sans 

• Ambroise Stad Francois 

• Alverata

• Arno Pro Display

• Cabin condensed

• Lexia Advertising

• Worthington Arcade

• Worker

• Space Grotesk

• Runda

• Sora

• Objective Mk2

Bei der Auswahl der geeigneten Schriftarten für deine Website geht es darum, die perfekte Balance zu finden: Sie soll die Persönlichkeit deiner Marke ausdrücken und deinen Besucher:innen gleichzeitig ein hervorragendes Erlebnis bescheren. 

Probiere Kombinationen aus, um die perfekte Lösung für deine Website zu finden. Mit den passenden Schriften wird deine Website nicht nur umwerfend aussehen, sondern auch einen bleibenden Eindruck hinterlassen.