ブログ・サイトにおすすめブログに使えるおすすめフォントは？そのサイズと行間など。

本日も”Webledge“をご覧いただきありがとうございます。管理人のけーすけ(@webledge_blog)です。

みなさんフォントってどうしていますか？？もう僕は結構悩んでいます・・・かなり悩んだ末に結構勉強して、今のフォントにたどり着きました。でも実際に本当に全部の方に最適化できているのかはいまだ模索中。

もちろん「これが正解！」と確実に言えるというものではないですが、僕個人の意見としてなぜこのようにしたのかなど、参考になればと思い、そのプロセスを解説していきたいと思います。

どのようなフォントがよく、なぜその行間なのかなどを理解して、自分なりに最適解を導き出してみてください！

ブログサイトの文章で利用するフォントのおすすめについて

当ブログの文字フォントとそのサイズ

僕のブログ読みやすいのかな・・・？あまり意識したことはありませんが、読みやすいと自分では信じています。笑

僕のサイトでのフォント情報はまとめるとこんな感じ。

結構一般的なフォント構成ですが、他のブログよりも少しだけフォントが大きいのではないかと思います。ちなみにスマートフォンでは横幅が狭い分少し大きめに行間をとっています。

コードでfont-familyは下記のような感じ。(2017年1月15日現在)

基本的には読みやすいと感じている「游ゴシック体」にしているのですが、英数字のフォントが少し気に入らなかったので「Quicksand」というGoogleのウェブフォントを利用しています。

このように「Quicksand」のウェブフォントをfont-familyに入れるときには下記のコードもちゃんと入れてくださいね。

とりあえず一般的に読みやすい文字にしたい！という方はこれで設定してみるといいかも。ちなみに僕もはじめは他サイトの真似をしただけなんですけどね。笑

※すみません執筆中になんかいいフォントを発見したので今現在(1月25日)は少し設定を変更しています。

ブログに適切なフォントとは？

そもそもブログに最適なフォントとはなんでしょうか。アイキャッチであれば

こんなかんじのフォントもいいと思いますが、これがサイトの本文であるのは読みにくいですよね・・・ということでサイト本文に使うフォントは出来るだけ読みやすい、一般的なフォントがいいと思います。

ということで僕が考えた、もっともブログ・サイトでおすすめなフォントについて2つご紹介します。

英数字のウェブフォント＋游ゴシック体

今までブログで表示させるのはメイリオが一般的でした。それも「游ゴシック体」というフォントの登場によってかなり淘汰され始めているとは思いますが、僕も游ゴシックのほうがすき。

コードは先ほどもご紹介しましたが、おさらいです。

↓font-family

↓Quicksandの読み込み

 

メリットとしては、まずこのフォント設定は読み込みが早いです。游ゴシックというのがもともとのOSにインストールされているフォントなので時間がかからない。また、Windowsでもアンチエイリアスがしっかりとかかるので、フォントがギザギザにならない。

ただ、デメリットは少しフォントが細いということ。特にWindows環境だと気になるかも。游ゴシックは数字フォントが少し太く感じてしまうので、そこはGoogleのフォント「Quicksand」で置き換えました。

 

Noto Sans Japanese

これが最近一番気に入っています。今までGoogleの提供しているWebフォントは英語しかなかったのですが、最近日本語が出たみたいなのです！

いろいろとある中で、「Noto Sans Japanese」というフォントが最強にかっこよかったので、これが今は一番のおすすめになりつつあります！

↓font-family

↓Noto Sans Japaneseの読み込み

デフォルトが多分「font-weight:400;」となっていると思いますが、なんとなく僕は太い感じがしたので、「font-weight:300;」として利用しています。

 

まぁこのフォントの良さは圧倒的な見やすさ。游ゴシックだと少しWindowsとMacで表示が違って見えるのですが、このフォントだとほとんど差は感じないです。もちろんWindowsではアンチエイリアスが効きますので、ギザギザにならない。

数字のフォントも読みやすいので、わざわざ数字フォントを読み込まなくても洗練されたフォントに感じます。

 

デメリットとしては、読み込みの遅さ。游ゴシックとは違って元々インストールしてあるフォントではなく、かつ結構このフォントが思いので、サイトを開いた時に文字が表示されるまで多少のタイムラグが発生します。

 

まぁ、どちらもメリット・デメリットが混在しているので、お好きな方で試してみるのがいいと思いますよ！

まとめ：フォントで他のブログに差をつけろ。

なんか色々書こうと思ったのですが、結構長くなってしまったので行間やフォントサイズなどについてはもっと詳しく別の記事で書こうと思います。

最近のブロガーはみんなMacで書いているのでしょうか？結構Windowsでのフォントが読みにくいサイトが多いです。そもそもWindowsではデフォルトのフォントがギザギザになっているので、わざわざアンチエイリアスのきいたフォントを指定しないと少し読みにくくなります。

Windowsでアンチエイリアスが効くのは、「メイリオ」「游ゴシック」「WEBフォント」くらいなので、サイトのフォント構造はここからしか選択肢はなさそう。(他にもあるかもしれませんが代表的なのは多分上記3つ。)

僕は多少の読み込みの遅さよりも、読みやすさを重視してWEBフォントを使っています！みなさんもぜひお試しを！

ちなみにアイキャッチとかで差をつけたい時とかは下記の本などに付いてくる日本語フォントを使うと結構捗っておすすめですのでぜひ・・・！