lh / rlh units (and rcap, rch, rex, ric)

`lh`/`rlh` Baseline widely available May 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147).

Chrome 109Edge 109Safari 16.4Firefox 120

`lh` is the element's line-height, `rlh` the root's, so spacing can be expressed in lines: icons that match line height, margins on a vertical rhythm, textarea heights in lines.

Icon sized to exactly one line.

CSS

.fx-038 {
  font: 16px/1.6 system-ui;
  margin-block: 1rlh;
  display: flex;
  gap: .5lh;
  align-items: center
}
.fx-038-icon {
  width: 1lh;
  height: 1lh;
  border-radius: 50%;
  background: #2563eb;
  flex: none
}

HTML

<p class="fx-038"><span class="fx-038-icon"></span> Icon sized to exactly one line.</p>

Fallback: Widely available; no guard needed.

Source: web.dev/blog/baseline-digest-may-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147

Prompt

Use `lh` for anything that should match a line of text (inline icons, avatars in lists, textarea min-height) and `rlh` for block margins to keep a vertical rhythm. Prefer these over `em` for vertical measurements.