見やすいブログやサイトのフォント

ブログのスタイルシートでフォントを指定すると意図したフォント順で表示されるようになりますが、見やすいサイトやブログではどのようなフォントを使用しているのでしょうか。前の記事でおしゃれフォントの記事を書いたんで、ついでにcssのフォント指定のあれこれもしておこうと思います。

有名ニュースサイトのcssフォント

見やすいフォントを探して、日本の有名なニュースサイトでcssソースのフォントのところをいくつか覗き見してきました。調べた結果としてはどうもまちまちというところが多かったような気がしますが、一般的にはフォントはみっつぐらい指定しているようです。

スタイルシートでフォントを指定するには、font-familyの箇所をあれこれして優先順位をみっつぐらい指定してあげるといいです。詳しくはスタイルシートリファレンスのfont-familyあたりを参考にすれば簡単に設定できます。

cssでフォント指定するのはかなり簡単ではありますが、実際にどのフォントにすれば見やすいブログになるの？っていう疑問が残ったりします。

個人のブログでは適当にやっててもかまわないと思いますが、ニュースサイトは読まれてなんぼだと思うんで、フォントにもかなり神経をつかっていることと思います。

そんなわけで３つほど有名ニュースサイトのフォントを覗き見してみたのですが、だいたいこんな感じになっているようです。海外は英語フォント？なんでみてないです。調べたいニュースサイトのcssソースでfont-familyを検索かければ出てきます。

1. font-family:verdana, helvetica, arial, sans-serif;（某サイトＭ）
2. font-family:lr oƒSƒVƒbƒN","MS PGothic", Osaka, Sans-Serif;（某サイトＭ）
3. font-family:arial,geneva;（某サイトＥ）
4. font-family:Verdana, Arial, sans-serif;（このブログフォント）

某ニュースサイトＹ!も調査してみたのですが見つかんなかったんであきらめました。総じて見てみるとどうも、arialやVerdanaの人気が高いみたいです。

ただ、どのサイトでもタイトルやテキストの部分ではフォントに違いがあるようで、このブログでもＨ１の見出し要素ではTrebuchet MSを使用しています。

フォントによってはＩＥとファイアーフォックスでのブラウザ違いがあるようで、全面的に使用するにはちょっとなっていうフォントもあるようです。

総じてみるに、これらの代表的なフォントを設定して、あとは行間を適当にゆったりとるといい感じになるのではないかなと思います。フォントサイズも個別記事では大きめにすると見やすいのではないかなって気がします。

このブログのテキスト部分はfont-size:14px;line-height:170%;で設定しているのですが、ニュースサイトのようにもう少し大きめのフォントサイズにしたら読みやすくなるかもしれないです。大きさを指定する場合はpx指定などのほか、パーセンテージでの指定方法などいろいろあります。

ちなみに前の記事でシネマちっくなおしゃれフォントをダウンロードしたのですが、ブラウザで設定してみるとコムズカシイ堅い記事もかわいらしいフォントで表示されるので読みやすくなったりもします。

お気に入りのおしゃれフォントをブラウザの標準で設定しておくとなかなかいい感じです。ＩＥの場合は「ツールーインターネットオプションーフォント」の箇所で変更可能です。