Art & Algorithms

The lh and rhl units

html: line-height

html {
  font-size: 1.1rem;
  line-height: 1.4;
}

• line-height: 1.4;: This sets the line height for the entire HTML document relative to the font size. A line-height of 1.4 means the space between lines of text is 1.4 times the font size. This improves readability by providing adequate spacing between lines.

section: padding

section {
  padding: 2rlh;
  margin-trim: block;
}

• padding: 2rlh;: This sets the padding inside each section element. The value 2rlh uses the rlh (root line height) unit, which is calculated based on the line-height of the html element. Given html { line-height: 1.4; }, the root line height (rlh) becomes 1.4 times the root font size. Here, 2rlh means padding is set to twice the root line height.

h1, p: margin-block

h1 {
  font-size: 2rem;
  line-height: 1.2;
}
h1, p {
  margin-block: 1rlh;
}

• margin-block: 1rlh;: This sets the margin on both the block-start and block-end (top and bottom) of h1 and p elements to 1rlh. The value 1rlh uses the rlh (root line height) unit and it ensures consistent vertical spacing relative to the root line height. Given the html { line-height: 1.4; }, 1rlh corresponds to a margin equal to the root line height, facilitating consistent and proportional spacing.

Summary

• html element: Sets a global line height of 1.4, establishing the base root line height (rlh) for the document.
• section element: Applies padding based on twice the root line height (2rlh) and trims margins.
• h1, p elements: Assigns a block margin of 1rlh, ensuring proportional and consistent vertical spacing relative to the root line height, enhancing the layout’s readability and visual balance.

The result is a vertical rhythm that matches the height of a line of text even though no actual text is present between elements.