Lism CSSでは、line-height の扱いが独特となっており、ハーフレディングの値でline-heightを管理する仕組みになっています。

ハーフレディングとは、line-heightから文字サイズを除いた余白を上下に半分ずつ振り分けた、片側分の余白のことです。

ハーフレディング管理の仕組み

Lism では、全要素に対し、以下のスタイルが適用されています。

* {
  line-height: var(--lh, calc(1em + var(--hl) * 2));
}

これにより、line-heightの値は基本的に、--hl というハーフレディングを指定するための変数に依存する仕組みになっており、 どんな文字サイズのテキストに対しても同じ余白量でレイアウトを組んでいくことが可能です。

--lh がセットされている場合はそちらが優先されます（後述の lh プロパティで使用します）。

ハーフレディング管理のメリット

line-height: 1.6 のような倍率指定では、行間の余白もフォントサイズに比例して広がります。本文サイズなら問題ありませんが、見出しのような大きな文字では行間が空きすぎて間延びした印象になります。

ハーフレディングを固定値で管理すれば、フォントサイズが変わっても行と行の間の余白は一定に保たれます。

lh（line-height）も使用可能

hl はフォントサイズに依存しない固定量で行間を管理しますが、画面サイズでフォントサイズが大きく変わる見出しなど、フォントサイズに比例した行送りを保ちたい場合のために、line-height を倍率で指定する lh プロパティも用意しています。

基本は hl を使用してください。なお、lh を指定した要素の子孫では hl の指定は効きません。

トークン

--hl にセットする値として --hl--xs〜--hl--xl、--lh にセットする値として --lh--xs〜--lh--xl のトークンを用意しています。一覧とプレビューはタイポグラフィトークンの HL / LH を参照してください。