CSS Nite LP47「Coder's High 2016」フォローアップ（7）山田 敬美さん（ピクセルグリッド）

2016年9月24日（土）TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、山田 敬美さん（ピクセルグリッド）の『モダン日本語フォント指定』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

CSS Nite LP47に参加いただきましたみなさまありがとうございました。
「モダン日本語フォント指定」でお話させていただきました、ピクセルグリッドの山田（@tacamy）です。

游ゴシックのウエイト問題については、ブログ記事で様々な情報が飛び交い、何が正解なのか混乱していた方も多かったのではないでしょうか。いろんな記事を目にするたびに、うーん？と思うことが何度かあり、さらにそういった記事が拡散されてたりしてモヤモヤしていたので、今回お話しさせていただこうと思いました。

セッションの内容を理解していただくことで、「この指定だとここで問題が出るな、この説明はちょっと違うかな」など、ご自身で判断ができるようになったのではないでしょうか。

最初に「脱コピペ」と言ったのは、オチのためのフリというわけでなく、原理を知ることで、様々な情報に振り回されずに、自分で判断できるようになってもらうことを目的としたかったためです。

このフォローアップを書いていて、この感覚は料理と少し似ているような気がしてきました。初心者はWeb上のレシピが正しいのかどうかが判断できませんが、普段から料理をしている人は、自分のこれまでの経験をもとに、これはおいしくないレシピだと判断できたり、元のレシピに変更を加えておいしくできたり……と脱線してきたので、アンケートの質問にお答えしたいと思います。

明朝はどうすればいいのか

「漢はだまってserif」としたいところですが、游明朝を使いたいということでしたら、游ゴシックと同様にウエイトの問題の差はありますが、游ゴシックと違ってWindowsの場合、10でもMediumはありません。

• Windows
  - YuMincho-Regular
  - YuMincho-Demibold
  - YuMincho-Light
• OS X
  - YuMin-Demibold
  - YuMin-Medium

そのため、もしRegularウエイトでは細いとなった場合は、Windowsにおいては別のフォントを使うしか選択肢はなさそうです。

sans-serifについての説明がもう少し欲しかった

sans-serifを指定すると、ブラウザのデフォルトのフォント（ゴシック体）が使われます。それがOSやブラウザによって異なるので、制作者はフォントを指定してコントロールしようとします。
ただ、ユーザーからすると普段使っているブラウザの標準フォントが一番馴染みのある読みやすいフォントだと思いますし、もしそのデフォルトフォントが気に入らなければ、ブラウザの設定で自分好みのフォントに変更しているかもしれません。
サイト側でフォント指定をするということは、そのユーザーの好みのフォントを否定し、こちらの意図するフォントを押し付けることにもなります。
そういう理由もあって、個人的にはsans-serifが一番よいのではと考えています。
ただ、フォントも含めてサイトの印象の一部となるので、難しいところですね。
WindowsのFirefoxとChromeの日本語のデフォルトフォントがMS Pゴシックで、デザイン的にあまりにも残念な見た目になってしまうのが問題なのでしょうね。Windowsさえどうにかなれば……。

各OSが違うフォントしか持ってない以上、ムリに同じものにしなくてもいいかなと

私も同意見です。サイト側でフォントが指定されているとちょっとイラっとします。
ただ、仕事でマークアップをする以上、個人の思想とクライアントやデザイナーの要望が一致するとは限らず、どうしても游ゴシックにしてほしいと言われる場面もあるでしょう。そして細すぎるのでどうにかしてほしいとも。
マークアップ・エンジニアとして、そういった要望を実現する方法を知識として持っておくことと、個人の思想はまた別なのかなと割り切っています。

レスポンシブの際のフォントファミリー指定で注意しておくことはありますか？

レスポンシブだから、というわけではないですが、ある程度の主要なOSやブラウザを考慮して、どの環境から見ても違和感のないフォント指定をしておくべきかなと思います。
それよりもレスポンシブの場合は、フォントサイズの指定の方に気を配る必要がありそうです。
remやemを使った指定の他にも、vwという画面幅を基準としたサイズ指定をfont-sizeに指定するなどの方法も場合によっては必要になるかもしれません。
CodeGridにも「レスポンシブデザインにおけるテキストのコントロール」というシリーズがありますので、気になる方は読んでみてください。
https://app.codegrid.net/entry/responsive-text-1

英名のみでOKなブラウザは明確にどこから？

すみませんが具体的なバージョンについては把握できていないのですが、現在主流なサポートブラウザであるIE11、Edge、Chrome、Safari、Firefoxの最新版であれば問題ありません。

@font-faceは全ブラウザ、環境で使用可能？

IEは9+で使用可能で、その他のブラウザもほぼ対応しています。
http://caniuse.com/#feat=fontface

OS Xでメイリオが入っている場合、Winでヒラギノが入っている場合はどうなるのか気になりました

OS Xでメイリオというのは、Officeを入れているケースを考えるとそこそこありそうなので考慮の優先度は高めですが、Windowsでヒラギノが入っているケースは限定的だと思うので、優先度は低めかなと考えました。
そこまで対応するとなるとすれば、JSでOS別にクラス名を振って、それぞれ個別のfont-family指定をするしかないのかなと思いますが、そこまでするかどうかは判断の迷うところですね。

ちなみに、今回紹介したサンプルではそれぞれ次のようになります。

「最新のシステムフォントに寄せる」

html {
 font-family:
 -apple-system, /* OS X, iOS San Francisco */
 BlinkMacSystemFont, /* OS X, iOS Chrome San Francisco */
 "Hiragino Kaku Gothic ProN", /* OS X, iOS ヒラギノ */
 MyYuGothicM, /* Windows 游ゴシック */
 Meiryo, /* Windows メイリオ */
 sans-serif;
}

• OS Xでメイリオが入っている場合 : ヒラギノが優先されるので影響なし
• Winでヒラギノが入っている場合 : ヒラギノが適用される（かもしれない※）

「游ゴシックメインの指定」

html {
 font-family:
 MyYuGothicM, /* Windows 游ゴシック */
 YuGothic, /* OS X 游ゴシック */
 -apple-system, /* iOS San Francisco */
 BlinkMacSystemFont, /* iOS Chrome San Francisco */
 "Hiragino Kaku Gothic ProN", /* OS X, iOS ヒラギノ */
 Meiryo, /* Windows メイリオ */
 sans-serif;
}

• OS Xでメイリオが入っている場合 : 游ゴシックかヒラギノが優先されるので影響な
• Winでヒラギノが入っている場合 : 游ゴシックが入っていない環境であればヒラギノが適用される（かもしれない※）

※Windowsにヒラギノをインストールするには、ライセンス的にヒラギノフォントを購入しなければならず、Windows用のヒラギノを持っていないので正確にはわかりませんが、もしそのヒラギノのフォントファミリー名がOS Xと同じ名前であればヒラギノが適用されます。なお、OS Xからヒラギノを抜いてWindowsに入れるのはライセンス違反のようです。

「フォントのメタデータの中のnameテーブルを確認する」と言われていたと思うのですが、どうやってここまで深く勉強されたのかすごく気になりました（たとえば仕様書とか参考資料とか）

正直に言うと、私自身、そんなにフォントについての知識がなく、この結論が出るまでに悪戦苦闘しました。
フォントにnameテーブルがあるということは、同僚に教えてもらったのですが、@font-faceでnameテーブルのどの値が使われるなどは色々と試してみたりして、かなりの時間を費やしました。
最終的に仕様書を読んだらPostscript名が使われるということが書いてあり、最初から仕様書を読めばよかったと思いました。

メイリオで斜体が表現されないので困っている

日本語の斜体が読みやすいかどうかはさておき、斜体にしたい部分だけ別のフォントを指定するなどしか方法がなさそうです。
なお、@font-faceではfont-weightだけでなく、font-styleも指定できるので、font-style: italic;のときのみ別フォントを適用するオリジナルのMyMeiryoのようなフォントファミリーをつくってみてもいいかもしれませんね。

海外だとどういう指定が流行ってるのか知りたい

私も詳しくはないのですが、海外の場合は、文字数も少ないのでWebフォントも気軽に使われていそうな印象です。