デザインのヒント /

Font−familyのベストな書き方 2015年版

CSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。 今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。
update 2017.02.21 Font−familyの書き方について新しい記事を書きました。こちらもぜひご覧ください。 Font−familyのベストな書き方 2017年版

CSSの記述・指定方法

基本中の基本ですが、CSSの指定方法についてさらっとご説明します。
  • 適用優先度の高いフォントファミリーから記述する
  • フォント名にスペースや全角文字が含まれている場合は、クォーテーション(「”"」「”」どちらでも可)で囲む
  • フォントの英字名と日本語名を併記する場合は、日本語名を先に記述する

1.英語フォントから指定していく

まずは英語フォントから指定します。理由は簡単で日本語フォントには半角英数字も含まれているので英語フォントを日本語フォントより後に指定してしまうと指定自体が無意味になってしまいます。

英語フォントはWeb Fontを使用する(推奨)

英語フォントの指定はWeb Fontを指定することでデバイス間の差異はほぼなくなります。オススメのGoogleフォントなどこのブログでも紹介していますのでご参考ください。 https://www.google.com/fonts (日本語もWebフォントが簡単(コスト的、トラフィック的な意味で)に使えればいいんですけどね・・・)

2.フォントの搭載状況を把握して指定する

デバイスのシェア率なども考慮して優先度を決めていきます。 ここで忘れてはいけないのがフォントとしての美しさです。Windows8.1以降に搭載された游ゴシック、游明朝は、それ以前のメイリオと比べ懐が狭くスマートで美しいフォントです。シェア率はVista以降に入っているメイリオの方が高いですがここは美しさを優先させて游ゴシックを先に記述します。またスマートフォンの搭載状況も考慮します。
游ゴシックWindows8.1以降、MacOS10.9以降
游明朝Windows8.1以降、MacOS10.9以降
メイリオWindows Vista以降
Meiryo UIWindows 7以降
MS PゴシックWindows95以降
MS P明朝Windows95以降
ヒラギノ角ゴ ProMac OS X以降
ヒラギノ明朝 ProMac OS X以降
ヒラギノ角ゴ ProNMac OS 10.5以降、iOS
ヒラギノ明朝 ProNMac OS 10.5以降、iOS6以降
Droid SansAndroid
RobotoAndroid4以降

3.Windowsのアンチエイリアス対応を考慮する

WindowsのフォントはMacと違い、フォントや文字サイズによってアンチエイリアス(WindowsではClearTypeという機能)が効くものと効かないものがあるようです。Windows8.1から搭載の游ゴシッ ク、游明朝、Vistaから搭載のメイリオ以外は基本アンチエイリアスが効かずギザギザの細い文字になるようです。

■Windowsでのアンチエイリアス対応

フォント名アンチエイリアス
游ゴシック
游明朝
メイリオ
Meiryo UI
MS Pゴシック×
MS P明朝×
HGS明朝E※

※HGS明朝・・・Officeに同梱されているフォント

明朝系フォント指定は注意が必要!

明朝系のフォント指定は2015年6月現在、Androidは非対応、Windowsは「游明朝」がダメだとアンチエイリアスが効かない「MS P明朝」になってしまいます。割り切って指定するか、明朝系は指定しないか、判断が必要になります。

4.総称フォントファミリーを記述する

Font-familyの指定は見る人のブラウザに指定のフォントが入っていることが前提になります。万が一のために総称フォントファミリーというざっくり何系のフォントなのかの指定をすることで指定のフォントに対応していない環境でもある程度近いフォントをブラウザがあてがってくれます。
  • sans-serif … ゴシック体系のフォント
  • serif … 明朝体系のフォント
  • cursive … 筆記体系のフォント
  • fantasy … 装飾系のフォント
  • monospace … 等幅系のフォント
※日本語のテキストに cursive を指定すると、一部の環境ではそのテキストが正常に表示されなくなってしまうようです。

上記を加味して私なりに最適なフォントファミリーをつくってみました!

・ゴシック体

Mac10.8から搭載した洗練されたサンセリフ英字フォント「Avenir」を先頭に。 その後Googleフォント記載を追加。この辺りは好みによってきますがオーソドックスなサンセリフ体として「Open Sans」を選んでみました。 その後保険として「Helvetica Neue」「Helvetica」「Arial」「Verdana」と英語フォントを追記。 Android用フォント「Roboto」を挟んで、游ゴシックの記述を列記。 游ゴシックの記述はWindowsとMacで微妙に正規表示が違うので合計4種記述。 そのあとはMac10.8以前用に「ヒラギノ角ゴ Pro W3」、Windows7用に「Meiryo UI」、Vista用に「メイリオ」、それ以前のWindowsの受け皿として「MS Pゴシック」を足して完成です。

・明朝体

まずGoogleフォントの「Roboto Slab」これは形が綺麗なのとウェイトが複数ちゃんとあるので使い勝手が良さそうなのでしてしました。 続いて英字書体「Garamond」「Times New Roman」を追記し、日本語の「游明朝」「ヒラギノ明朝 Pro W3」としました。 Windowsの場合、シェア率の高い「MS P明朝」がアンチエイリアスに対応していないので、MicrosoftOfficeに入っている「HGS明朝E」も保険として追記しました。これでオフィスが入っているパソコンならアンチエイリアスが効くはずです。最後に「MS P明朝」を記述しておしまいです! 游ゴシック・明朝、Googleフォントが出てきて、この辺りの情報は日進月歩で日々アップデートしていくとおもいます。このブログでも随時トレンドを追っていきたいと思いますのでぜひチェックしてみてください。

この記事を書いた人

斧山

PAGE TOP