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 und mühsamer zum Lesen ist er auch.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
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.
Buchtipp: Einstieg in HTML und CSS (Amazon)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform
Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.
Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.
Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.
Themenseiten
Artikel-Thema: Mit CSS und line-height den Zeilenabstand im Text einstellen
Beschreibung: Mit CSS und dem Befehl 👍 line-height kann man im Text den ✅ Zeilenabstand regulieren und damit für ein angenehmes Leseerlebnis sorgen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel