medani Newsletter

Immer am
neuesten Stand.

Die digitale Welt ist ständig im Wandel.
Mit unserem kostenlosen Newsletter bleibst du nicht nur immer auf dem Laufenden, sondern erhältst monatlich spannende Insights aus der Digitalbranche und der Welt rund um WordPress, PrestaShop, E-Commerce, Marketing, Design und vielen weiteren interessanten Themen.
Trag dich gleich ein!

Bei Deiner Anmeldung ist leider einer Fehler aufgetreten. Bitte versuche es erneut.
Deine Anmeldung war erfolgreich!
Post Animation

Hiermit stimme ich zu, dass meine personenbezogene Daten, nämlich meine E-Mailadresse, für den Newsletterversand von der medani gmbh verarbeitet werden dürfen und ich zu diesem Zweck kontaktiert werden darf. Mehr Infos unter unseren Datenschutzrichtlinien.*

top
Home / Blog

7 Tipps für eine saubere Webtypografie


Lesezeit: 5 Minuten
Michael Heindl

Beim Schlagwort „Webdesign“ denken viele erstmal an Grids, Responsive Design, Farben, UI-Elemente usw. Das Stiefkind, die Webtypografie, wird oft gar nicht so richtig beachtet und wird häufig als „nur eine Schriftart“ in den Hintergrund gerückt.

LinkedIn

Besuche uns auf LinkedIn.

Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!

LInkedIn Profil

Webtypografie

In den Sozialen Medien dominieren Bilder, animierte GIFs oder Videos, aber Text spielt immer noch die Hauptrolle, wenn es darum geht Inhalte zu konsumieren oder Informationen zu extrahieren. Die gewählte Typografie ist mitentscheidend für eine gute User Experience und führt dazu, dass die User den Inhalt intensiver lesen und somit auch mehr Zeit auf der Webseite verbringen. Dementsprechend ist eine visuell ansprechende Gestaltung des Textes ein wichtiger Faktor, wenn es um das Design einer Webseite geht.

Typografie ist eine Wissenschaft für sich, und dieses komplexe Thema mit nur sieben Tipps abzuhandeln grenzt schon fast an eine Beleidigung für einen Type-Designer. Versteht diese Tipps also als eine Art Ergänzung, um eure Inhalte leserlich und leicht lesbar darzustellen. Vorrausetzung ist, dass ihr euch schon etwas mit Webdesign bzw. mit Fonts auskennt und nicht mehr ganz neu auf dem Gebiet seid. Für totale Anfänger haben wir jedoch eine kleine Serie von Beiträgen (Webdesign 101) in Planung, um auch Beginnern dieses Thema und Best Practices näher zu bringen.

Smart kombinieren

In reinen Textdokumenten reicht meist eine einzige Schriftart aus. Seinen Webauftritt will man aber etwas lebendiger gestalten, deshalb kombiniert man zwei oder mehr Schriftarten miteinander. Hier sollte man sich aber selbst Grenzen setzen, denn zu viele verwendete Schriften erzeugen eher Unstimmigkeiten. Ein universelles Rezept, was zu was passt, gibt es leider nicht. Hier muss man probieren, und am Ende auf (s)ein geschultes Auge vertrauen. Dennoch, in den häufigsten Fällen kombiniert man Schriften mit Serifen und serifenlose Schriften miteinander. Fonts mit Serifen wirken dekorativer und verspielter und werden deshalb gerne für Überschriften verwendet. Serifenlose Schriften sind formal reduziert und wirken dadurch etwas strukturierter, weshalb sie sich für Texte anbieten.

Weboptimierte Fonts

Viele Fonts liegen mittlerweile als WOFF (Web Open Font Format) vor und sind somit für den Bildschirmeinsatz geeignet. Steht man nun vor der Qual der Wahl, solltet ihr einerseits auf die Lesbarkeit (readability) und andererseits auf die Leserlichkeit (legibility) eurer künftigen Schriftart achten. Die Lesbarkeit beschreibt, wie gut sich ein Text lesen lässt, die Leserlichkeit beschreibt wie gut die einzelnen Buchstaben unterscheidbar sind.

Die richtige Schriftgröße

Im Laufe der Zeit haben sich am Desktop 15px oder 16px für Bodytexte durchgesetzt. Für Smartphones kann es etwas weniger sein, da man das Smartphone meist näher an die Augen hält. Die Größe der Überschriften sollte in etwa 180 bis 200 Prozent des Bodytextes betragen (Hier verwenden wir gleich relative Schriftgrößen). Sublines sind meist 130 bis 150 Prozent größer als der Bodytext. Diese Werte sind natürlich nur Empfehlungen, da die Proportionen von Schriften oft unterschiedlich ausfallen.

Relative vs. absolute Schriftgröße

In den meisten Fällen empfiehlt es sich, die Schriftgröße in CSS nicht in Punkt oder Pixeln, sondern in einer relativen Größe (em, rem oder Prozent) anzugeben. Dies hat den Vorteil, dass die Größen somit voneinander abhängig sind und man für Anpassungen nur einen Wert im Stylesheet ändern bzw. anpassen muss, um das Gesamterscheinungsbild zu verändern. Außerdem bleibt das Verhältnis der Schriftgröße zueinander über alle Devices hin erhalten.

Zeilenlänge & Zeilenabstand

Zeilen die aus mehr als 70 Zeichen bestehen, sind in den meisten Fällen nicht empfehlenswert. Zu lange Zeilen beeinflussen die Lesbarkeit negativ, da der Sprung zur nächsten Zeile zu groß ist. Zusammen mit einem passenden Zeilenabstand entsteht so ein harmonisches Schriftbild, das den Lesekomfort steigert. Die Hauptaufgabe des Zeilenabstandes ist es, das Auge bei der Suche nach der nächsten Zeile zu unterstützen. Auf Bildschirmen gilt, bei einer Schriftgröße von 16px, ein Zeilenabstand von 130 bis 160 Prozent als ideal. Der Zeilenabstand und die -länge ist jedoch auch von der gewählten Schriftart abhängig, weshalb diese Werte ebenfalls als Empfehlung anzusehen sind.

Hierarchie

Ihr habt eure Schriftart, -größe, Zeilenabstand und -länge nun angepasst, jetzt fehlt nur noch der Inhalt. Zur besseren Gliederung und Lesbarkeit des Textes, kommen nun Haupt- und Zwischenüberschriften ins Spiel. Je nach Wichtigkeit und Bedeutung werden die verschiedenen H-Formate (H1-Hn) genutzt, um dem Leser eine schnelle Übersicht über die Thematik zu verschaffen. Ein gut gegliederter Text mit Unterüberschriften wird garantiert lieber gelesen als eine reine Textwurst ohne Struktur und Gliederung, also macht euch bei eurem Thema auch über den Aufbau des Textes Gedanken.

Kontrast

Habt ihr euren Text nun fertig, bleibt noch der Kontrast bzw. die Farbe über. Fließtexte brauchen für eine gute Lesbarkeit einen hohen Kontrast von Schrift- zu Hintergrundfarbe. Der Klassiker, schwarze Schrift auf weißem Hintergrund, ist am Bildschirm aber häufig zu hart. Angenehmer ist beispielsweise dunkelgraue Schrift auf einem leicht getönten Hintergrund. Aufgrund des erzeugten Flimmerns sollte auf Komplementärkontraste verzichtet werden. Da es außerdem recht viele Menschen mit einer Rot-Grün Sehschwäche gibt, sind Rot-Grün Kontraste ebenfalls nicht sehr empfehlenswert.

Weiterer Tipp

Falls ihr mehr zu diesem Thema mehr erfahren wollt, empfehlen wir die Seite des Deutschen Blinden- und Sehbehindertenverbandes. Dort findet man sehr ausführliche Informationen, einen Kontrast- und Schriftgrößenrechner sowie allgemeine Infos rund um die Webtypografie.

Tags
eingeschneites Prozent Zeichen in Pixel-Optik

Es schneit Prozente

Adventzeit ist Sparzeit! Bis zum 18.12.2024 gibt’s -9% Rabatt auf Dein nächstes Guthabenpaket! Ob für einen Start mit frischem Schwung ins neue Jahr oder ein bereits geplantes Projekt: Hol Dir Deinen Rabatt, bevor die Aktion verfliegt. Nenne einfach den Rabattcode xmas 2024 bei Deiner nächsten Bestellung.

9% Rabatt auf ein Guthabenpaket Deiner Wahl.