HpBk-TemplateWorld

Zeilenabstand vergroessern

Zeilenabstand vergrößern

Einleitung

Als ich früher noch meine Homepage-Check-Seite besaß ist mir auch oft aufgefallen, dass viele Webmaster gar nicht so einen großen Wert auf Typografie legen, also auf das Aussehen ihrer Schriften und Texte. Der Zeilenabstand wird meistens zu klein gehalten, was das lesen deutlich erschwert. Ich erkläre euch, wie ihr eure Texte noch besser gestalten könnt.

Schwierigkeitsstufe: Fortgeschritten

Der Zeilenabstand spielt eine wichtige Rolle. Unterschieden wird hier zwischen gedruckten Produkten und Online-Produkten. In einem Buch oder auf einem Flyer wird der Zeilenabstand in der Regel kleiner sein, als auf einer Website. Dies liegt daran, dass man eine andere Wahrnehmung hat, während man etwas auf dem Computer-Bildschirm liest. Für den Benutzer ist es einfacher, einen Text mit einem größeren Zeilenabstand zu lesen, als einen Text, der sehr gequetscht aussieht, da dies die Augen zu sehr anstrengt.

Im Vergleich habe ich euch einmal zwei Screenshots gemacht.

Beispiel 1:
Der Fließtext in diesem Screenshot hat einen viel zu geringen Abstand. Das Auge wird schnell überfordert, das Lesen fällt extrem schwer.

Beispiel 2:
Der Fließtext hat mit vergrößertem Zeilenabstand eine ganz andere Wirkung und kann viel schneller und besser vom Auge aufgefasst werden. Nun erkläre ich euch, wie ihr den Zeilenabstand einstellen könnt.

Für CSS-Designs (CSS-Code ohne Style Tags):

Der Zeilenabstand hat ja Auswirkungen auf den Content, da der Text im Content zu finden ist. Also sucht ihr euch in eurem Design-Code den Befehl für den Content.

content { 
              line-height: 1.5em; 
             }

Den Wert für "line-height" könnt ihr natürlich auch vergrößern, oder verkleinern. "em" ist in diesem Fall die Einheit, mit der der Zeilenabstand definiert wird. Bei einem Zeilenabstand von 1.5em wird der Zeilenabstand also auf 150 % der Schriftgröße gesetzt. Zwischen den einzelnen Zeilen kommt also 50 % der Schriftgröße als Abstand hinzu.

Für IceBlue (z.B. im Feld "Text unter dem Design" einfügen):

<style type="text/css">
<!-- 
.edit_content { 
 line-height: 2.0em; 
}
-->
</style>

Und schon sieht der Zeilenabstand auf eurer Website nicht mehr so gequetscht aus.

Kommentar zu dieser Seite hinzufügen:

Du bist der 614560 Besucher.

Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

HpBk-TemplateWorld » alles für dich!

HpBk-TemplateWorld | Alles für dich.

Zeilenabstand vergroessern

Zeilenabstand vergrößern

Besucher

Information

Partner werden

Hilfreiche Websites