Line-height（行送り）計算
ピクセル単位の「行送り」を、CSSの「line-height（倍率）」へとサクッと変換計算します。
▶このツールについて
FigmaやXDなどのデザインデータで指定された「行送り（px）」を、CSSで使いやすい「line-height（倍率）」に変換する計算ツールです。フォントサイズと希望の行送りを入力するだけで、適切な記述値がわかります。
コーディング中、デザインカンプに「文字サイズ16px、行送り24px」と書かれているのを見て、電卓を叩いて
line-height: 1.5; を計算した経験はありませんか？ このツールを使えば、そんな地味な割り算を素早く行えます。ウェブデザインにおいて、文字の読みやすさを左右する行間（line-height）を、ピクセル単位の直感的なイメージからCSSの単位を持たない相対値（倍率）へとスマートに変換します。ツール操作
line-height（倍率） —
CSS —
使い方
- フォントサイズ（px）と希望する行送り（px）を入力します
- line-heightの倍率が即座に計算されます
- 計算結果をCSSのline-heightプロパティに使用します
いつ使うか
デザインカンプの行送りをCSSに変換、タイポグラフィの行間設計に。
使用例
16px・送り24px → line-height: 1.5、14px・送り21px → line-height: 1.5。
よくある質問
line-heightの単位なしの意味は？
フォントサイズに対する倍率。1.5ならフォントサイズの1.5倍の行の高さになります。継承時も相対的です。
行送りとline-heightの違いは？
同じ概念。デザインでは「送り」、CSSではline-height。送り(px) ÷ フォントサイズ(px) = line-heightの倍率です。
line-heightの推奨値は？
本文は1.5〜1.8が読みやすい。見出しは1.2〜1.4。このツールでデザインの送り(px)から倍率を計算できます。
行送りをpxで指定する場合の計算は？
希望する行の高さ(px) ÷ フォントサイズ(px) = line-heightの倍率。例: 24px送り ÷ 16px = 1.5。
line-height: normalとは？
ブラウザのデフォルト（通常1.2前後）。フォントによって異なります。明示的に指定する方が一貫性が出ます。
タイポグラフィの行間設計のコツは？
本文は1.5〜1.8で可読性確保。見出しはやや詰めて1.2〜1.4。このツールでpx送りから倍率を算出できます。
デザインカンプの送りとは？
行と行の間隔。IllustratorやFigmaでは「行送り」や「leading」で指定。pxで渡された値をline-height倍率に変換する必要があります。
line-heightを継承させるには？
単位なし（1.5など）で指定すると、子要素のフォントサイズに応じて相対的に継承されます。px指定は固定値です。
複数行テキストの行間を揃えるには？
line-heightで倍率を統一。フォントサイズが異なる要素でも、同じ倍率なら視覚的な間隔が揃います。
行送り計算ツールの使い方は？
フォントサイズ(px)と希望する行送り(px)を入力するだけで、line-heightの倍率が即座に計算されます。
関連ツール
タイポグラフィセット