Das Layout ist für die Usability und damit für die Nutzbarkeit einer Homepage entscheidend. Auf dieser Seite können sie dynamische die Zeilenbreite & Zeilenhöhe sowie Schriftgröße & Schriftart mit einem Klick verändern und sich den Effekt auf die Lesbarkeit direkt anschauen und so die optimalen Werte finden.

Welche Größe und Breite sind optimal?

Ist eine Textzeile auf dem Bildschirm zu lang, muss der Leser seine Augen bewegen, und hat Schwierigkeiten, den Anfang der nächsten Zeile zu finden — 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 (Zeitungen) 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 erscheint 30em jedoch eindeutig zu schmal.
Doch auf dieser Test-Seite können Sie mit einem Klick die Lesbarkeit selber testen. Vergleichen Sie unterschiedliche Breiten und Größen miteinander, indem sie über das Menü die Schriftart, Schriftgröße, Zeilenhöhen und die Breite des Darstellungsbereich regulieren.
Javascript muss allerdings aktiviert sein, sonst klappt das Umschalten über das Menü links nicht.

Als Maßeinheit für die Schriftgröße ist immer em eingestellt, da nur so eine Änderung auch im Internet Explorer möglich ist.

Tipp: Alle Browser und auch alle Office Anwendungen haben eine sehr einfache Zoom-Funktion: das Mausrad vor / zurück drehen bei gedrückter [Strg]-Taste. Aber Achtung: damit verändert sich auch die Ausgangsbasis für 1em.
Mit der Tastenkombination [Strg] + [0] (die Ziffer Null) lässt sich der Zoom wieder auf 100% justieren.


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 Schriftgröß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.

Das läßt sich leicht ausprobieren: Im nebenstehenden Menü die Schriftgröße von 1em wählen. 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: der Buchstabe "m" etwa verbreitert sich wesentlich mehr als der Buchstabe "i".

Test: 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.