もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。

Macだから、Windowsだから、Androidだから…
端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。

とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？

基本

font-family: sans-serif;

sans-serif、つまりゴシック体であることを指定しています。
ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。

Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。
しかし、Macの場合はヒラギノを優先させたいですよね。。

Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。

つまり、“メイリオ”は読み込まれず、“Meiryo”とする必要があるということです。
この点を考慮して、

font-family: "メイリオ", sans-serif;

とかしているといいかんじですかね。

Windowsはヒラギノが入っていないのでメイリオが選択され、
Macではヒラギノが優先される。

また、

font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;

でもいいでしょう。
この場合Macだとヒラギノが優先されるので、メイリオを日本語表記させておく理由は特に無いです。

有名ドコロはどんな感じか見てみよう

Google

font-family: arial, sans-serif;

Yahoo!Japan

Yahoo! JAPAN

font-family: "MS PGothic", "Osaka", Arial, sans-serif;

Facebook

font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;

楽天

【楽天市場】Shopping is Entertainment! ：インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;

クックパッド

レシピ検索No.1／料理レシピ載せるならクックパッド

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

首相官邸

首相官邸ホームページ

※特に指定なし

という感じです。
首相官邸は置いといて、クックパッドなどの日本向サービスとは海外サービスだとまた色が違う感じがありますね。

最近良く見る游ゴシックは？

最近では游ゴシックというものも流行っています。

ユニトピでも游ゴシックが優先されています。

といった具合です。
ゴシックでありながらも、柔らかい印象がありますね。

まだ環境によっては表示されない状況もあるのですが、ユニトピはWeb制作者の方向けブログなのであまり不具合はないかと思います。

結局どうするの

スタンダード日本Webサイトなら

font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

今流行の感じを出していく（かつ文字コンテンツがメインなら）

font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

といったところでしょうか。
また英語のみ用意されているフォントを先頭に指定することで、合成フォントとよばれる（半角アルファベット＆数字と、全角文字のフォントを分ける）設定も可能です。

まとめ

なにが正解ってわけでもないのですが、真似をしておけば間違いなさそうな部分ですね。
あまり流行り廃りがあるわけでもなく、Webフォント等を活用しない限り特にカスタマイズする必要もないので、「これでOK」というのをひとつ作っておけばよさそうです！

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。

基本