【Cocoon】フォントと行間・段落の見やすいおすすめ設定！

私はずっとCocoonをテーマとして使用しています。

色々な設定を試してきたのですが、いまいち見にくいと感じていました。

何かいい設定が存在しないかなと思いながら、Google先生に聞いてみると見つかりました。

現在、皆さんがご覧になっているブログは、その設定にしてあります。

今回の記事では、そのおすすめ設定と理由についてお伝えしたいと思います。

おすすめのフォントの設定

まずは「フォント」からです。

おすすめのフォントは一択です。

「游ゴシック体、ヒラギノ角ゴ」

他のフォントは少し丸くて非常に見にくい感じがしました。

游ゴシック体とは、読者の悩みを解決する情報を発信するブログに向いています。

つまり、「ビジネス向け」のフォントです。

ヒラギノ角ゴとは、iOS標準のフォントで高速道路の標識にも使用されています。

つまり、「視認性が高い」フォントです。

フォントサイズ

使用するフォントが決まったら、次はフォントサイズです。

フォントサイズは、

• 大きいほど視認性が高まる
• 小さいほどデザイン性が高まる

つまり、メリットを取ればデメリットも大きいといえる感じがします。

しかし、Googleは文字が小さすぎて見にくいサイトは淘汰する傾向にあるので、デザイン性ばかり重視して小さくするのも問題です。

おすすめのサイズは「16px」です。

フォントの文字色

実はずっと勘違いしていたことがあります。

みんなフォントの色は「黒」を使っていると思っていました。

しかし、実は多くのサイトでは「グレー」を使っているそうなんです。

確かに、少し黒の色が薄いとは感じていました。

また、黒は背景とのコントラストがきつく、目疲れの悪化が非常に酷いです。

これに気付いたその日に設定を変更しました。

おすすめの文字色は「#333333」です。

おすすめの段落の設定

次は段落のおすすめ設定です。

皆さん段落と行間の違いは把握していますか？

よく段落と行間の違いが分からないと言われます。

確かに慣れるまでは同じように感じるかもしれませんが、その中身は全く違います。

では、素敵な画像を拝借して説明しています。

この画像をご覧いただくと分かると思うのですが、

行間とは、一行一行の行の高さのことで「.line-height」です。

段落とは、一つの文の塊のことで「.margin」です。

つまりサイトを見やすくしようとした場合は、段落間の余白を広ければ見やすくなるということです。

行間はただの気休めです。

おすすめの段落の設定は「４」です。最大です。

おすすめの行間の設定

最後にお伝えするのは行間の設定です。

ブログ運営者を悩ませる課題の１つが行間の設定です。

広すぎても間延びしてしまうし、狭すぎても詰まって見える謎な設定です。

そこで私が皆さんにおすすめの設定をお伝えします。

おすすめの行間の設定は「1.6」です。

まとめ

色々とお伝えして来ましたが、最後にもう一度まとめていきたいと思います。

このおすすめの設定は、あくまでも私の主観ではありますが、ずっと悩んでいてたどり着いた設定です。

もし設定に悩むことがあるようでしたら、とりあえずはこのまま真似してもいいと思います。

その後に色々と試して『自分なりの設定』を見つけてください。

頑張ってください。応援しています。