TEAM × MARKETING × BRANDING

インビジョン株式会社

企業文化をデザインする
採用マーケティングチーム

03-5794-5433

お問い合わせフォーム

HOME>コラム>制作お役立ち情報

Category " 制作お役立ち情報 "

12699" class="post-12699 post type-post status-publish format-standard hentry category-column category-design"

2016/2/15(Mon)

font-family決定版。最新のフォント指定の仕方【游ゴシック】WEBのフォントの話

WinでもMacでも標準搭載、font-familyには見やすく美しい「游ゴシック」を指定!

今までWEBのフォントの話として、WEBフォントの利便性や使い方についてまとめさせて頂きました。
優秀!有能!「WEBフォント」って?【メリット6つ】WEBのフォントの話
超★簡単。1分でできる!WEBフォントの使い方【GoogleFonts】WEBのフォントの話


今回は、font-familyで指定する際の、ベストな方法を考えます。

CSS「font-family」のベストとは!

さて、結論からお伝えすると…

font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;



私が考えた結果、ベストはこれ↑でした。
さて、紐解いていきます。

美しいだけじゃない「游ゴシック」

この一番前に指定している「游ゴシック」。これ、最近のWEBデザインの主流にもなっています。
何がスゴイってその理由……、
『Windows』『Mac』どちらにも標準搭載されているのです!!!!


今すぐにでも取り入れたい、ファーストチョイスのデバイスフォントとなるはず。

font-family指定順

CSSのfont-familyには、指定する順序が重要になります。
フォントが確認できなかった場合には次のフォント、次のフォント・・・、と表示されていくのです。

上記で紹介したCSSですと、游ゴシックが搭載されていない場合にはヒラギノ角ゴ、Windowsにはメイリオが表示されるようになっています。


とはいえメイリオもヒラギノ角ゴも2000年以降のフォント。
それより前のPCのために、MS PゴシックとOsakaを指定しておくのも有りです。

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


標準搭載フォントよりWEBフォント

まだ游ゴシックも定番とまではいっていない…
というわけで日本語フォントですがWEBフォントにも優秀なフォントがあります。

「NotoSansJapanese」

それが、日本語WEBフォントNotoSansです。

CSSなら

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

HTMLなら

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

これを読み込むことで、なんと!OS関係なくNotoフォントがどちらにも表示されちゃうんです。


というわけで、NotoSansを追加してみました。

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

ただ、日本語WEBフォントは大変重く速度が遅くなるため、ベストの設定とは言い切れません。
でもやっぱり、OSバージョンごとに違うなんて煩わしい。そんな方はぜひお試しを。


170314_Indeedキャンペーンバナー

まとめ

フォントを選ぶときに、一番のネックなのが、「標準搭載されているかいないか」という点。
そんな中で、どう指定するのがベストなのかという疑問を紐解いていきました。
皆様の中でベストの形は見つかったでしょうか?


関連コラム:
優秀!有能!「WEBフォント」って?【メリット6つ】WEBのフォントの話
超★簡単。1分でできる!WEBフォントの使い方【GoogleFonts】WEBのフォントの話
WEBの画像の話【保存形式】JPG?PNG?GIF?それぞれの違いって?【拡張子】
優秀!有能!WEBで使いたい!「SVG」って何?【拡張子】WEBの画像の話【保存形式】
WEBの色の話【RGB】三原色って?カラーコードって?【HTML】




合わせて読みたい
このエントリーをはてなブックマークに追加
今日の執筆:有谷 メディアチーム アートディレクター

「コールドプレスジュース」

Category

Writer

Media

キャンペーン

SNS


     

instagram写真を見る

Home

PAGE TOP

All Rights Reserved / インビジョン株式会社