Effektive und individuelle Webtypografie mit CSS

Jeder Webentwickler und Webinhaber ist bei seinen Texten auch bestmögliche Lesbarkeit bedacht. Wichtig ist dabei natürlich die Wortwahl, Rechtschreibung, Satzlänge und viele andere. Die Webtypografie, also u.a. die Schriftart und Schriftgestaltung wird allerdings öfter vernachlässigt, als man glauben würde. CMS bieten oft zwar einige Base-layouts und Vorlagen unter denen man auswählen. Und für viele ist das dann auch schon der vermeintlich notwendige Aufwand. Dies greift aber oftmals zu kurz, obwohl CSS beispielsweise doch genug Möglichkeiten bietet, die Typografie effektiv zu gestalten. Daher werden im Folgenden einige Ansätze vorgestellt, wie mithilfe von CSS eine bestmögliche Typografie zustande kommt.

CSS-Tipps zur Webtypografie

Schriftart und Schriftschnitt

Ob man sich für Open Sans oder Times New Roman als Schriftart entscheidet, kann von entscheidender Bedeutung sein. Denn die Schriftgröße variiert je nach verwendeter Schriftart. So werden einige Buchstaben in bestimmten Schriftarten größer oder höher dargestellt als in anderen. Das Lese-erlebnis des Nutzers kann durch eine falsch gewählte Schriftart (und dadurch eine schlechtere Webtypografie) nachhaltig eingeschränkt werden. Zu beachten ist auch, eine Schriftart zu wählen, die eine abwechslungsreiche und kompatible Nutzung von Schriftschnitten zulässt. Bekanntere Beispiele von Schriftschnitten sind kursiv oder fett geschriebene Wörter. Die Nutzung von Schriftschnitten sollte zur Hervorhebung besonderer oder wichtiger Passagen und Wörter erfolgen, daher ist Sparsamkeit ratsam. Selbiges gilt auch für Icon Fonts, sofern Ihre gewählter Schriftsatz es zulässt und Sie es verwenden.

Schriftgröße

Die Schriftgröße, bei CSS ,,font-size“ genannt, ist wie bereits erwähnt auch von der Schriftart abhängig. Verschiedene Schriftarten sind unterschiedlich gut lesbar. Zu erweiterten Bearbeitung der Schrift lässt sich ihr Design hinsichtlich Größe auf vielerlei Art kalibrieren. Dabei gibt es eine Menge an Maßeinheiten für Schriftgröße. Die davon am häufigsten verwendete ist die Maßangabe Pixel (px). Populärer aber und anpassungsfähiger sind relative Schriftgrößen, die sich an verschiedene Endgeräte und Programme anpassen können, allen voran ,,rem“. Diese relative Größe muss bei Implementierung aber immer noch in Verhältnis zu einem absoluten Wert, den Pixeln, gesetzt werden. Das  sähe dann z.B. so aus:

In jedem Fall eignet sich als Faustregel, beim Fließtext (p) nicht weniger als 16 Pixel (in der Gleichung wäre das 1 rem) zu verwenden, damit die Schriftgröße nicht zu klein ausfällt.

Zeilenabstand und Länge

Ebenfalls wichtig für die Webtypografie ist der Zeilenabstand. In CSS wird es ,,line-height“ genannt. Dabei sollte dessen größer etwa das 1,3-1,6 fache der Schriftgröße betragen. Andernfalls fällt der Abstand zwischen einzelnen Zeilen derart marginal aus, dass man von einer Zeile zu leicht abrutschen kann. Ziel sollte es sein, problemlos mit den Augen auf der zu lesenden Zeile zu bleiben, aber fließend in die nächste springen zu können. In CSS sähe das dann womöglich folgendermaßen aus:

Um einer ansprechenden Darstellung auf verschiedenen Endgeräten entgegenzukommen, muss z.B. für größere Bildschirme der Zeilenabstand erhöht, für Mobilgeräte hingegen verkleinert werden.

Um die Lesbarkeit Ihrer Texte im Web zu erhöhen, sollte auch die Zeilenlänge optimiert werden. Auch hier gilt es, ein Gleichgewicht zwischen zu kurzen und zu langen Zeilen zu schaffen. Die Faustregel für Desktop-orientierten Inhalt sieht etwa 50-70 Zeichen pro Zeile vor, bei Mobilgeräten sind eher zwischen 30 und 40 Zeichen ratsam.

Farben zur Webtypografie

Webtypografie bindet auch die Farbe von Schrift bzw. Text und dem Hintergrund mit ein. Um den geschriebenen Text gut lesbar zu halten und hervorzuheben, sollte ein farblicher Kontrast zum Hintergrund geschaffen werden. Zu beachten ist hier allerdings, dass von Komplementärfarben, eine zu bunte Farbauswahl oder auch ein zu starker Farbkontrast abzuraten ist. Eine Kombination von dunkelgrauem Text auf weißem Hintergrund ist diesbezüglich ratsam. Alternativ bietet sich auch schwarzer Text auf hellgrauem Hintergrund an. Bei Unsicherheiten, ob Ihre Farbauswahl angemessen ist, gibt es verschiedene Tools, die dies überprüfen.

Text-Ausrichtung

Die CSS-Eigenschaft ,,text-align“ umfasst die verschieden Ausrichtungen eines Textes. Zentriert, Blocksatz, rechts- und linksbündig. Zentriert und rechtsbündig werden nur für Einschübe, beispielsweise Zitate verwendet und eignen sich daher nicht für den gesamten Text. Der Blocksatz wiederum stößt oft negativ auf, da er bei einer geringen Wortmenge die Abstände zwischen Wörtern einer Zeile erhöht, um alle Zeilen bei gleicher Breite zu halten. Zu empfehlen ist daher, den Text linksbündig auszurichten. Dies sorgt auch für Probleme am Ende jeder Zeile mit unterschiedlicher Länge, aber bei einer einheitlichen Zeichenmenge pro Zeile lässt sich dieses Problem abmildern.

Weißraum und Leerraum

Wichtig ist nicht zur wissen, wie Sie Ihren Text gestalten, sondern auch wie viel Platz er auf der Website einnimmt. Webseiten mit enormen Mengen an Text und Infos zu versehen schreckt Nutzer eher ab. Auch hier gilt Mäßigung. Überdies hilft Leerraum dabei, wichtige Informationen hervorzuheben.

Webtypografie mit CSS- ein Fazit

Wie klar zu sehen ist, gibt es eine Vielzahl an Elementen und Möglichkeiten, die durch sorgsame Bearbeitung und Gestaltung immens dazu beitragen können, die Lesbarkeit Ihrer Texte zu erhöhen. Dieser Beitrag wird von vielen maßlos unterschätzt, weshalb etwas mehr Aufwand zur Optimierung der Typografie auch dafür sorgen kann, sich von der Konkurrenz abzuheben.