line-height計算ツール
フォントサイズと行間（行送り）から、line-heightの倍率を計算します。
px → 倍率
倍率
1.75
上下余白
各 6px
line-height: 1.75;
プレビュー
イーハトーヴォというのは一体どこのことなのか、
私にはそれがよくわかりませんでした。
私にはそれがよくわかりませんでした。
font-size: 16px
line-height: 1.75
倍率 → px
28px
使い方
1
フォントサイズを入力
デザインカンプのフォントサイズを入力します。
2
行間（行送り）を入力
デザインソフトの「行送り」や「leading」の値を入力します。
3
倍率をCSSに適用
計算された倍率をCSSのline-heightプロパティに設定します。
line-height計算とは
line-heightは行の高さを指定するCSSプロパティです。倍率（単位なし）で指定すると、フォントサイズに対する比率として計算され、子要素にも適切に継承されます。デザインカンプの「行送り」をCSSに変換する際に使用します。
機能
- px→倍率変換行間のpx値からline-heightの倍率を計算
- 倍率→px変換倍率から実際の行間pxを逆算
- 上下余白表示文字の上下にできる余白を計算して表示
- リアルタイムプレビュー設定値での見た目をプレビューで確認
活用シーン
- Figma/XDからCSSへの変換
- タイポグラフィの設計
- 可読性の高い本文設定
- 見出しの行間調整
- デザインシステムの行間ルール策定
よくある質問
なぜ倍率（単位なし）で指定するのが良いのですか？
単位なしの倍率は、フォントサイズに応じて自動的に行間が計算されます。pxやemで指定すると、子要素のフォントサイズが異なる場合に不適切な行間になることがあります。
本文の推奨line-heightは？
日本語の本文では1.7〜2.0程度が読みやすいとされています。英文では1.5前後が一般的です。文字が詰まりすぎず、間延びしない値を選びましょう。
デザインソフトの「行送り」とは？
行送り（leading）は、ある行のベースラインから次の行のベースラインまでの距離です。Figmaでは「Line height」、XDでは「行の高さ」と表示されます。