The line-height property is the most significant factor in vertical rhythm and readability. It controls the space between lines of text. A well-set line height can make long paragraphs readable, while a poor one can make text feel cramped or disjointed.

The Golden Rule: Unitless Values

While you can use px, em, or percentages, the best practice is to use a unitless number (e.g., 1.5).

Unitless values act as a multiplier of the current element's font-size. Crucially, they solve inheritance issues. If a parent has line-height: 1.5, a child with a larger font size will recalculate its line height based on its own font size, not the parent's fixed pixel value.

Calculating Line Height

The browser calculates the used value by multiplying the element's computed font size by the unitless value.

• Font Size: 16px
• Line Height: 1.5
• Result: 24px per line

Accessibility & WCAG

The Web Content Accessibility Guidelines (WCAG) recommend a line height of at least 1.5 (150%) for body text to ensure content is readable for people with cognitive disabilities or visual impairments.