Webspace preiswert! - Alfahosting.de

13.01.2008 / ü19.02.2008

Schrift und Text optimieren

Für den Besucher einer Website ist nicht nur das inhaltliche Angebot von Bedeutung. Viele Surfer werden trotz eines interessanten Inhalts von der Homepage vergrault, weil die Schrift schwer lesbar ist, das Lesen hohe Konzentration erfordert und somit der Spaß am weiteren Verweilen vergeht. Mit wenigen grundlegenden Einstellungen lässt sich das optische Erscheinungsbild des Textes optimieren.

1. Die richtige Schriftgrößeneinheit wählen

Mit den meisten Browsern kann der Besucher die Schriftgröße einer Seite selbst vergrößern oder verkleinern. Diese Einstellung erfolgt entweder durch die Browsereinstellung

Schriftgröße einstellen

oder (nicht bei allen Browsern) mit der Tastenkombination "STRG" und "+" für "größer" bzw. "STRG" und "-" für "kleiner". Modernere Tastaturen oder der Internet Explorer 7 haben darüber hinaus noch eine Zoomfunktion.

Wird als Schriftgrößeneinheit jedoch "Pixel" (px) verwendet, so kann die Schriftgröße im Internet Explorer 6 auf die beschriebene Weise nicht verändert werden. Gleiches gilt für absolute Schriftgrößeneinheiten wie z.B. "Point" (pt).

Aus diesem Grund sollte man als Schriftgrößeneinheit am besten "em" verwenden. Es handelt sich dabei um eine "relative" Einheit, die sich beim Vergrößern oder Verkleinern skalieren lässt. 1em entspricht 14pt. Dieser Text hat eine Schriftgröße von 0.9em. Eine kleinere Schriftgröße ist nach meinem persönlichen Geschmack problematisch, weil sie sonst für viele bereits schwer lesbar wird und hohe Konzentration erfordert. Beispiel ansehen.

2. Mit "line-height" Abstand halten

Auch die richtige Zeilenhöhe kann dazu beitragen, einen Text besser lesbar zu machen. Kleben die einzelnen Textzeilen zu dicht beieinander, erfordert auch dies erhöhte Konzentration des Lesers.
Einen größeren Zeilenabstand erzielt man mit der CSS-Eigenschaft "line-height". Sie definiert den Abstand zwischen den Grundlinien der Textzeilen.
Man gibt die "line-height" am besten entweder in der Schriftgrößeneinheit oder einem Prozentwert an. Diesem Text liegen folgende Einstellungen zugrunde:

font-size:0.9em;
line-height: 1.4em;

Beispiel ansehen.

3. Die Textbreite begrenzen

Mit zunehmenden Bildschirmgrößen und -auflösungen werden die Textzeilen auch automatisch länger, sofern sie sich nicht in einem Div befinden, dessen Breite durch einen entsprechenden "width-Wert" begrenzt ist. Wenn der Leser nun über die Gesamtfläche eines Breitbildschirms einen Text lesen soll, dann bewegen sich nicht nur seine Augen, sondern man hat den "Tennisspiel-Zuschauer-Effekt", wo sich bei jedem Zeilenwechsel der ganze Kopf hin und her bewegt. Auch solche Dinge können dem Besucher die Lust am Verweilen auf einer Hompage verleiden.

Textzeilen sollten deshalb nicht zu lang sein. Dies erreicht man, indem man die Text-Divs in ihrer Breite begrenzt.

Selbsterkenntnis
Gestattet mir an dieser Stelle ein "Geständnis":
Bevor ich dieses Kapitel schrieb war die Seite 800px breit und hatte einen linken wie rechten Innenabstand von je 10px. Das ergab eine Zeilenbreite von 780px, was schon die "Zumutbarkeitsgrenze" überschritt. In dieser "Selbsterkenntnis" habe ich nun die Seitenbreite mit 800px zwar beibehalten (sonst hätte ich den ganzen Header, die Navi und die Startseite wieder umbauen müssen); habe jedoch den Innenabstand links und rechts auf je 120px erhöht. Die Zeilenlänge beträgt dadurch nur noch 560px. Somit sollte auch auf dieser Seite (die schließlich auch einen gewissen Vorbildcharakter erfüllen soll) der Text für jeden relativ leicht zu lesen sein.
Beispiel ansehen.

nach oben


Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0015.php on line 108

Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0015.php on line 108

Warning: include(): Failed opening 'mainincludes/footer.php' for inclusion (include_path='.:/opt/php/5.6.33/share/pear') in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0015.php on line 108