こんにちは。
今回のテーマは「日本語WEBフォント2018」としています。
なぜこのタイトルなのかと申しますと、この記事の内容は2018年時点で、日本語WEBフォントを運用するベストプラクティスではないかと思い、WEBフォント導入を考えているみなさんの参考になればと思い執筆しました。
異論は認めます・・・
Windowsの日本語をなんとかしたい・・・
Windowsの標準ブラウザフォントは、游ゴシックやメイリオになります。
しかし、Mac標準のヒラギノと見比べると、全体的に丸っこく子供っぽい印象です。
フォントの印象はそのままWEBデザインの印象に繋がるので、デザイナーとしてはフォントも制御下に置きたいところ。
そこで試していきたい「WEBフォント」。
その運用に至るまでにぶつかった壁と、その乗り越え方をご紹介します。
- そもそもWEBフォントは何を使う？
- ファイルサイズの肥大化
- フォントレンダリング時のちらつき
- 細部にもこだわりたい（字詰め）
そもそもWEBフォントは何を使う？
WEBフォントといえば、Google Fontsなどの英字フォントが代表的です。
日本語のWEBフォントはそもそも数が少なく、ライセンスも複雑です。
- モリサワTypeSquare
- FONTPLUS
- Adobe Typekit
などのサービスで日本語WEBフォントを使うことができますが、ページビュー数に応じたライセンス契約が必要だったりと、「試しに使ってみよう」というにはハードルが高くなっています。
日本語WEBフォントNoto Sansで決まり！
制作をやっている人は知っていると思いますが、Googleから素晴らしいフォントが登場しました。
Google- Noto Fonts
ご存知Notoフォントです、可読性が高く読み物に向いていると個人的に感じています。
元になったのはAdobeの「源ノ角ゴシック (Source Han Sans JP)」で、字体はヒラギノに近い印象です。
こちらはライセンス契約などは不要で、オープンソースのフォントなので気軽に・手早く導入できます。
ファイルサイズの肥大化
次に課題となるのが、フォントのファイルサイズ。
昨今はロード時間がUXに直結するという風潮のため、ファイルサイズの肥大化は最大の懸念点です。
しかし！英語のフォントサイズがひとつあたり20~30kbなのに対し、日本語フォントは驚異の16MB前後です。 なんとファイルサイズ約720倍です、笑ってしまいます。
サブセット化（軽量化）
Notoフォントはおよそ7000字近い漢字が含まれているようです。
正直一生お目にかからないような漢字も入っているので、日常的によく使われるであろう
- JIS第1水準漢字
- JIS第2水準漢字の一部（よく使われる漢字）
- ひらがな
- カタカナ
- 記号
- アルファベット
だけを残し、総文字数を減らしてファイルサイズを下げるという作戦です。
軽量化に関して、私は手作業で文字数を削減しましたが、Googleで「NotoSans サブセット」と検索すれば世の有志たちによるサブセット化フォントをダウンロードすることが出来ます。
@axcelwork@github さんのQiita-Noto Sans CJKのサブセット化 はGitHubにアップロードされているので非常に親切です、少なくできる作業はなるべく少なくしてしまいましょう。
フォントサイズはどれだけ小さくなったの？
| Before | After |
| 16,933kb | 487kb（約97％↓） |
かなり大幅な軽量化が実現できています。
文字のウェイトが2種類あったとしても1MB以下までサイズを落とせているので、十分現実的なファイルサイズになりました。
サブセットで除外されちゃった文字はどうなる？
フォントファイルを軽量化する「サブセット」
要するに搭載フォントを削ってしまっているわけですが、めったに現れない漢字が現れた時に豆腐化（文字化け）してしまわないか不安になりますよね。
しかし、CSSのfont-familyにちゃんと他のデバイスフォントが設定されていれば少なくとも文字化けしてしまうことはありませんのでご安心ください。
body{
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/* 含まれていない漢字が登場しても、次の候補のフォント（ヒラギノ）などで表示されます */
}
ウェイトを減らす
Notoフォントのウェイトは6種、日本語フォントではAXISや新ゴ並みの取り揃えです。
しかしWEBで全て使うことはほぼ無いでしょう。
ここはnormalとboldの2つのウェイトだけを設定しましょう。
normal ＝ Regular
Bold = Bold
上記のウェイト以外を含めず設定することでダウンロードサイズを下げることが出来ます。
フォントレンダリング時のちらつき
WEBフォントでよく問題になるのが、表示のちらつき問題です。
通称FOUT（Flash Of Unstyled Text）と呼ばれるこの現象も日本語フォントのファイルサイズに起因します。
Google DevelopersによればWEBフォントに対する各ブラウザの挙動は以下の通り。
Safari では、フォントのダウンロードが完了するまでテキストのレンダリングが保留されます。 Chrome と Firefox では、フォントの表示が最大 3 秒間保留されます。その後で代替フォントを使用し、フォントのダウンロードが完了すると、ダウンロードされたフォントを使用してもう一度テキストを再表示します。*IE では、リクエストされたフォントがまだ使用できない場合は代替フォントを使用して即座にレンダリングを行い、フォントのダウンロードが完了した時点でテキストの再レンダリングを行います。
Google Developers
つまり各ブラウザでWEBフォントがダウンロードされるまで別のフォントで表示し、ダウンロードが終わったらフォントを変更するという挙動が、「文字のちらつき」に繋がり不快感を与えてしまっているようです。
FOUTは軽量化で抑えられる
実はこの減少も、ファイルのロード中の挙動が原因なので、それが発生する前にロードし終わってしまえば気になりません。
ようするに、フォントの軽量化を行うと、このFOUT対策も一緒に行えてしまいます。
フォントにこだわるなら、細部にもこだわりたい
約物の字詰め
日本語のWEBフォントを使おうと思っている方であれば、少なくともテキストの見栄えに関心があることでしょう。
印刷物では一般的な約物の字詰め、これも実現できたら嬉しいですよね。
font-feature-settings では実現できない
字詰めが出来るCSSプロパティとして登場した「font-feature-settings」ですが、これはフォントそのものが持っているカーニングのデータを元にしているので、表示デバイスによる解釈が変わります。
特に困るのがヒラギノのかぎ括弧（「」）がつまりすぎて、前のフォントに食い込んでしまうという致命的なバグがあり実用化は諦めたほうがいいでしょう。
そこでYakuHan JPの登場
日本語の約物だけが入っている珍しいフォントです。
括弧や句読点などに含まれる余白が半角相当になり、日本語文字組が非常に読みやすくなります。
またNotoフォントをベースに制作されているので組み合わせもバッチリです。
それでは使ってみましょう
これらの課題と解決策を踏まえて実装していきましょう。
それぞれ意味や意図があるので、ただコピペでも良いですが、内容も一読するとより深くWEBフォントを理解できると思います。
フォントファイルはCDNではなくサーバーから使う
サブセットされたフォントはCDNに対応していないので、サーバーにアップロードして使用します。
構造としては以下のような形にすると良いでしょう。
ひとつのウェイトにあたり3種類のファイルをアップします。
- Woff2
- woff
- otf
これはブラウザごとに対応するフォント形式が違うため、別々のファイルをアップする必要があります。
YakuhanJPも、同じウェイトのものをアップしておきましょう。
また.eotという拡張子もありますが、こちらはInternet Explorerにだけ対応します。
しかしながら、そもそもInternet Explorerでネットサーフィンをしている場合、PCのパフォーマンスが悪い可能性も考えてIEは除外し、ページの表示を優先します。
CSSでフォントを定義する
サーバーへのアップロードが完了したら、CSSでWEBフォントの設定をしていきます。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: normal;
src: local("Noto Sans CJK JP Regular"),
url('../font/NotoSans_Regular.woff2') format('woff2'),
url('../font/NotoSans_regular.woff') format('woff'),
url('../font/NotoSans_regular.otf') format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: bold;
src: local("Noto Sans CJK JP Bold"),
url('../font/NotoSans_Bold.woff2') format('woff2'),
url('../font/NotoSans_bold.woff') format('woff'),
url('../font/NotoSans_bold.otf') format('opentype');
}
@font-face {
font-family: "YakuHanJP";
font-style: normal;
font-weight: normal;
src: url("../font/YakuHanJP-Regular.woff2") format("woff2"),
url("../font/YakuHanJP-Regular.woff") format("woff");
}
@font-face {
font-family: "YakuHanJP";
font-style: normal;
font-weight: bold;
src: url("../font/YakuHanJP-Bold.woff2") format("woff2"),
url("../font/YakuHanJP-Bold.woff") format("woff");
}
CSSでこのように定義しておけば、font-family設定で呼び出す事が可能になります。
また、CSSの中にある
src: local("Noto Sans CJK JP Regular")
は、稀なケースではありますが表示した端末にNotoフォントがインストールされている場合にサーバーのフォントをダウンロードしないという設定になります。
一部Androidには標準搭載しているようですが、今後増えてくる事も視野にいれて設定しておきます。
font-familyで呼び出し
よく、定義だけして「あれ？WEBフォントにならないぞ・・・」というケースを見かけますが、ちゃんとfont-familyで呼び出す必要があります。
body{
font-family: 'YakuHanJP','Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
この時気をつけたいのは、YakuHanJPを一番最初に指定することです。
これによって、日本語約物が現れた時はYakuHan、それ以外はNotoとフォントを組み合わせて使う事ができます。
Notoを最初に設定してしまうと、全ての約物もNotoで表示され、YakuHanがまったくの無意味になってしまうので注意が必要です。
Noto以降のフォントの順番は、漢字の形が近いものから優先的に設定します。
それにより、サブセット化で除外してしまった見慣れない漢字が別のフォントで表示されてしまっても文章に馴染むようにします。
これにてWEBフォントの設定は完了です。
ちなみにこのCSS設定は、この記事が掲載されているPandoでも採用しています。
どうでしょう、気持ち程度ですが文字が読みやすく感じてきたのではないでしょうか？
Before / After
さて、游ゴシックやメイリオの形が気に入らない所から始まった施策はどのような変化があったのでしょうか。
YakuHanJPの効果も確認したいため、約物「 「」、。・ 」などが含まれる文章で見比べてみてみましょう。
いかがでしょうか、青い丸が付いている所は、YakuHanJPによる字詰めが効いています。
これにより無駄な改行なども抑えられ、見やすい文章になりました。
また個人の好みもあると思いますが、Notoは若干ウェイトが太く見えますが、漢字も潰れてしまうこともなく、可読性が良いと感じます。
読みやすいは立派なUX改善です。
OSや端末に依存せず一定のテキストレンダリングを担保できるのもWEBフォントの利点ですね。
なかなかネット上にはNoto + YakuHanJP の詳細な解説がされているページが少ないようですので、この情報を活用してもらえれば幸いです。
