Guide: Finde die beste Schriftart für deine Webseite
Wie findest du bei der unzähligen Auswahl an Schriften die beste Schrift für deine Webseite? Diese Tipps und Webseiten zur Inspiration helfen dir bei deiner Suche.
Schriftarten sind ein wesentliches Designelement einer Webseite. Eine passende Schrift kann die Gesamtwirkung deiner Webseite verbessern und deine Marke stärken. Typografie kann bei Usern eine bestimmte Stimmung oder ein Gefühl auslösen und so eine positive Nutzererfahrung erzeugen.
Aber wie findet man eine passende Schriftart? Es gibt viele Möglichkeiten, qualitativ hochwertige Schriften zu finden. Unzählige Webseiten bieten riesige Bibliotheken mit verschiedenen Schriften an. Bei der Wahl der Schrift sollten folgende Faktoren berücksichtigt werden:
- Lesbarkeit
- Designwirkung/Ästethik
- Lizenz
- Kosten
In meinem Designprozess beginne ich meistens mit einer Auswahl von 6-10 möglichen Schriften. Durch Ausprobieren in verschiedenen Designs teste ich die Schriftarten auf Designwirkung oder Lesbarkeit. So grenze ich die Auswahl immer weiter ein.
Beginne mit den Grundlagen
Gerade für Anfänger oder Nicht-Designer, ist es oft schwierig, die kleinen Unterschiede zwischen Schriften auszumachen. Oder wenn es darum geht, hochwertige Schriften von langweiligen „Standardschriften“ zu unterscheiden. Wenn du also gar nicht weisst, wie du bei der Schriftauswahl vorgehen sollst, empfehle ich dir folgende Entscheidungskriterien als Hilfestellung:
Schriftgruppen
Schriften werden in verschiedene Schriftgruppen unterteilt. Wähle zunächst eine passende Schriftgruppe, welche am besten das Design deiner Webseite verkörpert. Im Folgenden findest du die wichtigsten Gruppen, in die Schriften heutzutage unterteilt werden:
- Serifen-Schriften: Die Schriften mit den „Schnörkeln“ gelten allgemein eher als klassisch, traditionell und hochwertig
- Sans-Serif-Schriften: Diese Schriften wirken meist modern, minimalistisch oder neutral, weshalb sie gerne im Webdesign verwendet werden
- Script: Diese Schriften sind dem Aussehen von Handschriften nachempfunden. Es gibt sehr viele unterschiedliche Stile, allerdings sollten sie nur sparsam eingesetzt werden
- Dekorativ/Display: Diese Schriften sollten ebenfalls nur sparsam eingesetzt werden. Zum Beispiel für Titel und Überschriften. Das Aussehen reicht von Schreibschriften bis hin zu Monotype und kann einem Design einen aussergewöhnlichen Charakter verleihen
Hilfreiche Webseiten für Inspiration
Ein wichtiger Teil des Designprozesses ist die Recherche und Inspiration. Es gibt viele gute Webseiten mit umfangreichen Schriftsammlungen. Folgende Beispiele sind meine Lieblingswebseiten um Inspiration zu finden:
Fonts In Use
Fonts In Use ist ein riesiges öffentliches Archiv für Typografie. Bei der Webseite werden kleine Vorschaubilder mit Designs gezeigt und darunter die verwendete Schriftart. So bekommt man direkt ein Gefühl zur Schrift und sieht wie diese von anderen Designern verwendet wird.
Im Menü kann nach Branche, Format oder Schriftart gesucht werden. Die Beispiele der Schriften stammen aus ganz unterschiedlichen Designbereichen wie Grafikdesign, Illustration, Print, Werbung, Fashion oder Film/TV.
Fontshare
Fontshare ist eine tolle Alternative zu Google Fonts. Die Platform biete ebenso kostenlose und hochwertige Schriftarten an. Die Schriften sind alle für den persönlichen und kommerziellen Gebrauch geeignet. Im Moment werden 100 verschiedene Schriften angeboten. Fontshare besitzt auch eine grosse Auswahl an variablen Schriften an. Das bedeutet Schriften, die viele verschiedene Gewichtungen, Ausrichtungen und Grössen besitzen. Interessant für jeden Designer und Schriftsuchenden.
Dalton Maag
Dalton Maag ist ein Typeface Design Studio aus der Schweiz. Hinter Dalton Maag steht ein internationales Team von 40 Schriftdesignern, Schriftentwicklern, Kreativdirektoren, Software-Ingenieuren. Die Platform biete eine Bibliothek aus 49 Schriftfamilien. Da alle verfügbaren Schriften kostenpflichtig sind, ist die Webseite eher für Leute geeignet, die auch etwas Budget für ihre Webseite ausgeben möchten.
Fonts in the Wild
Fonts in the Wild ist ebenfalls eine Platform, auf der man die jeweiligen Schriften direkt im Einsatz sieht. Die Schriftbeispiele stammen vor allem von anderen Webseiten. Auf der Seite kann man seine Suche mit „Free Fonts“, „Google Fonts“ oder „Adobe Fonts“ filtern. Wenn du auf eine Schrift klickst, wird dir angezeigt, ob es sich um eine kostenlose oder kostenpflichtige Schrift handelt und wo du diese runterladen kannst.
Typewolf
Typewolf ist die perfekte Webseite, um passende Schriftkombinationen für deine Webseite zu finden. Die Seite zeigt verwendete Schriften von Webseiten und empfiehlt direkt weitere Schriften, die damit kombiniert werden können. Ebenfalls auf der Webseite zu finden sind verschiedene Top-Schriftlisten, Free-Fonts oder Listen für Schriftalternativen.
Wähle eine Hauptschrift
Egal, was du für ein Design entwirfst, du solltest eine primäre Schriftart auswählen. Diese Hauptschrift wird meistens für Überschriften, Titel oder wichtige Absätze verwendet. Deine primäre Schrift sollte also einen wesentlichen Akzent zu deinem Design beitragen.
Die sekundäre Schriftart wird meistens für textlastige Inhalte wie Absätze, Beschreibungen oder Blogartikel verwendet. Während die primäre Schriftart eher auffällig und einzigartig sein sollte, ist für die sekundäre Schriftart hauptsächlich eine gute Lesbarkeit wichtig.
Verwende nie mehr als 3 verschiedene Schriftarten
Eine goldene Regel beim Webdesign lautet: Verwende nie mehr als 3 verschiedene Schriftarten. Das Design deiner Webseite wirkt sonst schnell, sehr chaotisch und unprofessionell. Die meisten Webseiten kommen gut mit einer Schriftart aus. Viele Webseiten verwenden auch eine primäre und sekundäre Schriftart, um etwas Abwechslung zu bieten.
Eine dritte Schriftart könnte für spezielle Elemente wie Buttons oder Logos eingesetzt werden. So kann noch einmal eine besondere Aufmerksamkeit auf Klickflächen gelegt werden. Ich persönlich verwende aber nie mehr als 2 Schriftarten.
Achte auf Ladezeiten
Diesen wichtigen Punkt vergessen viele Websitebesitzer: Eine Schrift auf Webseiten sollte nicht nur gut aussehen und lesbar sein – sie sollte auch schnell geladen werden. Wenn eine Webseite heutzutage nicht schnell geladen wird, verlässt die Mehrheit der Besucher sie gleich wieder. Das wirkt sich wiederum negativ auf die User-Experience aus.
Hier sind einige Tipps, die dafür sorgen, dass deine Schriften schnell geladen werden:
- Beschränke deine Auswahl an Schriften in deinem Design. Je weniger unterschiedliche Schriften du verwendest, desto weniger Daten müssen im Hintergrund geladen werden.
- Verwende nur die Schriftschnitte, die du wirklich benötigst. Jeder eigene Schriftschnitt bedeutet grössere Dateimengen. Meistens kommen Designs mit den Basics wie Kursiv, Regular und Bold aus.
- Hoste die Schriften, wenn möglich, lokal auf deinem eigenen Server. Viele Baukasten-Websitebuilder bauen unnötige Verbindungen zu Fremdservern wie zum Beispiel zu Google Fonts auf (Was aktuell auch gegen die DSGVO-Richtlinien verstösst). Dieser Verbindungsaufbau verzögert zusätzlich die Ladezeit.
Weitere hilfreiche Artikel zum Thema Typografie:
