Typografie macht 90 % des Webdesigns aus – der Rest ist nur Dekoration.
Typografie – die Kunst, Text zu arrangieren – ist das wichtigste Element des Webdesigns, da die meisten Informationen online über Texte kommuniziert werden. Gute Typografie ist unsichtbar; Der Leser konzentriert sich auf den Inhalt, nicht auf die Schriftart. Schlechte Typografie fällt sofort auf und schadet der Glaubwürdigkeit. Laut einer Studie von Adobe aus dem Jahr 2025 geben 73 % der Verbraucher an, dass sie nicht auf einer Website mit schlechter Typografie kaufen würden.
Bei x13apps betrachten wir Typografie als Eckpfeiler jedes Designs. Hier sind die Grundsätze, die uns bei der Auswahl unserer Schriftarten leiten.
Begrenzen Sie Ihre Schriftartenauswahl
Verwenden Sie auf jeder Website maximal 2-3 Schriftarten. Eine für Überschriften, eine für den Fließtext und möglicherweise eine für Akzente oder besondere Zwecke. Die Verwendung zu vieler Schriftarten führt zu visuellem Chaos. Wählen Sie Schriftarten, die sich gegenseitig kontrastieren – eine Serife für Überschriften und eine Sans-Serife für den Fließtext sorgen für eine klare Hierarchie und visuelles Interesse.
Google Fonts bietet Hunderte kostenloser, weboptimierter Schriftarten. Beliebte Paarungen sind Playfair Display mit Source Sans Pro oder Inter mit Merriweather. Erwägen Sie für professionelle Projekte lizenzierte Schriftarten von Typekit oder Hoefler&Co.
Priorisieren Sie die Lesbarkeit
Der Textkörper sollte mindestens 16 Pixel groß sein (18–20 Pixel sind für die Lesbarkeit auf modernen Bildschirmen besser). Für ein angenehmes Lesen sollte die Zeilenhöhe das 1,5- bis 1,8-fache der Schriftgröße betragen. Die Zeilenlänge sollte 50–75 Zeichen pro Zeile betragen – längere Zeilen ermüden die Augen und kürzere Zeilen stören den Fluss. Verwenden Sie einen ausreichenden Absatzabstand, um Ideen visuell zu trennen.
Streben Sie ein starkes Kontrastverhältnis zwischen Text und Hintergrund an – mindestens 4,5:1 für normalen Text und 3:1 für großen Text (WCAG AA). Vermeiden Sie hellgrauen Text auf weißem Hintergrund, egal wie trendy er aussieht. Wenn Benutzer Schwierigkeiten haben, Ihre Inhalte zu lesen, verlassen sie die Website.
Erstellen Sie eine klare typografische Hierarchie
Benutzer scannen, bevor sie lesen. Eine klare Hierarchie mit unterschiedlichen Schriftgrößen, -stärken und -farben lenkt das Auge und vermittelt die relative Bedeutung von Informationen. Überschriften sollten deutlich größer und fetter als der Fließtext sein. Verwenden Sie eine modulare Waage für einheitliche Größenverhältnisse.
Berücksichtigen Sie Leistung und Zugänglichkeit
Benutzerdefinierte Schriftarten wirken sich auf die Ladezeit der Seite aus. Verwenden Sie „font-display: swap“, um sicherzustellen, dass der Text beim Laden der Schriftart sichtbar bleibt. Unterteilen Sie die Schriftarten so, dass sie nur die Zeichen enthalten, die Sie benötigen. Ziehen Sie variable Schriftarten in Betracht, die mehrere Strichstärken in einer einzigen Datei kombinieren. Stellen Sie sicher, dass die Größe des gesamten Texts um 200 % geändert werden kann, ohne dass das Layout beschädigt wird. Verwenden Sie für die Schriftgrößen relative Einheiten (rem, em) anstelle von Pixeln. Bei x13apps wählen und implementieren wir Typografie, die sowohl die Ästhetik als auch die Lesbarkeit verbessert. Weitere Informationen finden Sie in unseremLeitfaden zur Farbpsychologie.