2016-17年最強の Font Family 設定 [ゴシック体]

いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。

2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。

当サイトで指定しているFont Family

当サイトでは現在、こんな感じで指定しています。

font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;

クリップボードにコピー

スポンサーリンク

Mac では安定のヒラギノ

Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてますし、特に変える理由も見当たりませんしね。

指定は最低限の Hiragino Kaku Gothic ProN のみの指定でOKです。日本語名やウェイトを併記する必要はありません。
これだけで Mac と iOS ではヒラギノ角ゴで表示されます。

ヒラギノ付属のアルファベットは汚い

ヒラギノ付属のアルファベットは汚いので、Lucida Grande を先に書いておく…のはもう昔の話。

OS X 10.11 からは Lucida Grande よりも綺麗なフォント、San Francisco がインストールされているので、そちらの方を指定してあげます。

ただ、San Francisco と指定するだけでは出てきてくれません。 そこで出てくるのが、-apple-system と BlinkMacSystemFont という記述。これを指定しておくと、San Francisco ファミリーの中から適切なものとウェイトが自動的に選択されて出力されることになります。

BlinkMacSystemFont は Blink 系のブラウザ (Chrome及びその派生) で、-apple-system はそれ以外のブラウザ (Safari, Firefox など) で動作します。Mac だけでなく iOS でも仕様は同じです。

一つ注意したいのが、-apple-system というまるで Apple の製品全てが含まれているみたいな名称ですが、OS X 10.11 以降及び iOS 9 以降でないとフォントが出てきてくれない こと。
それら未満のバージョンでも最適なフォント設定を保ちたい場合、Helvetica Neue を指定するといいでしょう。

ただし、2017年6月の時点で iOS 9 未満のデバイスは既に3%未満 となったそうなので、もう気にすることもないかと思います。

ちなみにですが、Lucida Grande は Bold 体も Italic 体もない、スーパーへなちょこフォントなので、特別な理由がない限り指定する意味はないです。

Lucida Sans (Windows 版の Lucida フォント) の方がウェイトは揃ってます。(Regular, Bold, Italic, Bold Italic の合計4ウェイト)

Hiragino Sans について

Windows では游ゴシックを指定

Windows 8 からはメイリオよりも形が整った綺麗なフォント、游ゴシックが搭載されているので、游ゴシック を指定します。

ただ、游ゴシックの Regular は細過ぎて見にくいので、Regular ではなく Medium を指定してあげるといいでしょう。

サンプルを用意しました。

Windows 環境で見てる人用の実際の表示 (クリックで展開)

• 普通の游ゴシック ( Regular )
• 游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。
• ちょっと太めの游ゴシック ( Medium )
• 游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。
• メイリオくん
• 游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。
• Noto sans JP
• 游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。

非 Windows 環境で見てる人用の画像 (クリックで展開)

こうやって見ると、改めて Regular の細さがかなり異常であることがわかります。Regular ではなく Medium を指定することで、細すぎて見にくい問題が解決され、普通に綺麗なフォントとして扱えるようになります。

ちなみに Mac ではもともと Medium と Bold の2種類しか搭載されていません。

ちなみに Blink 系ブラウザ だとウェイト付きのフォント指定が出来ないので、もれなく 游ゴシック Medium の指定は無視されることになります。

@font-face を使い無理やり表示させることは可能ですが、面倒な上に、もともと Blink 系ブラウザだとフォントが細めにレンダリング  される傾向があり、游ゴシックで表示させるのはユーザーの負担になるので個人的にはおすすめしません。

忘れずにメイリオも指定

游ゴシックの方が綺麗だとはいえ、まだ Windows 8 以降でしかインストールされていません。（しかも Medium は 8.1 から） PCから見てる人の半分くらいは Windows 7 で游ゴシックがダウンロードされていない環境なので、忘れずにメイリオも指定しておきます。

Androidのことは考えなくていい

Font Family 指定でわざわざ Android 用に Roboto などのフォントを指定する必要はありません。
Android のフォント環境は、Fonts.xml というシステムファイルに記述されているフォントのみしか読み込めないという特殊な環境だからです。

ちなみにですがその中に記述されているフォントは、sans-serif, sans-serif-condensed, serif, monospace, sans-serif-monospace, serif-monospace 等がありました。

基本的なものはほとんど揃っているので特にフォント関連で困ることはなさそうですね。

Android のフォント環境は以下の記事にまとめました。興味がある方は是非ご覧ください。

Android における最適なフォント環境を考えてみる

その他OSはもっと考えなくていい

その他OSといえば Linux があったりしますが、あれは数が多すぎる上に大したシェアじゃないので全く考えなくていいです。
無駄にいっぱい記述してもCSSが肥大化するだけですから、上で記述した物以外は全て sans-serif に任せます。

スポンサーリンク

〆

指定はこんなものでしょうか。 読みやすさと小型化を考えるとこのような形になりました。