【2020年版】游ゴシックを使ったおすすめfont-family指定

Wordpressカスタマイズ

日本語を、ゴシック体のシステムフォントで表示したいできれば游ゴシックを使いたい

そんなときの、font-familyの指定を考えました。

2020年に考え直したものですが、2019年版かも。わたしの好みに左右されている部分もありますが、汎用性のある指定になっているかと思います。

【結論】font-family、おすすめの指定方法はこれ!

まずは結論から。わたしの設定しているfont-familyは、下記のとおりです。

全体にはこれ。

font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;

そして太字の箇所には以下の指定。

b, strong, .bold{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

さらに、IE用に追記。

/* IE11だけに適応 */
_:lang(x)::-ms-backdrop, .selector {
	font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
}

これらの意味については、記事後半で解説します。

なお、当ブログでは以下の字間指定も追加しています。もし「同じ指定したのに見えかたが違うな」と感じたら、字間によるかもしれません。

letter-spacing: .4px;

Webフォントとシステムフォントについて

閲覧環境にかかわらずきれいな思い通りのフォントで表示できるWebフォントは、大変魅力的です。Google Fontsで日本語のWebフォントが正式サポートされ、Webフォントが使いやすくなってきました。

しかし、日本語のWebフォントはファイルサイズが大きいため、表示スピードに不安があります。

そのためわたしは、2020年1月現在は、主にシステムフォントを使うことにしました。

「アルファベットしか使わない」とわかっている見出しのような場所のみ、Webフォントを使用しています。

游ゴシックは便利! だけど問題も

游ゴシックは、WindowsでもMacでも共通で使えるシステムフォントです。

ただし、ブログやWebサイトに游ゴシックを使うには、気をつけなければならない点がいくつかあります。

Chromeでかすれる問題

WindowsのChromeでの游ゴシック表示
WindowsのChromeでの游ゴシック表示

WindowsのChromeで、font-weightが400(normal)の時、つまり普通に使うとき、游ゴシックはかすれて見えます。

Windowsの游ゴシックには下記の4種の太さがあります。

  • Light(細字)
  • Regular(標準)
  • Medium(中字)
  • Bold(太字)

基本のfont-weightは400(normal)で、WindowsではRegularが適応されます。しかし、WindowsのChromeでは游ゴシックのRegularがかすれてしまうんです。

MacではMediumが適応されるので、問題ありません。

IEで文字下に変な余白ができる問題

IEでのボタン表示
IEでのボタン表示

IEで游ゴシックを使うと、文字下に変な余白が入ります

文章だと気にならないんですが、ボタンなどが気持ち悪いことになってしまいます。

でも、できるだけ游ゴシックを使いたい

游ゴシックは、丸すぎず、やわらかく明るく読みやすい。わたしは好きです。

このブログにとって、メイリオは丸すぎるし、Webフォントは今は避けたい。

上記の問題点を解決しながら、游ゴシックを使うfont-familyを考えました。

もちろん、フォント選びはメディアによります。が、当記事の指定は、けっこう汎用性があるのではないでしょうか。

font-family指定の解説(全体)

全体に指定しているfont-familyをひとつずつ解説しましょう。

font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;

英字

-apple-system

Apple用の英字フォントです。iOS9 以降の iOS や、MacのSafari・MacのFirefox で、「San Francisco」という書体が適用されます。

BlinkMacSystemFont

MacのChromeとOperaで、英字に「San Francisco」が適用されます。

Roboto

Android用の英字です。

“Helvetica Neue”, HelveticaNeue,

-apple-systemBlinkMacSystemFont が適用されない場合の、Apple用の英字フォントです。

WindowsでHelvetica Neueをインストールしている場合、スペースなしだと認識されず「HelveticaNeue」と書くと認識されるそう。少ないケースかとは思いますが、一応記載しています。

游ゴシック

今回の鬼門が游ゴシック。

游ゴシックは、AppleとWindowsでfont-family名が違います。これを利用して、 WindowsのChromeでかすれてしまう問題を解消します。

Apple YuGothic または “游ゴシック体”
Windows“Yu Gothic” または “游ゴシック”

“游ゴシック体”, YuGothic

まずApple用に普通に游ゴシックを指定します。

日本語表記・アルファベット表記両方記載しているのは、古いブラウザ対策のため。たぶんアルファベットだけで大丈夫ですが、念のための保険です。

“游ゴシック Medium”, “Yu Gothic Medium”

Windowsで游ゴシックを指定する場合、通常は「”游ゴシック”, “Yu Gothic”」と書けばOK。しかしこれではChromeでかすれてしまうので、「游ゴシック Medium」と指定します

※ 『wemo』さんが、「いつ、どのブラウザでこのMediumの直接指定が無効になるかわからない。」と注意喚起されています。

これだと、太字のときに汚くなってしまうので、太字には別途font-familyを指定しましょう。後ほど説明します。

“游ゴシック”, “Yu Gothic”

Firefoxでは、「”游ゴシック Medium”, “Yu Gothic Medium”」が無効になります。太さ指定のない游ゴシックも入れておきましょう。

FirefoxではRegularでもかすれずきれいに表示されるので、Medium指定しなくても大丈夫。

游ゴシック以外

“Segoe UI”

Windows用の英字です。

一般的には、游ゴシックより前に指定します。ただ、太字になる箇所で、游ゴシックとのバランスが悪いです。なので、游ゴシックを優先にしました。

Verdana

英字フォントです。Mac・Windowsともに高確率でインストールされています。

下記のサイトに「Android で Roboto フォントを表示させたい場合は、Font-family 内に Arial, Helvetica, Tahoma, Verdana のいずれかを記述しましょう。」とあったので、ここに記述しました。

Android における最適なフォント環境を考えてみる – ミルログ
Font-family を考える時にいつも Android のフォント環境はスルーされてしまうので、Android のフォント環境のみにフォーカスを当てた記事があってもいいと思って書きました...

“メイリオ”, Meiryo

Windows Vista ~ 8の、游ゴシックが適用されない環境用の日本語フォントです。

書かなくても次の「sans-serif」指定で適応されるはずですが、なにかの拍子に「MS ゴシック」になっていたら泣きたくなるので、一応指定。

sans-serif

これさえ書いておけば、とりあえずゴシック体にはなります。大事。

游ゴシックの入っていないMacなら、大抵の場合ヒラギノ角ゴ系が適応されるはずです。

なお、ヒラギノを指定していないのは、ヒラギノがインストールされたWindowsで汚くなってしまうことがあるから。

font-family指定の解説(太字)

Windows用に「游ゴシック Medium」を指定してしまっているため、このままだと太字にした際にフォントが汚くなってしまいます。

それを避けるため、太字の箇所は 「游ゴシック Medium」 記述を外してください。

b, strong, .bold{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;
}

font-family指定の解説(IE11)

IEでは、游ゴシックを使うと、なぜかテキストの下に謎の余白ができてしまいます。

細かく余白を調整して対応するのは大変なので、IEでは游ゴシック適応は諦めました。

IE11では下記の記述で「body」がSegoe UIとメイリオになるそう。

_:lang(x)::-ms-backdrop, body {
    font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
} 

当ブログの場合、指定が効いてないなーと気づいたところを追加していったら、今のところ以下のような記述になりました。

テーマは「Cocoon」を使用しています。

_:lang(x)::-ms-backdrop, body, body.mceContentBody, .comment-btn, #bbp_reply_submit, .bp-login-widget-register-link a, .search-edit, input[type="submit"] , b, strong, .bold {
	font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
}

端末・ブラウザ別 表示されるフォント

このfont-family指定で、下記が表示されるはず。

上から優先順です。

端末ブラウザ英字日本語
iPhone・iPad San Francisco sans-serif(ヒラギノ角ゴ ProN)
Android Robotosans-serif(端末による)
Mac San Francisco
Helvetica Neue
游ゴシック体
sans-serif
游ゴシック体
sans-serif(ヒラギノ角ゴ)
WindowsEdge・Chrome游ゴシック Medium
游ゴシック
Segoe UI
Verdana
メイリオ
sans-serif
游ゴシック Medium
※太字は除く
游ゴシック
メイリオ
sans-serif(MS ゴシック)
Windows Firefox游ゴシック
Segoe UI
Verdana
メイリオ
sans-serif
游ゴシック
メイリオ
sans-serif(MS ゴシック)
WindowsIESegoe UI
メイリオ
sans-serif
メイリオ
sans-serif(MS ゴシック)

まとめ

文章を読んでもらうには、フォントはとっても大事。

何度も考え直して、ようやく「今はこれかな」というfont-familyに辿り着きました。

不具合などありましたら、教えていただけると幸いです。

参考記事

主に、以下のブログを参考にしました。多謝。

游ゴシックのfont-family指定方法!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証 | WEMO
游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。ただ、面倒くさい問題があるんですよね。そう、かねてより議論されている、「WindowsのChromeで見にくいんすけど」問題。この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていま...
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【(】 「[Chromeでも読みやすい游ゴシックを...

Comment