CSS line-height の推奨値（1.6〜1.8）と単位なし指定すべき理由

WebデザインおよびCSSコーディングにおける適切な line-height（行高・行間）の決め方、Figma等のデザインカンプからの計算方法、および単位指定による継承の注意点です。

1. オンライン line-height テスター ＆ 計算ツール

フォントサイズと行高を指定して、CSSの倍率指定（無単位）をリアルタイムに確認できます。

---

2. 要素別の推奨 line-height 一覧表

日本語フォントは英字（Latin）に比べて正方形（仮想ボディ）に近い全角形状を持ち、画数も多いため、英字よりもやや広い行間（1.6〜1.8）を設定することで視認性と判読性が跳ね上がります。

対象要素	推奨 line-height	理由・デザイン上の効果
本文 (Body / 記事テキスト)	1.6 〜 1.8	長文を読んでも目が滑らず、次の行への視線移動がスムーズになる
大見出し (H1 / H2)	1.2 〜 1.4	文字サイズが大きいため、広い行間だと別の見出しに見えてしまう
小見出し (H3 / H4)	1.4 〜 1.5	本文より少し引き締まった印象を与える
UIパーツ (ボタン / タグ)	1.0 〜 1.2 (または flex 中央揃え)	上下中央揃えを維持し、無駄な上下余白を排除する

---

3. なぜ line-height に単位（px / em）を付けてはいけないのか？

CSSでは line-height: 24px や line-height: 1.5em のように単位を付けると、計算済みの固定px値が子要素に継承されるため、表示崩れが発生します。

❌ 単位あり（1.5em）指定で起きる事故

.parent {
  font-size: 16px;
  line-height: 1.5em; /* 16px * 1.5 = 24px の固定値として計算される */
}

/* 子要素でフォントサイズを大きくした場合 */
.parent .child-title {
  font-size: 32px; 
  /* 継承された line-height は 24px のまま！ -> 文字同士が上下に重なって潰れる */
}

✅ 単位なし（1.5）指定（正解）

.parent {
  font-size: 16px;
  line-height: 1.5; /* 単位なしの「倍数」として継承される */
}

.parent .child-title {
  font-size: 32px; 
  /* 子要素自身の 32px * 1.5 = 48px に動的再計算される -> 崩れない */
}

---

デザインカンプの Line Height (px) ÷ Font Size (px) = CSS line-height (倍数)

例: 26px ÷ 16px = 1.625 → line-height: 1.625;