(cache) 2016年版：CSSのフォント（font-family）指定はこれがおすすめ。ゴシック体や明朝体、日本語など

OSがアップデートされる度に推奨フォントが変わったりするので、CSSのフォント指定は悩みどころですよね。 1〜2年ごとにフォント指定のベストプラクティスは変わってくるような印象があります。

この記事では、2016年現在でのゴシック体・明朝体それぞれのおすすめのフォント指定についてまとめました。

フォント指定の基本

Webサイトのフォントは、CSSのfont-familyプロパティで指定します。

font-familyは複数のフォントを指定でき、指定した順で最初に有効なフォントが適用されます。その際、日本語・英語はそれぞれ分けて判断されます。

フォント指定は、基本的に次のような順序で指定すればよいでしょう。

英字のみのフォント→日本語フォントの順で指定することで、英字と日本語で異なるフォントを指定することができます。また、先頭に特殊なフォントを指定しておけば、それが有効な環境のみそれを適用することができます。

フォント指定の最後には総称フォントを指定します。これは閲覧環境における標準フォントが適用されるので、念のため指定しておきましょう。

ゴシック体は、次の指定がおすすめです。いくつか変わった指定方法がありますが、それぞれについては後で説明します。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

Appleデバイスには、San Franciscoという優れたフォントがあります。ただ、これは特殊なフォントなため、font-familyで指定しても適用されません。

San Franciscoを適用するには-apple-systemを指定します。また、Mac+ChromeについてはあわせてBlinkMacSystemFontも指定します。

上記で指定した各フォントの簡単な説明を次に示しますので、設定の際の参考にしてみてください。

明朝体については、次の指定がおすすめです。ゴシック体に比べてバリエーションが少なく、悩むことはあまりないと思います。

body {
  font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

GeorgiaはMac/Winどちらでも表示可能なセーフフォントです。セーフフォントには、他にもTimes New Romanなどいくつかの種類があります。

英字の明朝体（セリフ体）は、ゴシック体と違い、好みのフォントが見つかりづらいかもしれません。その際はGoogle Fontsに代表されるWebフォントの採用も検討した方がいいと思います。

上記で指定した各フォントの簡単な説明を次に示します。

フォントを変えるだけで、Webサイトの見た目は全然変わってきます。 AppleのWebサイトなどは、文字による印象の与え方がとてもうまく、参考になります。

この記事を参考に、自分なりのフォント指定が見つかれば幸いです。