Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Schriften einsetzen » Zeilenhöhe / Abstände line-height:

Schrift: Zeilenhöhe und Abstände

Die Abstände zwischen den Zeilen sind ein wichtiger Ansatzpunkt um eine gut lesbare Website zu erhalten. Hier geht die bessere Nutzbarkeit vor Design – in der Regel wird es Hand in Hand gehen. Natürlich kann man sagen, dass sich bei den Standardeinstellungen bestimmt jemand irgendwas gedacht haben muss und deshalb diese bestimmt gut sind. Dazu muss man wissen, dass diese Einstellungen aus den Zeiten herkommen, wo die Monitore noch klein und Platz kostbar war. Man war also bemüht auf wenig Platz Text unter zu bringen – man hat also einen sehr geringen Zeilenabstand eingestellt.

Warum wir mehr Zeilenabstand wollen, hat mit der Ergonomie von lesbaren Texten zu tun. Unser Auge muss beim Erreichen des Zeilenendes, zum Anfang der nächsten Zeile springen. Das ist einfacher, wenn genügend Zeilenabstand vorhanden ist. Vorteilhaft ist auch, wenn die Zeilen nicht zu lang werden. Daher gibt es für die deutsche Sprache die Faustformel 7-9 Wörter. Hier aber erst der Zeilenabstand.

Dafür gibt es die CSS-Anweisung line-height:1.5em;

Bei der Angabe der Maßeinheit ist die Wahl von einer relativen Maßeinheit em sinnvoll, damit bei Änderung der Schriftgröße, der Zeilenabstand automatisch passend angezeigt wird. Daher wird im Beispiel mit 1.5em gearbeitet. Bitte beachten – es ist englische Schreibweise! Nachkommazahlen bei CSS-Werten werden immer mit einem Punkt geschrieben!

Erst bei mehrzeiligem Text wird der Effekt sichtbar. Daher hilft auch das Browserfenster schmaler zu schieben (oder einfach mehr Text einzugeben).

Tipp: eine Zeilenhöhe zwischen 1.4em und 1.7em ist gut für eine bessere Lesbarkeit.

Abstand Buchstaben / Wörter

letter-spacing: 0.3em;

Abstände zwischen den einzelnen Buchstaben - sollte relativ angegeben werden, also in em.

word-spacing: 0.5em;

Abstände zwischen den einzelnen Wörtern - sollte relativ angegeben werden, also in em.

Aufgabe

Bitte Überschrift 2 (<h2>) mit folgendem Design:

  • Farbe: rostbraun
  • Zeilenhöhe: 2em
  • Abstände zwischen den einzelnen Buchstaben: 0.3em
  • Abstände zwischen den einzelnen Wörtern: 3.5em
und für Absätze:
  • Zeilenhöhe: 2em
  • Abstände zwischen den einzelnen Buchstaben: 0.3em

CSS Design von Buchstabenabständen

Anmerkung: An diesem Beispiel ist die Auswirkung des Zeilenabstands erst beim mehrzeiligen Text zu sehen.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details