Understanding the Line-Height Property in CSS

The line-height property in CSS is the correct way to set the spacing between lines of text. This property sets the amount of space used by a line of text. It's particularly essential in typographical design as it contributes greatly to readability.

The line-height property can accept various values:

1. A number without a unit: This value is often preferred as it allows the line-height to scale proportionally with the font-size.
2. A length in pixels (px), points (pts) etc: This gives precise control over line-height but isn't responsive to font-size changes.
3. A percentage (%): Once again, the line height is set relative to the font-size.
4. The default value 'normal': This sets the line-height to a reasonable value determined by user agents.

Here is a simple example:

p {
    line-height: 1.6; /* line-height is 1.6 times the font-size */
}

In this example, any paragraph text (<p>) on your page will have a line-height that is 1.6 times the size of the current font. It's that simple to use!

When picking a line-height value, readability is vital. As a general rule, a line-height between 1.5 and 2 is deemed to be ideal for large blocks of text, whilst a tighter line-height can be used for headings or single lines of text.

It's also important to note that the line-height value is inherited from elements to child elements which means that it's often set on the body element or root element to apply to all text.

In contrast, other properties like 'line-spacing', 'letter-spacing', and 'text-spacing' don't exist in CSS - they may seem logical but they're incorrect. The letter-spacing property only affects the space between characters, not lines.