ナウでヤングなレンタルサーバーと言えばロリポップですが、CSSのfont-family指定は皆さんこだわってますか？　ぶっちゃけ多くの閲覧者はあんまり気にしてないかもしれませんが、さりげないおもてなしがWebサイトの見栄えを最高に良くするのです。font-familyって何？　いや、CSSって何？　って人も、弄ってみようfont-family。

そもそも、指定したほうがいいのか？

フォントは俺に選ばせろ
フォントは俺に選ばせろ

そもそもですが、font-family指定をしなくていいという意見があります。指定をしない場合、ブラウザで設定されたフォントが表示されます。「人それぞれ好きなフォントがあるんだから、いちいち指図するな」ということでしょうが、一部のマニア以外はブラウザのフォント設定を弄らないと思いますし、弄らない場合Windowsでは多くのブラウザのデフォルト設定であるMS Pゴシックで表示されてしまい、クールじゃありません。多くの人に少しでも綺麗なフォントで見てもらいたい場合は、font-family指定はしたほうがいいです。

僕の考えたナウヤンなfont-family

結論からということで、僕が使っているfont-family指定を貼ります。

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

使用しているフォントは

  • Avenir Next （Mac用欧文）
  • Verdana （Windows用欧文）
  • ヒラギノ角ゴ （Mac用日本語）
  • 游ゴシック （Windows 8.1以降用日本語）
  • メイリオ （Windows 8以前用日本語）
  • Osaka（アンティークなMac用）

となっています。

突っ込みどころアリの指定ですが、個人的になかなか気に入ってます。ポイントは下記の通り。

順番に注意

font-familyを指定するときは、フォントを記述する順番に気をつけます。フォント指定は左から順に読み込まれていく（フォントが見つからない場合は次のを読み込む）ので、欧文フォント→日本語フォントの順に記述します。日本語フォントにもアルファベット等は含まれているので、日本語フォントを先に記述した場合、欧文フォントは指定されません。

また、日本語フォントの部分においてMacで「ヒラギノ角ゴ」を用いたい場合は、これを最初に記述します。これはMicrosoft Office for Macがインストールされている環境の場合、「メイリオ」「MSゴシック」も入っているので、これらを先に指定した場合にヒラギノ角ゴが表示されないからです。

游ゴシック

游ゴシック

游ゴシック（と游明朝）は、Windows8.1およびOS X Mavericksから追加された、字游工房のフォントです。細く端麗で、ヒラギノやメイリオとは趣が違います。

Windows 8.1では3ウェイト（ライト・ミディアム・ボールド）が、OS Xには2ウェイト（ミディアム・ボールド）が収録されています。Windowsにおいて、ブラウザによってはかなり細字になってしまうのが玉に瑕ですが、何にせよクールなのでWindowsではコレを指定します。僕の場合、OS Xではこれまで通りヒラギノ角ゴを指定しています。

現時点ではWindows 8.1のみとシェア的にもかなり少数ですが、もうじき発売されるWindows 10にも搭載されており、Windows 10はWindows 7 ･ 8/8.1から無料でアップグレードできるらしいので、将来的にはかなりの人がこの游ゴシックを表示できるようになると考えられます。

ちなみに、もしOS Xでも游ゴシックを用いたい場合、WindowsとOS Xではフォント名が異なるので注意が必要です。

Windowsの場合:  “Yu Gothic”もしくは”游ゴシック”

OS Xの場合: “YuGothic”もしくは”游ゴシック体”

何でこんなややこしいことになってるんでしょうね。違いはスペースが入るかどうかと、「体」がつくかどうかです。WindowsでもMacでも游ゴシックでいい場合は、これら4つを記述しておけばOKです。


/* MacでもWindowsでも游ゴシックのみ用いる場合 */

font-family: "YuGothic", "游ゴシック体", "Yu Gothic", "游ゴシック";

Avenir Next

Avenir Next

OS X用欧文フォントにAvenir Nextを指定してみました。なかなかスタイリッシュで気に入ってます。「O」の字が特徴的かな？

[divider type=”thin”]

フォントの世界って言うのはフォント（ホント）に奥が深いですね〜(*^_^*)