フォント font-family 2014年版

更新:

2014年現在、ウェブサイトに最適なフォントは何か。
対象 : Windows 8.1/7、Mac OS X 10.9、Internet Explorer、Safari、Firefox、Google Chrome

フォント 2014年版

私のサイトのHTMLは今まで <html> と書いていたものを <html lang="ja"> に変更した。
どうやら lang="ja" を書くと、環境によってはバックスラッシュが円マーク(¥)になるようだ。
環境というのはブラウザの種類、サイトで指定したフォントの種類や文字コードなど。
環境に依存するので、バックスラッシュを ¥ として表示するためには使えないが気になった。
そして、この件がきっかけで久しぶりに私のサイトで使うフォントを再考した。

今まで私のサイトのフォントは、Google や Wikipedia などのフォントを参考に
font-family: arial, sans-serif;
としていたが、2014年現在 Wikipedia の基本のフォントは sans-serif だけ指定しているようなので、うちのサイトも sans-serif だけにした。
うちのサイトは Wikipedia のように説明が多いため、多くの人が見慣れている Wikipedia のフォントのサイズや種類(書体)を参考にしている。
font-family: sans-serif;
ただ、閲覧環境によるが英数字に関しては arial の方が見やすい。
見やすさという点では、Windowsではメイリオ(Meiryo)、Macではヒラギノ角ゴ ProN(Hiragino Kaku Gothic ProN)を指定するのも良い。
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
個人的にはメイリオはメニューなどの単語は見やすいが、長文はあまり見やすいとは思わない。
MS Pゴシックなどのフォントに慣れすぎているせいかもしれないが。
一方、ヒラギノ角ゴ ProN は全般的に見やすい。

sans-serif のみ指定した場合、Windows 8.1&IE11 ではメイリオ、Mac OS X 10.9 Mavericks&Safari ではヒラギノ角ゴ ProN で表示された。
ただし、Windows 7 や Windows 8.1&IE以外のブラウザでは従来のフォントのまま。
Mac OS X 10.9 は、lang="ja" なしで arial, sans-serif ともに従来のフォント、lang="ja" ありで sans-serif のみ指定で Safari 使用時に ヒラギノ角ゴ ProN になる。
様々な閲覧環境を考慮すると、sans-serif など最低限必要なものだけ指定するのが無難だろう。
Macは sans-serif で何かしら良さげなフォントで表示されるだろうということで、最終的にメイリオだけ指定した。
font-family: Meiryo, sans-serif;
ただ、Macでも Microsoft Office をインストールしているとメイリオが表示される。
このエントリーをはてなブックマークに追加