それからデザイン スタッフブログ

CSSでフォントの種類を指定する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントの技術の変化などにより日々変わっています。
このブログでも以前「Font−familyのベストな書き方 2015年版」として、当時のトレンドを踏まえたFont−familyの指定方法の記事をアップしましたが、トレンドが変わってきたので、これを機にアップデートしたいと思います。

早速ですが「Font−familyのベストな書き方 2017年版」として、今回は以下の2種類のFont−familyをおすすめします。

その1 游ゴシック優先指定

その2 Noto Sans優先指定

もろもろ解説

なぜ2種類にしたのか

今回Font−familyを再定義する際に悩んだのは、Windows環境で游ゴシックを指定すると細すぎて見づらい場合がある点でした。この原因について調べてみたのですがなかなか奥深く、今回は游ゴが使える環境なら「その1」、無理そうなら「その2」という考えのもと制作しました。

明朝体の指定はありません

前回はゴシック体、明朝体ともに指定を定義しましたが、今回はゴシックのみとしています。
Windowsで游明朝が細く表示されてしまい、指定しても現実的ではないためです。

その１用の要素

Yu Gothic・YuGothic

游ゴシックを表示できるデバイス向けの指定です。前回は日本語の表記も含め４種類記述していたのですが、いろいろ調べると英語表記の２種類でOKのようです。ちなみに「YuGothic」がMac用、「Yu Gothic」がWindows用です。

その２用の要素

Noto Sans Japanese

AdobeとGoogleが共同開発した「Noto Sans Japanese」はWebフォントとして使用でき、デザインも悪くないと思ったので指定しました。
2016年10月より試験的に開始された、日本語Webフォントを高速で表示できるサービス「Google Fonts + 日本語 早期アクセス」を利用しています。

Google Fonts + 日本語 早期アクセス

HEADタグのリンクタグ

「Google Fonts + 日本語 早期アクセス」で「Noto Sans Japanese」を呼び出す記述になります。

共通要素

あまり見ない指定かと思いますがこの指定をすると、OS X El Capitan、iOS 9以降であればAppleの最新システムフォント「san francisco」が適用されます。

-apple-systemについては以下の方が詳しく解説してくれています。,/p> San Francisco フォントをCSSで指定するには | ナギサものおき

BlinkMacSystemFont

-apple-systemと同じく「san francisco」が適用させる記述。こちらはChrome用です。

Helvetica Neue

-apple-system、BlinkMacSystemFont非対応のApple製品用です。

ヒラギノ角ゴ ProN W3・Hiragino Kaku Gothic ProN

游ゴシック導入以前のApple製品用の指定です。

Arial と Meiryo

windows用の最後の受け皿としての記述です。

まとめ

いかがでしたでしょうか？
font-familyの指定方法は、新しい技術やデバイスの変化や考え方の違いでいくつもの解釈があり、「これで間違いない！」というものはなかなか作れません。常に新しい情報を取り入れてアップデートする必要があります。このブログでも随時トレンドを追っていきたいと思います。