大手ブログは守ってない？line-heightを比較してみた。

実際に設定されているline-heightを比べてみよう！！

前回、行間ってこんなもんなんじゃないかなっていっぱい考えてみたけど、いざ実践的に使用するならどうしよう？

僕の学生時代にみた初心向けのブログでは行間は1.5~1.7なんて記事をよく目にした。エディトリアル系なんかはこんなもんなんじゃないかなと思うのですが、今は違う。そう、時代で基準が変わるなんてよくある話。

結論から言うと日本語の本文ならline-height:1.5～2.2までばらばらで自分のサイトに合わせて最適なものを見つけるしかないと思う。

最適って何？って言われたら自分がイメージするデザインと似ているものを見つけてそれと同じ数値を基準に少しづつ変えて試すしかない気もする。

個人的な好みは1.9-2.1あたりの行間広めが好き文章を読んでいるときに行間が詰まっていると行の読み飛ばしや逆戻りしたりすることがあるから可読性重視

じゃあ、今はどういう風に言っているのか比較してみよう。

1.大手ブログではどんな行間を推奨しているの？

”一般的に、行間（行と行のあいだ）はフォントサイズの75%前後が適切だと言われています。CSSの設定でいうと、line-height : 1.75 くらい。わたしはヒラギノ角ゴシックの本文なら、line-height : 2 くらいが、じっくり読める気分がして好みです。”

line-height:1.75－2.0推奨
記事発表日　2016.01.27

LIG  ＜デザイン上達の秘訣は「文字の扱い方」！テキストを読みやすくする5つのポイント＞

”・行間は150〜200%を目安とする”

line-height:1.7em
記事発表日2017.02.01更新

UXMILK   ＜見やすいサイトを作るときに最低限チェックしたい６項目＞

”文字テキスト全体のバランスを整えるには、行間の高さをX-ハイトの150%に設定しましょう。より簡単にこのルールを適用するには、行間の高さ（Line Height）を文字テキストサイズの125%に設定します。”

line-height:125％
記事発表日2015.7.29更新

PHOTOSHOP VIP   ＜デザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめ＞

※PHOTHSHOP VIPは、記事の内容も古く、また英語の翻訳記事なので日本語向けではないので真に受けてはいけない

ほとんどのところで1.5〜2.0が推奨されています。
数値はバラバラですが、基本的に発表日が新しいほど行間が大きくなっているのが特徴です。大手ブログだし、この数値に合わせていればいいじゃない？って思うでしょうが、そうでもない

2.今見たブログの実際に設定されているline-height

さて、みんなは推奨値見たし、大手様はその基準を守っているのか？なんて嫌味な精神で調べてみた。

確認日：2018.12.01時点

LIG
line-height:2.3

UXMILK
line-height:1.7

PHOTOSHOP VIP
line-height:2.1

あれ？！2.0上回ってんじゃん！
LIGや他のブログでも2.0くらいがベストと記事で言いながら、自身のブログの行間はそれ以上に設定している。
フォローするなら、これらのブログ記事で言っている数値の基準はあくまで自分で数値を決めるのに迷うならこの数値が無難って話

この矛盾点から大手だからと言ってその情報の信憑性はおばあちゃんの知恵袋程度なのでしょう。あくまで基準点、守るべきルールではない。

3.人の推奨とか気にしないで自分で考えて決めるのが一番だと思う。

先ほども言いましたが私は２.0あたりが好きです。それは可読性を優先した場合のみの話です。
今あなたが行間を決めようとしているなら、ページの見せたいものによって行間は変わります。文字間隔や文字サイズ、フォントによっても影響があるでしょう。
大手ブログと同様に、この記事についても気にせず自分が最適と思える数値をデザインする内容に合わせて設定すればいいと思います。
新人が何も知らないくせに！なんて気持ちが出た人はぜひ私が気づいていない色々な意図や法則を広めていただければと思います。