line-height 計算｜Figma/XD の行送り (px) を CSS 倍率に即変換

デザイン CSS
結論：30秒で line-height を計算する
  • 計算式: 行送り (px) ÷ フォントサイズ (px) = line-height (単位なし倍率)
  • 計算例: 16px フォント / 24px 行送り → line-height: 1.5;
  • 推奨値: 本文 1.5 〜 1.8 / 見出し 1.2 〜 1.4

1. オンライン line-height 計算ツール

デザインツールのフォントサイズ（px）と希望する行送り（px）を入力するだけで、CSS にそのまま使える倍率を即座に算出します。

🖋️ この場で行間（line-height）を確認する

line-height（倍率） —
CSS —

2. 実務でよく使う変換パターンとコード例

/* ケース1: 本文テキスト (16px / 24px 行送り) */
.text-body {
  font-size: 16px;
  line-height: 1.5; /* 24 ÷ 16 = 1.5 */
}

/* ケース2: 見出しテキスト (20px / 28px 行送り) */
.text-heading {
  font-size: 20px;
  line-height: 1.4; /* 28 ÷ 20 = 1.4 */
}

/* ケース3: 大見出し (32px / 40px 行送り) */
.text-h1 {
  font-size: 32px;
  line-height: 1.25; /* 40 ÷ 32 = 1.25 */
}

3. なぜ「単位なし (unitless)」指定が必要なのか？

指定形式 レスポンシブ時・継承時の挙動
line-height: 24px; （px指定） 文字サイズが変更されても 24px 固定。フォントが大きくなると文字同士が重なる
line-height: 1.5em; （em指定） 親要素の倍率で計算された px が子要素に固定的継承され、崩れの原因になる
line-height: 1.5; （単位なし推奨） 各要素の自身の font-size に応じて動的に 1.5 倍が計算される（最も安全）

4. 注意点（ハマりどころ）

  1. デザインツールの「Auto（自動）」設定
    • Figma 等で Line Height が Auto の場合、フォントによってデフォルト倍率が異なります（通常 1.2 前後）。Web 実装時は明示的に 1.5 などを指定して差異を防いでください。
  2. ボタンや 1 行ラベルでの line-height 上書き
    • 上下中央揃えのために line-height を高数値に固定すると、2 行に折り返した際にレイアウトが破壊されます。上下中央揃えには display: flex; align-items: center; や padding を使用してください。