Interactive online courses HTML Academy
2026-03-09 14:12 Diff
https://htmlacademy.org/courses/html-css-basics/typography/line-height

We can use the font-size property to control the size of the individual characters of the font. But text is usually more than just a set of characters; it consists of lines that are arranged one under the other. Typography requires managing the location of these lines relative to each other and other content.

In order to achieve this, we have the line-height property in CSS. It controls the line height or, more precisely, the line spacing.

As is the case with the font size, the line-height values can be set in different ways.

By default, this property is set to normal. It indicates to the browser that the line spacing must be selected automatically based on the font size. The specification recommends setting it to a value that is 100–120% of the font size. In other words:

p { font-size: 10px; line-height: normal; /* The value will be approximately 12px */ }

The normal value allows all text for which no styles have been applied to be readable. However, if you need to deviate from the default styling, you can assign the line-height a fixed and absolute value that is expressed in px.

p { font-size: 16px; line-height: 26px; }