📏行間最適化計算ツール

フォントサイズと用途から最適なline-height値を計算

px

行間最適化計算ツールの使い方

フォントサイズ(px)とコンテンツタイプを入力すると、最適なline-heightの比率とピクセル値を計算します。本文は1.5〜1.7、見出しは1.1〜1.3、UIボタン・ラベルは1.0〜1.2、コードブロックは1.4〜1.6が適正範囲です。

line-heightが狭すぎると文字が詰まって読みにくくなり、広すぎると段落がバラバラに見えます。16pxの本文テキストにはline-height: 1.6(≒25.6px)が最もよく使われます。

CSSでは単位なしの数値(例:line-height: 1.6)の使用が推奨されます。子要素に継承されるとき、フォントサイズに比例して自動計算されるためです。

よくある質問

line-heightに単位は必要ですか?

CSSでは単位なしの数値(例:1.6)が推奨されます。子要素に継承されるときフォントサイズに比例して自動計算されるためです。

モバイルではline-heightを変えるべきですか?

画面が狭いと改行が多くなるため、本文は1.5〜1.6程度で十分です。デスクトップでは1.6〜1.7がより読みやすくなります。

見出しのline-heightが低い理由は?

フォントサイズが大きいと行間が広く見えるためです。1.1〜1.3にすることで見出しがひとまとまりとして視覚的にまとまります。