2020年まで使えるfont-familyおすすめゴシック体

  • 323
    いいね
  • 12
    コメント

Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。
本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。
2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。

目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。

*確認が取れていない環境があります。もし、問題のある環境があった場合はコメント頂けると嬉しいです。対応します。

Bootstrap4版をご用意しました。

まず最初に完成したコード

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

長い!長いですねー。一般的な記述と比べると段違いです。
なぜこのような形になるかは以下でご説明します。

対象環境

基本的にはサポートされているもの、一般的なもの。
IE8以上を対象としています。

IE11より前の対応は一般サイトではあまり必要が無いかもしれませんが、このfont-familyなら特に意識する必要はありません。それよりもfont-familyで問題なのはOSですので、そうそうシェアは変わりません。

font-familyの解説

あまり聞きたい人はいないと思いますが、カスタマイズしたい方へ向けて書き綴ります。
考えぬ抜いたので、あまりカスタマイズ性はないと思います。

-apple-system

まず英字書体から指定していきます。
最初に指定するのは、他に影響を及ぼさないApple用の英字フォントです。
変なフォント名ですが、コレを指定すると「San Francisco」という書体が適用されます。

-apple-systemについて詳しく解説されている方がいらっしゃいます。
iOS9からのシステムフォント San Francisco を理解する

BlinkMacSystemFont

また見慣れないフォント名ですが、-apple-systemと同じSan Franciscoが適用されます。
-apple-systemと何が違うかというと、こちらはBlink(フォント名がそのままです)、WebKitから派生したレンダリングエンジン用フォントです。
このレンダリングエンジンを使用しているのはChromeとOpera。この両ブラウザは、先に記述した-apple-systemではなく、こちらが適用されることになります。
純粋なWebKitであるSafariは-apple-systemが適用されます。

Helvetica Neue

-apple-systemBlinkMacSystemFontが適用されないApple用の英字フォントです。
おなじみHelveticaの上位バージョンみたいなやつ。
太さの種類があるため日本語フォントとのバランス調整が必要です。一番細いのはものすごく細いです。
そのためweight100〜200をRegularで上書きしました。

ちなみに、「ヘルベチカ ノイエ」と読みます。

Yu Gothic

Windows用の日本語フォント「游ゴシック」です。
@font-faceでごにょごにょしてChromeでも読みやすくしています。
詳しくはChromeでも読みやすい游ゴシックを指定するCSS

YuGothic

Mac用の日本語フォント「游ゴシック体」です。
このfont-familyの基準点になっているのがこの記述です。

Verdana

Windows vista、Windows7、Windows8用の游ゴシックが適用されない環境用の英字フォントです。
好みで修正できる箇所はココぐらいかなと思います。
Verdanaの代わりにArialなどでもいいでしょう。

Meiryo

定番のWindows用日本語フォント。
Windows vista、Windows7、Windows8用の日本語フォントです。
Windows8.1以降は先に記述したYu Gothicが適用されます。

M+ 1p

対象環境には入れいていないものの、簡単に対応出来るなら対応しておきたいので一部Linux系のために記述してみました。
本当は英字フォントとの組み合わせが怖いのでもっと前方に記述したいのですが、"M+ 1p"はフリーフォントのため一般の環境でも入っている可能性が高いため、最後部に記述しました。
* 私はLinuxを触ったことがありません。このfont-familyについても確認をしていません。
標準環境でのデフォルトフォントであるのならば、記述は必要ないです。
もし、確認してくださる方がいましたらコメント頂けると私が安心します。

sans-serif

ただの保険です。
もしもの時、デフォルトの明朝体が適用されるよりは、ゴシック体のほうがマシと言う程度の記述です。

IE向け

コメント欄でご指摘にあるように、IEは游ゴシックの下の余白が他のフォントより大きいというバグを抱えています。メイリオも若干ながら下のほうが余白が大きいですが、比べ物になりません。
そのためIE向けのハックを最後に記述しています。
つまりIEはメイリオが適用される事になります。

シェアの大きいIEが游ゴシックを使えないとなると魅力半減どころでは無いですね。

よく使われている「ヒラギノ」

一般的に使用されているMacは游ゴシックが搭載されています。
そのため游ゴシックを指定するならヒラギノは要らなくなる訳です。
今回記述しなかったもうひとつの理由として、ヒラギノを考慮すると以下の様な組み合わせのコードが考えられるからです。

body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

この書き方はデフォルトのことしか考えられていない書き方です。
当然Windowsにヒラギノが入っている場合ヒラギノが表示されます。これが問題!
この環境を使用したことがある人には分かると思いますが、とても読めたものではありません。MSゴシックのほうがマシです。
昔読みにくいと思ったので、先入観で書きましたが、感覚が変わったのか、何の違和感もありませんでした。(昔から現在の間にApple教に入信しています)

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

そこで今回ヒラギノを排除したコードを見ると、1番読みにくい環境(個人的には読みやすいですが)でも「Verdana, Meiryo」の組み合わせが適用され、ヒラギノを使用した場合よりもかなり読みやすくなります。

どうしてもヒラギノを使いたい方はQiitaのCSSのヒラギノの記述が参考になるでしょう。

qiita
font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-seri;

游ゴシックの細い書体を使わない理由

本来であれば細いRegularとLightも使用したいとこですが、Regularは一部ブラウザの問題により使用できません。
Lightの問題はWindowsに同等の太さの書体が「calibri」ぐらいしかないという問題です。個人的にcalibriは読みにくい部類です。
同等の太さのアルファベットを用意した場合(Webフォントなど)、それもまた問題で今度は游ゴシックがなくてメイリオと組み合わさった時、メイリオは2ウエイトしかないので組み合わさった時、コレもまた英字と太さが異なってしまうのです。
上記の理由から游ゴシック搭載のWindowsには英字書体を適用しません。

日本語表記の書体名とアルファベット表記のfont-family

body {
  font-family: "メイリオ", Meiryo;
}

上記のように日本語表記とアルファベット表記を両方記述するのを見かけますが、この記述方法でないと適用されないブラウザは、今回対象外です。

よっぽど古いブラウザが対象に入っていなければ日本語表記は必要ありません。
そんなブラウザが対象に入っていたら、この記事のfont-familyは使いたくないですね。

おまけのSCSS

_variables.scss
$sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
$serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGP明朝B", serif;
$monospace: "SourceHanCodeJP-Regular", "Myrica M", "MyricaM M", "Ricty Diminished Discord", "Migu 1M", "Rounded M+ 1m regular", "Rounded Mgen+ 1m regular", "M+ 1m", "VL ゴシック", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$ie-font: Verdana, Meiryo, sans-serif;
_font-face.scss
/* sans-serif */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

/* monospace */
@font-face {
  font-family: "SourceHanCodeJP-Regular";
  src: local("SourceHanCodeJP-Regular");
}
@font-face {
  font-family: "Myrica M";
  src: local("Myrica M");
}
@font-face {
  font-family: "MyricaM M";
  src: local("MyricaM M");
}
@font-face {
  font-family: "Ricty Diminished Discord";
  src: local("Ricty Diminished Discord");
}
@font-face {
  font-family: "Migu 1M";
  src: local("Migu 1M");
}
@font-face {
  font-family: "Rounded M+ 1m regular";
  src: local("Rounded M+ 1m regular");
}
@font-face {
  font-family: "Rounded Mgen+ 1m regular";
  src: local("Rounded Mgen+ 1m regular");
}
@font-face {
  font-family: "VL ゴシック";
  src: local("VL ゴシック");
}
mixins/_font-family.scss
@mixin font-family($font-family:sans-serif) {
  @if $font-family == sans-serif {
    font-family: $sans-serif;
    @media all and (-ms-high-contrast: none) {
      & {
        font-family: $ie-font;
      }
    }
  } @else if $font-family == serif {
    font-family: $serif;
    font-feature-settings: "palt";
  } @else if $font-family == monospace {
    font-family: $monospace;
  }
}
style.scss
@import "variables";
@import "font-face";
@import "mixins/font-family";

body {
  @include font-family(sans-serif);
  // @include font-family(serif);
  // @include font-family(monospace);
}
style.css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: "heisei-maru-gothic-std", Verdana, Meiryo, sans-serif;
  }
}

serifは私用に作ったものです。游明朝がなければゴシック体を表示するものなので、ご自身で設定し直すことをおすすめします。
monospaceWebにもプログラミングフォントを使おうを参考にしました。

このfont-familyの問題点

Chromeでも読みやすい游ゴシックを指定する方法 」と同様に游ゴシックがインストールされているのにブラウザが@font-faceに対応していないという特殊な環境に対応できません。
ただ普通に游ゴシックを出力するだけですが、想定外であることは事実です。
また、@font-faceで指定しているため游ゴシックMediumより細い書体が使えません。
この点も「Chromeでも読みやすい游ゴシックを指定する方法 」に記述したとおりどうしようもないのですが、やはり使えないということを頭にれておいてください。
上記の記事にどうしても細い書体を使いたい場合の対策方法も明記してあります。

最後に

「2020年まで使える」なんて言っていますが、当然優れたフォントが新しく標準で入ってきたらコレが崩れるわけですが、たかだか数年で変わるとは思えません。
たかがfont-familyですがプロジェクトの途中で変更したり、現在使用しているfont-familyを変更するのも、やはり確認をしなければ怖いので、出来れば長いこと使えるfont-familyを使用したいですよね。
現在動いているサイトのCSSを1行書き換えるだけでも、やはり怖いので出来ればバシッ!と1発で決めたいのです。
(こんなこと言いつつも、何度も書き直しています。すいません。)

そんな思いで書いたので、かなり調べて確認しましたが、やはりバグというのは出てくるもので...
もし不具合を見つけた方がいらっしゃいましたらコメントくださいませ。早急に修正致します。