Was genau macht line-height?

[Tommi]

Hallo,

das line-height Platz zwischen den Zeilen einfügt ist klar, aber nach welchen System geschieht das?

Z.B.:

font-size: 12px;
     line-height: 15px;

Wo fügt der Browser die drei Pixel ein? Oben, unten? Eins oben, zwei unten oder andersrum?

Welches System steckt dahinter?

Danke und Gruss

[Hopsel]

Hi,

http://www.typografie.info/portal/article.php?sid=37

Die Zeilenhöhe ist der Zeilenabstand.

MfG Hopsel

[Tommi]

Hi Hospel,

danke erstmal, interessante Seite.

Heisst: Die drei Pixel aus dem Beispiel werden oben angefügt und die Grundlinie der nächsten Zeile ist 15px von der Grundlinie der ersten Zeile entfernt, oder?

Gruss Tommi

[Hopsel]

Hi,

Heisst: Die drei Pixel aus dem Beispiel werden oben angefügt und die Grundlinie der nächsten Zeile ist 15px von der Grundlinie der ersten Zeile entfernt, oder?

nicht unbedingt. Du musst dir vorstellen, dass jede Schriftart unterschiedlich ist.

Der Erfahrung nach lässt sich aber sagen, dass bei der Zeilenhöhe der Abstand oben hinzugefügt wird.

Beachte aber, dass line-height keinesfalls für ein pixelgenaues Layout missbraucht werden soll. Zweck ist es, Texte und Textfluss zu verändern. Gemeint sind Lesbarkeit und/oder besondere Kennzeichnung von gewissen Passagen oder ganzen Absätzen.

MfG Hopsel

[Cheatah]

Hi,

Der Erfahrung nach lässt sich aber sagen, dass bei der Zeilenhöhe der Abstand oben hinzugefügt wird.

nö.

Cheatah

[Hopsel]

Hi,

ich erinnerte mich nur ein Buch über _Print_medien im Zusammenhang mit Typografie. Daher meine "Erfahrung". Mein Gedächtnis ist ja nicht lückenfrei. Schon gar nicht bei dieser Hitze. :)

MfG Hopsel

[Ingo Turski]

Hi,

Der Erfahrung nach lässt sich aber sagen, dass bei der Zeilenhöhe der Abstand oben hinzugefügt wird.

Meine Erfahrung zeigt, daß sich line-height wunderbar zur vertikalen _Zentrierung_ einer Textzeile eignet. Ob natürlich bei einer ungeraden Zahl oben oder unten ein Pixel mehr ist, dürfte durchaus unterschiedlich gehandhabt werden.

freundliche Grüße
Ingo

[CarstenP]

Hallo,

Der Erfahrung nach lässt sich aber sagen, dass bei der Zeilenhöhe der Abstand oben hinzugefügt wird.

Warum nicht einfach mal ausbrobieren...?

p {  
  font-size:12px;  
  border:solid 1px #009;  
  line-height:14px;  
}

<p>Hallo Test</p>

Ändere im CSS den Wert für line-height und schaue, in welche Richtung der Rahmen sich ausdehnt.

Ergebnis: Abgesehen von der bereits angesprochenen vertikalen Zentrierung ist es von Browser zu Browser verschieden, wie ungerade Differenzen aufgeteilt werden. Wenn man dasselbe Spielchen mit anderen Größen macht, sieht es selbst innerhalb desselben Browsers anders aus. Aber wenn man sich an diesem einen Pixel Unterschied stören sollte, dann sollte man sich überlegen, ob man sich das richtige Medium ausgesucht hat... ;-)

Viele Grüße
Carsten

[Cheatah]

Hi,

das line-height Platz zwischen den Zeilen einfügt ist klar,

nein, das tut es nicht. Es definiert die (minimale) Höhe der Zeile, keinen Abstand.

aber nach welchen System geschieht das?

Der Standard überlässt dem Client hier Freiheiten.

Wo fügt der Browser die drei Pixel ein?

Da, wo er sie für sinnvoll hält.

Cheatah