Erfahren Sie, wie Sie die Zeilenhöhe des CSS-Stils verwenden, um den Zeilenabstand auf Ihren Webseiten zu beeinflussen.
Werte der CSS-Zeilenabstände
Der CSS-Zeilenabstand wird durch die Zeilenhöhe der CSS-Stileigenschaft beeinflusst. Diese Eigenschaft nimmt bis zu 5 verschiedene Werte an:
- Normal: Der Browser bestimmt einen Wert für den Zeilenabstand, der sich auf die Schriftgröße bezieht. Dies entspricht normalerweise der Schriftgröße oder ist etwas größer (z. B. 20%).
- Erben: Der Zeilenabstand sollte aus dem Zeilenabstand des übergeordneten Elements entnommen werden. Wenn Sie also die Zeilenhöhe Ihres Body-Tags auf 30% größer als die Schriftgröße und die dazugehörigen Absatz-Tags setzen, werden diese ebenfalls um 30% größer als die Schriftgröße.
- Eine Zahl: Wenn der Zeilenhöhenwert keine Maßeinheit hat, wird er als Multiplikator der Schriftgröße für die Zeilenhöhe betrachtet. Eine Zeilenhöhe von 1,25 wäre also 25% größer als die Schriftgröße.
- Eine Länge: Wenn der Zeilenhöhenwert eine Maßeinheit hat, ist dies der genaue Abstand zwischen den Zeilen. 1,25 mm würden also zu einem Abstand von 1,25 mm führen.
- Ein Prozentsatz: Wenn die Zeilenhöhe ein Prozentsatz ist, entspricht dies einem Prozentsatz der Schriftgröße. Eine Zeilenhöhe von 125% wäre also 25% größer als die Schriftgröße.
Welchen Wert sollten Sie für den CSS-Zeilenabstand verwenden
In den meisten Fällen ist es am besten, den Zeilenabstand auf "Standard" oder "Normal" zu belassen. Dies ist in der Regel am lesbarsten und erfordert keine besonderen Maßnahmen. Wenn Sie den Zeilenabstand ändern, kann Ihr Text jedoch anders aussehen.
Wenn Ihre Schriftgröße als Ems oder Prozentwerte definiert ist, sollte auch die Zeilenhöhe auf diese Weise definiert werden. Dies ist die flexibelste Form des Zeilenabstands, da der Leser die Schriftgröße ändern kann und das gleiche Verhältnis zu Ihrem Zeilenabstand beibehalten wird.
Legen Sie die Zeilenhöhe für Druckformatvorlagen mit einem Punktwert (pt) fest. Der Punkt ist ein Druckmaß, daher sollten Ihre Schriftgrößen auch in Punkten angegeben werden.
Wir verwenden die Zahlenwahl nicht gern, weil wir herausgefunden haben, dass dies für die Leute am verwirrendsten ist. Viele Leute denken, dass die Anzahl eine absolute Größe ist, und sie machen es also riesig. Beispielsweise haben Sie eine Schriftart mit 14px festgelegt und dann die Zeilenhöhe auf 14 festgelegt, was zu großen Lücken zwischen den Zeilen führt, da der Zeilenabstand auf 14 festgelegt ist mal die Schriftgröße.
Wie viel Platz sollten Sie für Ihren Zeilenabstand verwenden
Wie oben erwähnt, empfehlen wir, den standardmäßigen Zeilenabstand zu verwenden, es sei denn, Sie haben einen bestimmten Grund, diesen zu ändern. Das Ändern des Zeilenabstands kann unterschiedliche Auswirkungen haben:
- Sehr dichter Text kann schwer lesbar sein. Kleine Zeilenräume können jedoch die Stimmung des Textes beeinflussen. Wenn der Text zusammengefügt wird, kann der Text dunkler oder dichter erscheinen.
- Weiter entfernter Text kann auch schwer lesbar sein. Durch die großen Zeilenräume wirkt der Text jedoch fließender und fließender.
- Das Ändern des Zeilenabstands kann dazu führen, dass Text, der sonst nicht in einen Raum passt, kompakter wird oder mehr Platz in Ihren Entwürfen einnimmt.
