【可読性アップ！】行間と文章間を詰める、空ける方法について

文字の行間が空きすぎだなーとか、文字が詰まり過ぎだなーと思ったことはありませんか？
読みやすいブログ、可読性の高い記事は、サイトの離脱率、滞在時間に影響があり、その読みやすさは行間、つまり行の高さ(line-height)が関係してきます。行の高さを変えて行間を空ける方法、詰める方法をご紹介します。

読みやすいブログの文字の行間について

この文章、行間が詰まり過ぎて見にくいですよね！？

行間を空けて見やすくしてみましょう！

cssセレクタはこちらを利用します。

line-height:

というCSSセレクタで行われます。

指定のしかたは、

• 例１：line-height: 24px;
• 例２：line-height: 1.5;
• 例３：line-height: 150%;
• 例４：line-height: 1.47em;

のように指定方法がいろいろあります。

いずれも、「文字に対してどれくらいの空白が文字の上下にあるか？」を指定するものになり、表示結果は同じです。line-heightに単位を指定すると、親要素のline-heightが子要素・孫要素にも継承してしまうため、指定しないことが多いです。

例えば、子要素が親要素よりも文字が小さくなった場合、文字の割合で行間を決めてくれず、親要素の行間が広がってしまいとても読みにくくなってしまうからです。

line-heightの計算方法について

文字の大きさ(font-size)と行の高さ(line-height)は以下の関係になっています。

16pxの文字の上下に4pxの空白があり、この合計の数字24pxがline-heightになります。

line-heightの指定には説明した通り、pxで指定、比率で指定、%で指定、相対指定があります。

• 例１：line-height: 24px;
• 例２：line-height: 1.5;
• 例３：line-height: 150%;
• 例４：line-height: 1.47em;

例１～３までは計算方法はわかると思います。16px X 1.5(150%) = 24px となります。あるいは、24/16px = 1.5(150%) という計算になります。

相対指定のemの場合も考え方は一緒で、16pxがデフォルト1emとなっている場合、24pxの場合1.5emとなります。

上の見にくい文章は、

<div style="line-height:0.9">

と指定されていました。
では、

と指定してみましょう。
行間を見やすくした文章がこちらになります。う～ん、目に優しいですね^^　1.7は、16px X 1.7=27.2pxとなります。

<div style="line-height:1.7">

ニュースサイトのその多くは文字の大きさは16px、line-heightは1.7と指定されていることが多いです。

文字の行間を空ける方法、詰める方法

まず自分のサイトの文字間隔がいくつなのか確認する必要があります。

行間を空ける方法

行間を空ける方法は、line-heightの数字を高くしてあげます。

line-height:1.7; のように。1.5以上を指定します。一般的に、文字のサイズが16pxの場合は、1.5~1.7が指定されると読みやすいと思います。

行間を詰める方法

行間を詰める方法は、line-heightの数字を低くしてあげます。

line-height:1.3; のように。1.4以下を指定します。

ここまでは、文の一つのまとまりの中での行の間隔のお話でした。次は、文のまとまりの間隔を空ける方法と、詰める方法を説明します。

人気テーマの設定方法

日本で人気の有料テーマでの設定方法を一部ですがご紹介します。

アフィンガー５(Wing)

Affinger5(アフィンガー5)は、PCでのデフォルトは以下の設定になっています。

font-size: 15px;
line-height: 27px;

スマホは、

font-size: 18px;
line-height: 30px;

端末の幅によって表示を切り替えているCSSコードになっています。それぞれの数字を変更することでサイズ変更可能です。

/*PC表示設定*/
@media print, screen and (min-width: 960px)
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, .post ul li, .post ol li, .post h5, .post h6, .post table tr td, table tr td {
    font-size: 15px;
    line-height: 27px;
}
/*タブレット表示設定*/
@media only screen and (min-width: 600px)
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, .post ul li, .post ol li, .post h5, .post h6 {
    font-size: 20px;
    line-height: 30px;
}
/*スマホ表示設定*/
p, .st-kaiwa-hukidashi, .st-kaiwa-hukidashi2, .yellowbox, .graybox, .redbox, #topnews .clearfix dd p, .post ul li, .post ol li, #comments #respond, #comments h4, .post h5, .post h6 {
    font-size: 18px;
    line-height: 30px;
}

権威8

権威の記事の文字は、remで相対的に指定されています。デフォルトは1.7remのようですので、この数字を変更すると文字の大きさを変更することができます。

.keni-main {
    letter-spacing: .025em;
    font-size: 1.7rem;
    line-height: 2.0em;
}

THE THOR (ザ・トール)

THE THOR(ザ・トール)も権威と同じように相対表示になっています。2つの端末タイプで表示を分岐しています。

以下のfont-size, line-heightの数字を変更してみてください。

/*PC表示設定*/
@media only screen and (min-width: 768px)
.content {
    font-size: 1.6rem;
}
/*768px以下の端末の表示設定(スマホなど)*/
.content {
    position: relative;
    font-size: 1.4rem;
    line-height: 1.75;

TCD テーマ

TCDテーマの場合は、これまでかなり多くのテーマを販売されており、テーマによって実装者が違うようで、CSSの書き方もテーマごとに違っています。以下にいくつかのサンプルを掲載します。

基本的にデフォルトを100%で、その他はpxで設定、line-heightは単位なしで設定していることが多いようです。

@media (max-width: 992px)
.p-entry__body {
    font-size: 14px;
}

media="screen and (max-width: 1230px)"
.post_content p {
    line-height: 2;
}

body {
  line-height: 1;
}

STORK19

ストークはbodyに基本フォントサイズが設定されています。記事本文もこの文字サイズになっています。line-heightは.entry-contet p で1.8に設定されています。

body {
    font-size:104%;
}
.entry-content p {
    line-height: 1.8;
}

ちなみに見出しについては以下のように設定されています。125%を変更してあげると文字サイズを変更することができます。

.entry-content h2:not(.is-style-stylenone), .homeadd_wrap h2 {
    font-size: 125%;
}

文の間隔を空ける方法と詰める方法

ブログの読みやすさには、行の文字の間隔も大事ですが、まとまった文章ごとの間隔も非常に大事です。

アメブロやメルマガなどですごく空白が多い記事を読んだことありませんか？

スマホでスワイプするのでかなり空白を使用することも多いですが、あまりに空きすぎても読みずらかったりします。また、ブログのジャンルによって空いてよい間隔というものもあります。

さて、具体的な話ですが、ワードプレスのテーマの仕様によりますが、ビジュアルエディタで記事を書くときに、Enterを押すと改行されます。すると別の文章のまとまりになり、<p>内容</p>タグというもので囲まれます。(p=paragraph(段落))

以下の文章のような場合に、文のまとまりごとの間隔をちょっとだけ開けたいな～って思うことがあると思います。

使われているテーマによって、段落の上下のマージン(余白)の設定が違うため、改行するとどれくらい間が空くかにも気をつかってみてください。

<body></body>に設定されている<p>に以下を設定することで、文章ごと、つまり<p>間隔を変更できます。

CSSのmarginでpタグに対する余白を設けます。以下の場合は、上下に30px、約2文字分の余白が確保されます。

<p style="margin:30px 0;">

段落はpタグになるので、文字サイズの変更で紹介したCSSコードに記載されることが多いです。

.entry-content p {
    margin: 0 0 1.6em;　/* 段落下部のマージンが1.6emになります*/
}

PCの場合はスクロールせずに1画面で読める場合でも、スマートフォンでは、スクロールしないと見れないことが多いです。

スマホだとさらさら―っと早いスピードでスクロールすることが簡単にできるので、縦に間延びした記事でも比較的読みやすいとされています。

読み手の息継ぎになりますので、スマホでライトに気軽にさらさらっと読まれる記事なのか、PCでじっくり真剣に読まれる記事なのかによっても行間と言うものはしっかり検討されるべきです。文章間隔を間違えると息つぎなしで50mを泳ぐようなもので、非常に読みづらく苦しい記事になってしまいます。

参考：世の中の文字間隔・行間隔・文章間隔トレンドについて

Googleが使っている文字間隔は？！

Googleのサイトではどのようなフォントサイズ(font-size)、行高さ(line-height)が使われているのでしょうか。

サイトリンク → Google webmaster tool

以下はGoogleのWeb master toolの記事の文章です。

cssのコードはこちらです。

.post .post-content {
　　color: #212121;
　　color: rgba(0,0,0,.87);
    font-size: 17px;
    margin: 25px 0 36px 0;
    line-height: 32px;
    word-wrap: break-word;
}

Googleの場合、line-heightをpxで指定していますね。フォントサイズが17pxに対してline-heightの行高さが32pxとなっています。結構話している印象です。別の書き方だとline-height:1.88となります。(32/17=1.8823529)

文章間隔は、上に25px、下に36pxの距離が取られています。

Appleが使っている文字間隔は？！

最近のAppleのホームページはカタログのようなサイト構造になっていて、マウスロールをコロコロ動かすとアクションを起こす仕組みになっています。

サイトリンク → Apple

製品の性格上、文字よりビジュアルが重要視されていますので、少し特殊です。

font-size:24px, line-height: 1.41667 という形になっています。

Yahooが使っている文字間隔は？！

Yahoo!JAPANのニュース記事の設定は、font-size: 1.6rem;　line-height: 1.8em; となっています。サイトが大規模で非常にたくさんのフォントサイズが使われていますので、少し参考にし辛いサイトでもあります。

サイトリンク → Yahoo!JAPAN

日経新聞(デジタル)が使っている文字間隔は！？

ニュースサイト日経新聞のデジタル版はこのようになっています。最近のトレンドfont-sizes16pxの文字にline-heightが1.7になっています。

サイトリンク → 日経新聞

.m-streamer_medium.cmn-announce_personnel,
.m-streamer_medium.cmn-article_text {
    font-size: 16px!important;
    line-height: 1.7;
}

まとめ：

行の高さ(line-height)については、数字が小さく詰まりすぎているよりも、数字が大きく空いているほうが読みやすいと感じます。つまり過ぎていると1文字1文字が読みづらくなるからです。

ただし、行の幅が空きすぎていると文字は１つ１つ認識しやすいですが、テンポよく読めなくなってしまいます。

文字(font-size)は16～17px、行の高さ(line-height)は1.7(170%、24px)くらいがよろしいかと思います。これが最近の一般的なサイズ感になっています。流し読みされずにじっくり読まれる記事に特におすすめです。

初心者でも分かるようにCSSの編集方法を解説していますのでこちらの記事をお読みください。