7 Tipps für eine saubere Webtypografie
Lesezeit: 5 Minuten
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.
Besuche uns auf LinkedIn.
Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!
LInkedIn ProfilAnmeldung zu dem medani-Newsletter
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.