Newly available 条件付きOK。Chrome 109+・Safari 16.4+・Firefox 120+で利用可能。
ユニット・関数 Newly available

lh and rlh units

lh は要素自身の line-height を1単位とし、rlh はルート要素（html）の line-height を1単位とする相対単位。テキストの行間に合わせた余白や高さの指定が可能で、タイポグラフィベースの垂直リズムをCSSだけで正確に実現できる。line-height が変更されても自動で追従する。

ユニットタイポグラフィ

概要

lh は要素自身の line-height を1単位とし、rlh はルート要素（html）の line-height を1単位とする相対単位。テキストの行間に合わせた余白や高さの指定が可能で、タイポグラフィベースの垂直リズムをCSSだけで正確に実現できる。line-height が変更されても自動で追従する。

対応ブラウザ

デスクトップ

Chrome 109+
Edge 109+
Safari 16.4+
Firefox 120+

モバイル

Chrome Android 109+
Safari iOS 16.4+
Firefox Android 120+

基本構文

CSS 
.text-block {
  line-height: 1.6;
  margin-bottom: 1lh; /* 1行分の余白 */
}

.sidebar {
  /* ルートの行高さ基準で高さ指定 */
  max-height: 20rlh;
  overflow-y: auto;
}

.drop-cap::first-letter {
  font-size: 3lh;
  float: left;
  line-height: 1;
}

実務での使いどころ

  • 垂直リズムの統一

    lh 単位で余白を指定し、テキストの垂直リズムを行の高さに正確に揃える。

  • ドロップキャップ

    先頭文字のサイズを lh 単位で指定し、本文の行に正確に合わせた装飾文字を作成する。

注意点

  • line-height が normal（ブラウザ依存）の場合、lh 単位の実際の値がブラウザ間で異なる可能性がある。

アクセシビリティ

  • lh 単位は line-height に連動するため、ユーザーがline-heightをカスタマイズした場合にも適切にスケーリングされる利点がある。

参考リンク