Pocket

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


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

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

CSS

その2
Noto Sans優先指定

HEADタグ

CSS


もろもろ解説

なぜ2種類にしたのか

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

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

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

その1用の要素

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

その2用の要素

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

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

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

共通要素

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

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

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。