フォント指定はコレで決まり！僕の考える最高のfont-family(CSS)-2014年

どーも＠PNRAです！

今日は弊社がオススメするフォント指定について話をしていきたいと思います。

ホームページ作成において、フォントが持つ印象はウェブサイトの印象を大きく左右します。特に欧文書体（英字）と異なり和文書体（日本語）は、デフォルト設定のフォント数の制限が多く、デザインの幅がどうしても狭まってしまいます。またウェブフォントを利用するという方法もありますが、読み込み速度を考えるとあまり使いたくないというのが弊社としての意見です。
そこで標準搭載されているフォントの中から、「これが最高じゃね？」と考えるフォントの指定についてを記載していきたいと思います。

フォントの指定に関してはIEというのが正直ネックで更に制限をかけていたのですが、少し前にWindows XPのサポートが終了したことで、IEの主流はバージョン8以降となりました。（心からありがたい）
ということで、具体的に見ていきたいと思います。

明朝体にするか、ゴシックにするか

CSSのfont-familyを指定しない場合、ホームページのテキストは、ブラウザ毎（IE,Chrome,FireFox,etc）の標準フォントでの表示になります。この標準フォントというのはブラウザによって様々です。指定をしない場合、閲覧環境によって表示領域にズレが生じてしまうこともあるため、忘れずに指定しましょう。

ブラウザの標準フォント

Safari 7.0 / Mac OS X 10.9	Times / ヒラギノ明朝 ProN
Firefox 25.0 / Mac OS X 10.9	ヒラギノ角ゴシック ProN
Chrome 30.0 / Mac OS X 10.9	ヒラギノ角ゴシック Pro
Internet Explorer 8.0 / Windows 7	Arial / ＭＳＰゴシック
Internet Explorer 11.0 / Windows 8.1	Times / ヒラギノ明朝 ProN
Firefox 25.0 / Windows 8.1	ヒラギノ角ゴシック ProN
Chrome 30.0 / Windows 8.1	ヒラギノ角ゴシック Pro

引用：フォントカタログ5・ブラウザのデフォルトフォント

またWindows環境では、線の細くなる明朝体ではアンチエイリアスがかからないことがあるため、読みにくい上に見た目に美しくありません。実際、多くの企業やサービスサイトを見回してもテキストを明朝体にしているところは圧倒的に少なく、ほとんどがゴシック体です。
そこで、今回はゴシックをベースに考えていきたいと思います。

最高のfont-familyはこれでしょう。

では、実際に僕がオススメする最高のfont-familyをお伝えし、且つなぜそれが最高なのか？についてお話していきたいと思います。

僕のオススメする最高のfont-family

body {

Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

}

これで決まりでしょう。決まりって言って下さい。（必死）

当ブログを読んでいる方で、見易いなぁ、と思ったら是非こちらを指定してください。コントロール+Cとコントロール+Vで2秒であなたのサイトも同じようにできます。

っと正直、macに寄せたフォント指定です。はい。mac大好きです。

フォント指定は合成フォントで、アルファベットの指定を頭に、続けてカナを指定していきます。

僕の考える上でアルファベットに関しては、『Avenir』を真っ先に持ってきます。iOS6以降に実装されているフォントなので、比較的新しいフォントですが「スターバックス」のブランド書体に起用されているように、非常に美しい書体です。また『Avenir』の代替として『’Helvetica neue’』『Helvetica』を。皆さんご存知のヘルベチカです。印刷の世界ではコレ抜きには話せないというくらい世界的な標準となっているフォントです。（ちなみにIE 7は標準搭載していません。）
次に日本語の指定ですが、私がオススメするのは『’游ゴシック’』『YuGothic』です。游ゴシックはヒラギノやMSゴシックよりも若干シャープに、15%くらいセリフ体が混ざっているようなイメージです。ただし、こちらもまだサポートされている環境が整っていません。(Mac OS X 10.9 / Windows 8.1以降）、そのため以降に、『’ヒラギノ角ゴ Pro W3’』『’Hiragino Kaku Gothic Pro’』…と続けておきます。そして最後に念押しの『sans-serif』を指定して終了です。

なんで、同じ書体をローマ字表記と2種類用意するの？って方もいると思うので、游書体を例に説明します。

游書体対応状況

Windows 8.1		‘游ゴシック’	YuGothic
	Internet Explorer 11.0	○	×
	Firefox 27.0	○	×
	Chrome 32.0	○	×
OS X 10.9		‘游ゴシック’	YuGothic
	Safari 7.0	×	○
	Firefox 27.0	×	○
	Chrome 32.0	×	○