Silbentrennung im Textverarbeitungsprogramm geht automatisch und ist auch von Hand steuerbar, wenn die Automatik mal Fehler macht.

Silbentrennung auf Webseiten ist eine andere Sache. In CSS 2 war es nicht vorgesehen. Natürlich konnte man von Hand einen harten Trennstrich setzen an den Stellen, wo man es als erforderlich erfand. Das passte dann mit den Einstellungen des Webdesigners. Aber wenn der Seitenbesucher einen anderen Browser benutzte, vielleicht auch noch unter einem anderen Betriebssystem und im schlimmsten Fall mit individuell eingestellter Schriftgröße, dann waren die Trennstriche oft nicht am Ende einer Zeile, sondern irgendwo mittendrin. Sehr hässlich.

Man konnte sich in HTML mit einem soft hyphen (­) behelfen und sogar ein Online-Tool zu Hilfe nehmen: hypho-o. Schön und gut für einen Webdesigner, aber unzumutbar für einen Kunden, der jedesmal seinen geänderten Text durch dieses Werkzeug jagen und dann per copy-and-paste in den Text-Editor einfügen müsste.

Mit CSS 3 leuchtet ein Hoffnungsschimmer am Horizont auf: es ermöglicht Silbentrennung oder hyphenation, wie es im Englischen heißt. Die Browserunterstützung ist allerdings noch nicht sehr gut, und ohne Browser-Präfixe kommt man momentan noch nicht aus. Und so lautet der Code:

p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Ich habe es in verschiedenen Browsern unter Windows und Linux getestet. Unter Linux habe ich keinen Browser gefunden, unter dem es funktioniert hat. Unter Windows klappt es besser:

Firefox 10.0.2: ja
Seamonkey 2.7: ja
Safari 5.1.2: ja

Chrome 16.0.912.63: nein
Opera 11.61: nein
Internet Explorer 8 und 9: wahrscheinlich nicht; ist mir momentan aber auch ziemlich egal.

Die Schrift auf einer Webseite sollte gut lesbar sein – das ist eigentlich klar. Aber was macht eine Schrift gut lesbar?

Zunächst einmal die Schriftkategorie: serifenlos oder mit Serifen (Schmuckschriften etc. wollen wir hier mal außen vor lassen)? Serifen sind die kleinen »Füßchen« unten an den Längsbalken oder die Ausläufer an den Querbalken eines Buchstabens. In gedruckten Publikationen erleichtern sie den Lesefluss, weil sie das Auge von einem Buchstaben zum andern überleiten. Auf Bildschirmen dagegen verschwimmt eine Schrift in kleiner Schriftgröße oft, wodurch sich Serifenschriften für Mengentexte auf Webseiten eher nicht so gut eigen. Natürlich hängt es immer auch von der Schriftgestaltung ab.

Wichtig ist auch die Zeilenlänge: bei zu langen Zeilen findet das Auge schwer die richtige nächste Zeile, bei zu kurzen Zeilenlängen muss das Auge zu oft in die nächste Zeile springen, was ebenso den Lesefluss stört.

Noch wichtiger finde ich die Schriftgröße. Man darf nicht vergessen, dass nicht alle Menschen, die eine Webseite lesen wollen, über eine hundertprozentige Sehkraft verfügen. Natürlich kann man im Browser die Schriftgröße anpassen: entweder, indem man eine Mindestgröße in den Einstellungen angibt, die einem angenehm ist, oder indem man bei Webseiten mit allzu kleiner Schrift die Anzeige vergrößert. Bei vielen Browsern geht das durch Drücken von STRG und +. Nicht jeder Benutzer weiß das, und deswegen brechen vielleicht manche den Webseitenbesuch bei unlesbar kleiner Schrift schnell wieder ab.

Und jetzt endlich kommen wir zu dem Punkt, der in der Überschrift schon erwähnt wird: zum Schriftkontrast. Die Leserlichkeit steht und fällt mit dem Kontrast. Schrift auf gemustertem Hintergrund ist ein absolutes Tabu, es sei denn, das Muster wäre extrem dezent in der Farbgebung und Struktur, also quasi kaum sichtbar. Komplementärkontrast ist ebenso schlecht (Komplementärfarben stehen sich im Farbkreis genau gegenüber). Zum Beispiel würde blaue Schrift auf orangenem oder auch auf rotem Grund bei gleicher oder nur wenig unterschiedlicher Farbhelligkeit zum Flimmern führen, das den Augen sehr unangenehm ist.

Also setzt man eine dunkle Schrift auf einen hellen Untergrund. Reines Schwarz auf reinem Weiß ist auf Monitoren – im Gegensatz zu Printmedien – ein zu extremer Kontrast. Da wählt man besser ein sehr dunkles Grau/Anthrazit oder ein cremiges Weiß. Wenn es nicht so unbunt sein soll: trotzdem dunkle Farbe auf hellem Grund oder umgekehrt, also zum Beispiel ein Dunkelbraun auf vanillefarbenem Grund.

Was gar nicht geht, ist etwa mittelgrau auf hellgrau. Wenn dann auch noch die Schrift sehr klein ist, sagen wir 8pt/11px/0.7em, macht das Lesen einfach keinen Spaß mehr. Wie auf dem Beispiel unten.