パンフレット、カタログ、チラシ、ホームページ制作など、デザイン・広告に関するご相談はお気軽にお問い合わせください。

Blog 最適なfont-familyを考える2016

前回、font-familyを考え直す2015でfont-familyについて書きましたが、
今回は結局はどうすればいいのということで、モバイルやタブレットなどの各種デバイスも踏まえた最終形態のfont-familyを考えてみます。

だらだらと長くなりそうなので、結論から言うと

ゴシック系フォント

日本語

font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif;

英語

font-family: Helvetica, Arial, Verdana, sans-serif;

明朝系フォント

日本語

font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif;

英語

font-family: Georgia,Times,'Times New Roman',serif;

です。

スマホや各デバイスを踏まえたフォントファミリーです。
明朝系をベースフォントに指定するのは諦めるた方がいいようです。
全デバイスできっちりしたい場合は、最終手段のWEBフォントを使うことをお勧めします。

一応各デバイスでフォントをチェックしてみました。何故こうなったかの経緯をご説明します。
次のページでは「総称フォントファミリーが各デバイスでどのように見えるか」触れていきます。

総称フォントファミリー

sans-serif

  • ゴシック体系フォント/font-family: sans-serif;
  • フォントファミリーはゴシック体系フォントsans-serifを指定しています。
  • フォントファミリーはゴシック体系フォントsans-serifをbold指定しています。

MacWindowsiPhoneandroid

serif

  • 明朝体系フォント/font-family: serif;
  • フォントファミリーは明朝体系フォントserifを指定しています。
  • フォントファミリーは明朝体系フォントserifをbold指定しています。

MacWindowsiPhoneandroid

cursive

  • 筆記体系フォント/font-family: cursive;
  • フォントファミリーは筆記体系フォントcursiveを指定しています。
  • フォントファミリーは筆記体系フォントcursiveをbold指定しています。

MacWindowsiPhoneandroid

fantasy

  • 装飾系フォント/font-family: fantasy;
  • フォントファミリーは装飾系フォントfantasyを指定しています。
  • フォントファミリーは装飾系フォントfantasyをbold指定しています。

MacWindowsiPhoneandroid

monospace

  • 等幅系フォント/font-family: monospace;
  • フォントファミリーは等幅系フォントmonospaceを指定しています。
  • フォントファミリーは等幅系フォントmonospaceをbold指定しています。

MacWindowsiPhoneandroid

今回はベースとなるフォントを決めるのでcursive、fantasy、monospaceは置いときます。
windowsの場合アンチェイリアスが効かないフォントもあるので注意が必要です。

次のページでは「一般的なフォントファミリーが各デバイスでどのように見えるか」触れていきます。

ゴシック系フォント

ゴシック系フォント 日本語

  • font-family: 'Hiragino Sans','ヒラギノ角ゴシック',sans-serif;
  • font-family: YuGothic,'游ゴシック',sans-serif;
  • font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',sans-serif;
  • font-family: 'メイリオ','Meiryo',sans-serif;
  • font-family: 'MS Pゴシック',sans-serif;
  • font-family: Osaka,sans-serif;

MacWindowsiPhoneandroid

ゴシック系フォント 英語

  • font-family: Helvetica, sans-serif;
  • font-family: Arial, sans-serif;
  • font-family: 'Arial Narrow', sans-serif;
  • font-family: Verdana, sans-serif;
  • font-family: Geneva, sans-serif;

MacWindowsiPhoneandroid

明朝系フォント

明朝系フォント 日本語

  • font-family: 'Hiragino Mincho ProN','ヒラギノ明朝 ProN W3',serif;
  • font-family: YuMincho,'游明朝',serif;
  • font-family: 'HG明朝E','MS P明朝','MS 明朝',serif;
  • font-family: 'YuMin_36pKn-Medium',YuMincho,'游明朝',serif;

MacWindowsiPhoneandroid

明朝系フォント 英語

  • font-family: Georgia, Serif;
  • font-family: Times, serif;
  • font-family: 'Times New Roman', serif;

MacWindowsiPhoneandroid

最後のページでは「おすすめのフォントファミリー」についてです。

ゴシック系フォント

日本語
レスポンシブ対応

font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif;

英語

font-family: Helvetica, Arial, Verdana, sans-serif;

androidの日本語ゴシック系フォントは全く動作しないので、ほぼデフォルトです。
しかしそのままだと英語部分がかなり微妙なので'Verdana'を総称フォントの前に指定しておきます。

明朝系フォント

日本語
レスポンシブ対応

font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif;

英語

font-family: Georgia,Times,'Times New Roman',serif;

こちらもandroidでは日本語の明朝体に対応していません。
なので、諦めるのが得策かと思います。
※システムフォントを変えたりと違う方法がありますが、今回の趣旨とは違うのでパス。

結論!全デバイスできっちりしたい場合は、最終手段のWEBフォントを使うしかないようです。
念のため入れているフォント名とかもあるので、古いOSを無視するともっとスッキリできそうですが、これぐらい指定していてもバチは当たらないと思います。

以上「最適なfont-familyを考える2016」でした。