What does the 'line-height' property refer to in typographic terms?

149 Views Asked by At

I am a typographer giving a go at coding a website for a magazine.

I would like to know what does the line-height property refer to exactly when setting text. Is it the same as leading (distance from baseline to baseline)? Or, does it refer to the size of the text—in which case, does it measure the text based on its x-height, cap-height or descender to ascender and multiplies it by whatever the value of the property is?

I attached an image for those who may not be familiar with these typographic terms I attached an image for those who may not be familiar with these typographic terms

2

There are 2 best solutions below

1
HelloThere617 On

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next.

Source: https://fonts.google.com/knowledge/glossary/line_height_leading

0
user8356 On

It is most similar to leading (pronounced like the metal, Pb) in traditional typography. Setting the line-height property increases or decreases the space between lines of text in

paragraph and other block elements. The formal specification refers to the size of the "line box" -- a container concept for lines in block text elements.

See https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Note that the units used with the property can be relative to the default text size/ line height that the html renderer (browser) uses, such as 150% or 2em. Or, it can be an absolute value, like 14px. It can even be set to "normal", which I believe is just the default value.