Line Height and Alignment

Each size class sets a line height, but you can choose another one with the leading- classes. The name comes from printing: typesetters used to put thin strips of lead between the lines of metal letters to space them out.

The values are numbers without a unit, so they are multiples of the font size, just like the line-height: 1.6 you wrote in the CSS course. With text-lg (18 px) and leading-relaxed, each line is 18 × 1.625 = 29.25 pixels high. A leading- class always wins over the line height of a size class, so you can write them in any order.

Paragraphs of longer text are easier to read with more space between the lines, for example with leading-relaxed. For big headings, the line height that comes with the size is usually just right.

Text alignment works as in the CSS course: text-left, text-center, text-right and text-justify set text-align to left, center, right and justify. And since text-align is inherited, one class on the header element centers the name, the age and the badge in it.