HpBk-TemplateWorld | Alles für dich.

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.
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):
Und schon sieht der Zeilenabstand auf eurer Website nicht mehr so gequetscht aus.





Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 392792 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.