テクノロジー・動画・写真・デザインとか

Web制作者&自前でブログの人はフォントをメイリオ&ヒラギノ角ゴシック Proを指定しようぜ!

ブラウジングしていると、ふと気になることに「フォント」がある。

ブラウザのフォントは基本的にhtmlのCSSで指定したフォントがPCにインストールされていれば、そのフォントが表示されるようになっているが、指定がなければデフォルトのフォントが表示されるようになっている。

もちろん個人差があるが、フォントによっては見づらいなと感じることがある。

そこで、Webサイト制作や自前でWebサイトやブログを持っている人は、ぜひともフォント指定をして欲しいと思い、どんなフォントがいいのかと画面キャプチャを取って検証をしてみた。

Windows 7 – Chrome 21.0.1180.77 – MS Pゴシック

下記はWindows 7でのフォントの無指定、又はCSSのsans-serifでの指定をした場合に表示される「MS Pゴシック」を画像でキャプチャしたものだ。
Windows Vistaでメイリオのフォントが登場するまでは主流だった。
Windows 7 - Chrome MS Pゴシック

続きを読む

Windows 7 – Chrome 21.0.1180.77 – MS P明朝

MS P明朝、或いはserifを指定した場合の表示だ。
視認性は悪くないが、ゴシックと比べて少し見づらい感がある。
Windows 7 - Chrome MS P明朝

Windows 7 – Chrome 21.0.1180.77 – メイリオ

これは、メイリオを指定した場合の様子。
明らかにハッキリ、クッキリと綺麗に見える。
Windows 7 - Chrome メイリオ

Windows XPでメイリオのフォントを使用したい人はここからダウンロードできる。
Windows XP 向け ClearType 対応日本語フォント

Windows 7 – Chrome 21.0.1180.77 – ヒラギノ角 Pro

ちなみに、これはMacのOS Xから標準で搭載されたヒラギノ角 Proのみで指定した場合の表示だ。
Macでは綺麗に見えるが、残念ながらWindowsで見るとフォントサイズによっては妙にジャギっている感があったり、ボヤけて見える。
Windows 7 - Chrome Pro

Mac OS X 10.6.8 – Chrome 21.0.1180.79 – ヒラギノ角 Pro

MacのChromeでのフォントを指定しなかった場合の標準は、デフォルトでインストールされているヒラギノ角 Proが表示される。
それなりに、安定した見え方ができる。
Mac OS X 10.6.8 - Chrome ヒラギノ角 Pro

Mac OS X 10.6.8 – Safari 5.1.7 – ヒラギノ明朝 Pro

Mac OS X 10.6.8のSafariの場合、デフォルトではヒラギノ明朝 Proが適用される。
綺麗に見えるがフォントのサイズによっては、薄くなってボンヤリと見えてしまう。
Mac OS X 10.6.8 - ヒラギノ明朝 Pro

検証結果:見やすく、美しく

以上の検証結果からしてブラウザ上で明朝体は見づらいので、CSSでの指定はゴシック体の方が好ましい。
また、Windwos Vista&Mac OS X以降及び、MacとWindowsの両方の見やすさを考慮すと下記のように記述するのが望ましいと考える。

Meiryo, ‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3’,sans-serif

ポイントは、Widonsでヒラギノ角が優先して適用されないように、メイリオを先に記述、また古いOSでは明朝体ではなくゴシック体で表示させるためにCSSの「総称ファミリ」sans-serifを記述。

今すぐテーマフォルダの中のstyle.cssを開いてfontの指定を修正だぜ!