Die richtige Schrift im Internet

In diesem Artikel fasse ich die Essenz zur Schriftformatierung im Internet zusammen. Am Ende des Artikels findet sich eine ausführliche Linkliste zu tiefergehenden Artikeln und Webseiten. Ich habe viele Aspekte wegfallen lassen und mich auf das (in meinen Augen) Wesentliche beschränkt. Wer meint daß ich etwas wichtiges vergessen habe, der möge sich in den Kommentaren austoben.

Schriftgröße

Die richtige Größe gibt es im Prinzip nicht, da je nach Auflösung, eingestelltem Schriftgrad und Sehvermögen des Betrachters andere Größen in Frage kommen. Um trotzdem eine gute Lesbarkeit seiner Inhalte zu erreichen, sollte man die Schriftgröße daher dynamisch gestalten. Eine gute Praxis ist, sich zunächst im Stylesheet eine Ausgangsgröße zu definieren. Dies geschieht durch einen kleinen Trick, der die Einheit “1 em” auf “10 Pixel” statt “16 Pixel” setzt. Die Einheit “em” steht in der Typographie für die “Größe” des Buchstabens “M”. Bei HTML ist das meines Wissens nach allerdings nicht unbedingt der Fall. In den meisten Browsern ist die Standard-Schriftgröße auf 16 Pixel eingestellt, also ist “1 em” = “16 Pixel”. Damit lässt sich allerdings schlecht rechnen, also wird in der CSS-Datei mit folgender Anweisung diese Größe auf 10 Pixel reduziert:

body { font-size: 62.5%; }

16 * 62.5% ergibt somit 10 Pixel, und damit lässt sich ohne weiteres arbeiten. Auf dieser Seite habe ich z.B. für alle <p> Elemente der Webseite eine relative Schriftgröße von 1.2em definiert, was bei der “normalen” Browsereinstellung zu 12 Pixeln wird. Ich finde das ist eine angenehme Größe zum Lesen, und wer es größer braucht der kann es sich bequem einstellen.

Zeilenhöhe

Auch die Zeilenhöhe sollte relativ angegeben werden, und zwar mit mindestens dem 1,3 fachen der Schriftgröße. Das ist mein persönlicher Erfahrungswert für eine optimale Lesbarkeit, und ergibt bei Exanto 1.2em * 1,3 ~ 1.6em. Der entstehende Weißraum verbessert dabei die Lesbarkeit (das Auge findet leichter die nächste Zeile) und lockert das Gesamtbild des Textes auf.

Zeilenbreite

Die Breite des Textes trägt ebenfalls entscheidend zur Lesbarkeit bei. Eine zu breite Zeile verursacht beim Leser unnötige Anstrengung, da dieser nach jeder Zeile die folgende Zeile mit den Augen “suchen” muss. Ist die Zeile allerdings zu schmal, sorgen die häufigen vertikalen Sprünge beim Lesen für den gleichen Effekt. In der deutschen Sprache mit ihren vielen zusammengesetzten Bandwurmwörtern ist meines Erachtens nach eine Zeilenbreite von 35 – 45 em optimal, in anderen Sprachen variiert dieser Wert natürlich. Der optimale Zustand wäre zusätzlich eine dynamische Containerbreite für die den Text enthaltenden Elemente, was sich allerdings oft mit den Vorstellungen des Designers beißt. Fließendes Webseitendesign ist zwar für den (barrierefreien) Zugang optimal, das Ganze aber in ein schönes Design zu bringen ist oft schwierig. Ein gutes Beispiel für eine in meinen Augen gelungene Umsetzung ist www.clearleft.com.

Farbe, Hintergrund und Kontrast

Reines schwarz auf weiß bietet einen guten Kontrast, hat aber seine Nachteile. Da Webseiten und Texte im Internet meist auf einem Monitor (mit entsprechend additiver Farbmischung) betrachtet werden, ergeben die drei Grundfarben mit maximaler Leuchtkraft zusammen weiß. Die “Farbe” Schwarz wiederum ist bei additiver Farbmischung das Fehlen aller drei Grundfarben, also überhaupt keine Leuchtkraft derselben. Diese Tatsache bewirkt, daß ein voll-weißer Hintergrund sehr stark strahlt, und eine voll-schwarze Schrift davon quasi “erdrückt” wird. Die additive Farbmischung ist wohl auch der Grund, warum im Internet meist Pastelltöne benutzt werden um eine harmonische Farbkombination zu erreichen. Ich persönlich bevorzuge einen weißen oder gelblichen Hintergrund mit einer leicht grauen Schrift. Die HEX-Werte #333, #555 oder #434343 sind gute Anfangswerte zum Herumprobieren.

Schriftart

Als Verfechter von Webstandards und Barrierefreiheit kann ich nur zu den “sicheren” Schriftarten raten, die auf fast jedem System zur Verfügung stehen. Das sind leider nicht sehr viele, dafür kann man aber sicher sein, daß fast alle Besucher die Texte gut lesen können. Eine sehr schöne Möglichkeit zum Testen und Vergleichen der Schriftarten findet sich in der Linkliste im Anhang, siehe Typetester.

Blocksatz oder Flattersatz

Da man im Internet keinen absoluten Einfluss auf Schriftgröße, Zeilenbreite, Schriftart etc. hat, rate ich vom Blocksatz grundsätzlich ab. Für sehr kleine, gleichbleibende Blöcke mit etwas Schrift mag es Sinn ergeben im Blocksatz zu formatieren, aber im allgemeinen ergibt das ein unschönes Schriftbild. Das liegt hauptsächlich daran, daß es bei HTML keine automatische Silbentrennung gibt. Dadurch werden Zeilen bis zur Unkenntlichkeit auseinander gezogen, und andere extrem zusammen gedrängt. Ein Negativbeispiel dafür gibt es hier.

Linkliste

• http://blog.calm-n-easy.de/archiv/typographie-im-web.html
  • Eine ähnliche Aufstellung wie diese hier, allerdings mit anderem Schwerpunkt
• http://www.economist.com/research/StyleGuide/
  • Ein ausführlicher Styleguide für alles was mit Schrift zu tun hat. Mehr auf sprachliche Mittel ausgerichtet als auf Schriftgrößen etc., aber durchaus interessant
• http://www.sitepoint.com/article/anatomy-web-fonts
  • Anatomie von Webschriften. Von diesem Artikel habe ich vieles gelernt, und er gibt wertvolle Hintergrundinformationen
• http://typetester.maratz.com/
  • Der “Typetester” von maratz bietet die Möglichkeit alle Aspekte der Schriftformatierung live zu testen und zu vergleichen. Sehr nützlich!
• http://praegnanz.de/essays/typo-im-web-bitte-abstand-halten
  • Auch ein sehr guter Artikel zu dem Thema “Schrift im Internet” von Gerrit bei praegnanz.de