Testseite zur Zeilenbreite

Ist eine Textzeile auf dem Bildschirm zu lang, hat der Leser Schwierigkeiten, den Anfang der nächsten Zeile zu finden und der Lesefluss wird gestört. Ist eine Zeile zu kurz, reissen die langen deutschen Wörter hässliche Lücken auf der rechten Seite des Absatzes und der häufige Zeilenwechsel macht das Lesen ebenfalls beschwerlich.

Im Druckbereich gelten 55 bis 60 Buchstaben pro Zeile als optimal, doch derart schmale Spalten sind auf dem Bildschirm selten anzutreffen. Englischsprachige Screen-Designer empfehlen statt dessen eine optimale Zeilenlänge von 30 bis 35em. In Anbetracht der deutschen Bandwurmwörter erscheinen mir 30em jedoch eindeutig zu schmal. Doch teste es selber. Vergleiche die Lesbarkeit bei unterschiedlichen Zeilenbreiten, Schriftarten, Schriftgrößen und Zeilenhöhen. Javascript muss allerdings aktiviert sein, sonst klappt das Umschalten über das Menü links nicht.

Als Maßeinheit für die Schriftgröße habe ich immer em gewählt, da nur so eine Änderung unabhängig von meinen Vorgaben auch im Internet Explorer möglich ist. Benutze dazu im Browser den Menüpunkt Ansicht -> Schriftgrad oder das Mausrad bei gedrückter <Strg>-Taste. Aber Achtung: damit verändert sich auch die Ausgangsbasis für 1em.


Was ist eigentlich em?

Im traditionellen Schriftsatz ist em definiert als die Breite des Großbuchstabens M (das breiteste Zeichen das Alphabets) in der aktuellen Schriftart und -größe. Auf den Bildschirm bezogen entspricht 1 em der in einer Webseite verwendeten Schriftgröße in Pixel. Die Browser benutzen in der Standardinstallation eine Schriftgröße von 16 Pixeln. Hat der Webdesigner es nicht anderes festgelegt, entspricht 1 em damit einem Bildschirmquadrat von 16 Pixeln Breite und 16 Pixeln Höhe. Wird nun der Schriftgrad verändert, passt sich auch em an. Es ist im Gegensatz zu Pixeln also eine relative Maßeinheit.

Probiere es aus: Wähle im nebenstehenden Menü eine Schriftgröße von 1em. Dann entspricht eine Zeilenlänge von 40em der von 640px (40 * 16 = 640). Wird ein kleinerer Schriftgrad festgelegt, ist die Zeilenbreite von 40em entsprechend weniger als 640 Pixel.

Damit wird auch der große Vorteil von em als Maßeinheit der Zeilenbreite deutlich: Verändere ich die Schriftgröße, wird auch die Zeilenlänge angepasst. Die als optimal festgelegte Textbreite bleibt damit erhalten. Wenn trotzdem der Zeilenumbruch ein geringfügig anderer ist, liegt das daran, dass ein größerer Schriftgrad zwar die Buchstaben vergrößert, nicht aber die Strichstärke: ein m etwa verbreitert sich wesentlich mehr als ein i.

Probiere es aus: Lege eine Zeilenlänge in em fest und verändere dann die Schriftgröße - die Textbreite passt sich der Schrift an. Nun stelle eine Länge in px ein und verändere den Schriftgrad - die Breite des Textblocks bleibt erhalten.

Damit ist auch die Wahl der Maßeinheit bei der Breite von Layoutblöcken bestimmt: Habe ich eine Spalte, die sich bei einer Änderung der Schriftgröße nicht verändern darf, weil sonst das Layout zerstört würde, nehme ich Pixel. Habe ich dagegen einen flexiblen Bereich, der sich der Schrift anpassen darf, ist em die beste Wahl.

 

zurück zum Stichpunkt CSS Spielwiese