行の高さ（ハーフレディング）

Lism では、行の高さ（line-height）を「行の上下に付ける余白の量」で決めています。この余白の片側ぶんをハーフレディングと呼びます。文字の大きさが変わっても行と行のすきまがそろう、Lism ならではのしくみです。

行の高さとは#

文章の1行は、文字そのものの高さと、その上下の余白でできています。CSS の line-height は、この「文字＋上下の余白」を合わせた1行ぶんの高さです。

• line-height から文字の大きさを引いた残りが、行のすきま（レディング）になります
• そのすきまは、文字の上と下に半分ずつ付きます。この半分ぶんがハーフレディングです

たとえば文字が 16px で line-height が 26px なら、残りの 10px が上下に 5px ずつ付きます。このときハーフレディングは 5px です。

Lism のしくみ#

Lism は、すべての要素に次の CSS を当てています。

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

• 1em は、その要素の文字の大きさです
• --hl は、ハーフレディングの量を入れる CSS 変数です
• 行の高さ ＝ 文字の大きさ ＋ ハーフレディング × 2 になります

つまり、--hl を決めれば、文字が大きくても小さくても、行の上下に同じ量の余白が付きます。--lh に値が入っているときは、そちらが使われます（下の「-lh も使える」）。

なにがうれしいの？#

line-height: 1.6 のように倍率で決めると、文字が大きくなるほど行のすきまも広がります。本文なら気になりませんが、大きな見出しでは行がはなれすぎて、間のびして見えます。

ハーフレディングの量を決めておけば、文字の大きさを変えても、行と行のすきまは同じままです。

<div class="l--stack -g:20">
  <p class="-fz:s -bgc:base-2">小さな文字でも、行と行のすきまは同じ量です。小さな文字でも、行と行のすきまは同じ量です。</p>
  <p class="-fz:2xl -bgc:base-2">大きな文字でも、すきまは同じ量です。</p>
</div>

行の上下の余白を変える（-hl）#

ハーフレディングは -hl:{トークン} のクラスで変えられます。-hl は half-leading（ハーフレディング）の略です。

<div class="l--stack -g:20">
  <p class="-hl:xs -bgc:base-2">-hl:xs すきまがせまい。すきまがせまい。すきまがせまい。すきまがせまい。</p>
  <p class="-hl:xl -bgc:base-2">-hl:xl すきまが広い。すきまが広い。すきまが広い。すきまが広い。</p>
</div>

目安は、もとになる --hl-unit（最初は 0.125rem、約 2px）から計算した値です。body には最初から --hl--base が入っていて、中の要素に受け継がれます。

倍率で決める（-lh）も使える#

画面の幅で文字の大きさが大きく変わる見出しのように、文字に合わせて行の高さも伸び縮みしてほしいときもあります。そのために、line-height を倍率で決める lh も用意されています。

<p class="-lh:1 -fz:xl -bgc:base-2">-lh:1 行のすきまがありません。行のすきまがありません。</p>

トークン#

それぞれの値は 文字のトークン の表にあります。

React・Astro で書く場合#

コンポーネントでは hl・lh の Props で渡します。

<Text hl="l">行の上下の余白を広くする</Text>
<Text lh="1.7">倍率で行の高さを決める</Text>

関連するページ#

• 文字のトークン
• 文字（大きさ・太さ・行間）
• 最初から付いているスタイル