CSS line-height für Zeilenabstand

Abstand der Textzeilen einstellbar

Das Erstellen einer Webseite mit CSS war für jene, die vorher Layouttabellen genutzt haben, eine mühsame Qual. Dabei gibt es mittels CSS wunderbare Lösungen, die es vorher gar nicht geben konnte und die, hat man sie einmal erkannt und eingesetzt, sehr viel Spaß bringen. Ein gutes Beispiel für die möglichen Lösungen ist beispielsweise der Zeilenabstand.

Gut, Zeilenabstände hat man mit Tabellen auch erreicht, aber hier ist die Rede vom Zeilenabstand innerhalb eines Textes. Es macht einen Unterschied, ob die Textzeilen aneinanderkleben oder einen großen Abstand aufweisen. Kleine Schrift wird besser lesbar, wenn der Abstand größer ist. Text wirkt sehr aggressiv, wenn er sehr dicht geschrieben wird.

Mit CSS und line-height den Textabstand einstellen

Anwendungsbeispiele:

p { line-height: 10px; }
p { line-height: 125%; }
p { line-height: normal; }

Mit dem CSS-Befehl line-height wird der Zeilenabstand eingestellt. Im ersten Beispiel wird einem Absatz per Pixelwert der Abstand zwischen den Zeilen vorgeschrieben. Im zweiten Beispiel bezieht sich die Einstellung auf die Schriftgröße und davon ausgehend wird die 1 1/4fache Größe für den Abstand herangezogen.

Das dritte Beispiel stellt den Zeilenabstand auf den normalen Wert zurück. Hätte man keinen Zeilenabstand eingegeben, wäre das Erscheinungsbild genauso gewesen wie in der Einstellung normal.

ergibt:

Das ist die erste Zeile
Das ist die zweite Zeile

Das ist die erste Zeile
Das ist die zweite Zeile

Das ist die erste Zeile
Das ist die zweite Zeile

Die Beispiele zeigen, wie sehr sich das Leseverhalten ändert, wenn man den Zeilenabstand einsetzt. Viele nutzen diese Funktion gar nicht, sie hat sich aber sehr bewährt. Tatsächlich kann man Leserinnen und Leser abschrecken, wenn der Text schwer lesbar ist und neue gewinnen, wenn der Text sehr angenehm zu lesen ist. Viele denken dabei an Farbe oder Schriftart, was sich auch wichtig ist, aber wenn es einen angenehmen Zeilenabstand gibt, hilft das auch massiv weiter.

Zu groß darf er aber auch nicht sein, weil sonst erkennt man den Zusammenhang von Absätze nicht mehr so klar. Es ist also eine Frage des Textes, seines Niveaus, der Zielgruppe und des Instinkts, wie man diese wichtige Funktion sinnvoll einsetzen kann.

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel