文字の高さは行の高さになります。適切な行の高さ(行間)を調節する事で文章が読みやすくなります。

今回は文字の高さを調節する line-height プロパティについて説明します。

line-height とは

文字の高さ(行間)を調節するプロパティになります。

フォントサイズと文字の高さ

以下の図は文字の高さと文字サイズ(フォントサイズ)を表しています。

文字の高さの計算

文字のフォントサイズを基準に文字の高さを指定出来ます。

基本的な計算は以下の通りです。

文字の高さ = フォントサイズ * line-heightの値

指定可能な単位

単位なしの数値、単位ありの数値を指定します。

単位なし

フォントサイズを基準に乗算した値になります。

line-heightに1.5を指定し、フォントサイズが32pxの場合、文字の高さは以下のように計算されます。

32p * 1.5 = 48px

例

HTML

<span class="sample">あいうえお</span>

CSS

.sample {
    font-size: 32px;
    line-height: 1.5;
    outline: 1px solid blue;
}

結果

単位あり

rem、em、% も指定出来ます。これらの単位については以下を参考にして下さい。

また、pxのような絶対値も指定可能です。

その他

テキストの上下中央添え

文字は行の高さに対して上下中央に位置します。これを利用してテキストの上下中央添えを実現する方法として利用される事もあります。

最後に

特にありません。