【CSS】文字の「行間」と「字間」の指定方法とおすすめの値

行間と字間の指定方法まとめ

文字の行間と字間は、デザイン性と読みやすさに大きく影響を与えます。完成度の高いウェブサイトやブログを作るうえでは、CSSの行間・字間の基本的な知識は欠かせません。この記事では、これらの基本的な設定方法とおすすめの設定値を紹介します。

1. 行間(行高)を指定する方法

{line-height: 値}

CSSではline-heightプロパティで行間を決めます。行間は字間以上に文章の読みやすさに直結するので、Webサイトやブログを作るときには必ず指定しておくべきでしょう。

line-heightとは

line-heightではこの図のようにそれぞれの行の高さを指定します。line-height自体は行間ではなく、行高を指定するものなのです。

1-1. line-heightの値

値の指定には数パターンの方法があります。

取ることのできる値

  • normal←初期値→ ブラウザが自動的に行高(行間)を決めてくれる
  • 数値+px→ 決まったpx数を指定
  • 数値+em→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
  • 数値+%→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
  • 単位なし(数値のみ)←オススメ!→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる。line-height: 1.5のように値だけで書く。

pxでは「line-height: 24px」というように決まった値を指定します。em、%、単位なし指定は、文字の高さ(フォントサイズ)に応じて行高を調整してくれるものです。

1-2. px指定よりも相対指定がオススメ

line-heightをpxで指定すると…

pxで指定すると、フォントサイズが異なる文字に対して、いちいちline-heightを指定し直さなければなりません(でないと不自然な行高になってしまいます)。

行間を相対値で指定すると

一方で、em、%、単位なし指定であれば、フォントサイズを考慮した行高になるので、異なる文字サイズに対しても基本的に指定をし直す必要がありません。

そのためpxで指定するよりもスマートだと言えるでしょう。

1-3. 単位なし指定が1番オススメ

emや%よりも「単位なし指定」がオススメです。なぜかというとemや%だと親要素で計算された行高が、子要素にそのまま引き継がれてしまうからです。つまり、親要素のフォントサイズが40px、子要素のフォントサイズが20pxの場合にも、子要素には親要素と同じ行間が適用されてしまうのです。 一方で単位なし指定の場合、子要素のフォントサイズに応じて行高を計算し直してくれます。【参考】CSSのline-heightで単位を指定しない理由なんにせよ、line-heightは単位なし(数値のみ)で指定をするようにしておけば間違いありません。

1-4. 行間の作られる仕組み

では単位なし指定の場合、どのように行間が決まるのでしょうか。

line-height1の場合

line-height:1の場合、行の高さ=文字の高さとなります。上下に余白はできません。

たとえばフォントサイズが24pxでline-height:1の場合、行の高さは24pxになります。

line-height:2の場合

line-height: 2の場合、この図のように文字の上下にスペースができます。2のうちの1は文字自体占めます。残りの1は、上下に0.5ずつ割り振られます。

たとえばフォントサイズが20pxでline-height:2の場合、行の高さは40pxです。このうち、上下には10pxずつのスペースができています。

line-height2の場合の行間

つまりline-height: 2の場合、前後の行とは「1」の分だけの行間ができることになります。

1-5. オススメのline-heightの値

読みやすさとデザイン性を考えると、line-heightは1.5〜2.0くらいがベストです。それより小さいと窮屈に見え、それより大きいとスカスカに見えてしまいます。実際にコードを書いて見てみましょう。

line-height:1.5の場合

HTMLコード
<p>これは1行目です。<br>これは2行目です。</p>
CSSコード
p {line-height: 1.5}
ブラウザ表示

これは1行目です。
これは2行目です。


ちょうど良いくらいですね。

line-height:1.7の場合

HTMLコード
<p>これは1行目です。<br>これは2行目です。</p>
CSSコード
p {line-height: 1.7}
ブラウザ表示

これは1行目です。
これは2行目です。


↑少し余裕があります。個人的にはこのくらいが好きです。

line-height:2.0の場合

HTMLコード
<p>これは1行目です。<br>これは2行目です。</p>
CSSコード
p {line-height: 2.0}
ブラウザ表示

これは1行目です。
これは2行目です。


↑少し広すぎる気はしますが、このあたりは好みですね。1.5〜2.0くらいの間で自分のWebサイトやブログにマッチする行間を見つけると良いでしょう。

行高をブログのpタグに対して指定する

行間は文章に対して指定したい場合が多いと思います。というわけで段落を表すpタグに対してline-heightを指定しておけば良いでしょう(釈迦に説法かもしれませんが…)。

CSSコード
p {line-height: 1.7}

このコードをCSSに書けば、ウェブサイトの段落全てに1.7の行高が適用されます。

2. 文字間を調整する方法

{letter-spacing: 値}

次は文字どうしの間隔(=字間)の設定方法を解説します。CSSでは字間の調整をletter-spacingというプロパティにより設定します。

字間の調整

この図のように、letter-spacingでは文字と文字の間のスペースを設定します。

2-1. letter-spacingの値

値の指定の仕方は以下のようになります。

指定のパターン

  • normal←初期値→ ブラウザが自動的に字間を決めてくれるが、実際0になることがほとんど
  • 数値+px→ 決まったpx数で字間を指定
  • 数値+em ←オススメ!→ 相対的な比率を指定しておくと、フォントサイズに応じて字間が決まる

初期値はnormalなので、とくに何も指定をしなければnormalとなっています。normalではブラウザが自動で決めてくれるというようになっているももの、実際のところnormal だと字間ゼロ(letter-spacing: 0)になっています。

2-2.「em」で指定するのがおすすめ

letter-spacingもpxで指定するより、相対的な比率で指定したほうが良いでしょう。line-heightと同様に、文字のサイズに応じて字間を変えてくれるからです。letter-spacingの場合、相対的な比率で指定するときは単位にemを使います。

emの字間の考え方

1em=「文字の高さ」となります。たとえば、0.1emだと「文字の高さの1/10の大きさ」の字間ができるということになります。0.5emだと「文字の高さの1/2の大きさ」の字間ができるということですね。

2-3. letter-spacingのおすすめの値

個人的には初期値の状態でも(字間0でも)十分見やすいかと思います。指定するのであれば、おすすめは0.05em〜0.1emくらいです。これ以下だとほとんど違いが分からず、これ以上だとスカスカに見えます。

letter-spacing: 0.05emの場合

HTMLコード
<p>これは例文です(指定なし)</p>
<p class="font_space">これは例文です(0.02em)</p>
CSSコード
.font_space {letter-spacing: 0.05em}
ブラウザ表示

これは例文です(指定なし)

これは例文です(0.05em)


↑例文だと違いがいまいち分かりませんが、実際に長文に適用してみると結構印象が変わります。

letter-spacing: 0.1emの場合

HTMLコード
<p>これは例文です(指定なし)</p>
<p class="font_space">これは例文です(0.1em)</p>
CSSコード
.font_space {letter-spacing: 0.1em}
ブラウザ表示

これは例文です(指定なし)

これは例文です(0.1em)


↑0.1emだと結構字間が広めになります。これ以上広げると文章が読みづらくなってしまうので、0.1em以下にするのが良いでしょう。

2-4. 値をマイナスにすると字間が狭くなる

値は0より小さくしてもOKです。その場合、何も指定していないときよりも字間が狭くなります。たとえば、字間を-0.1emにしてみます↓。

HTMLコード
<p>これは例文です(指定なし)</p>
<p class="font_space">これは例文です(-0.1em)</p>
CSSコード
.font_space {letter-spacing: -0.1em}
ブラウザ表示

これは例文です(指定なし)

これは例文です(-0.1em)


実際にWebサイトやブログで指定するときには、いくつかの値を入れてみて、どれがベストか吟味すると良いでしょう。

3. まとめ

最後にこの記事の内容をまとめておきます。

まとめ
  • 行高(line-height)は単位なしで指定するのがおすすめ
  • おすすめの値はline-height: 1.5〜2.0
  • 字間(letter-spacing)はemで指定するのがおすすめ
  • おすすめの値は0.05〜0.1em。もしくは指定しない。
サルワカ