ウェブサイトでシステムフォント

GoogleのRobotoとNoto Sansや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。

一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプローチをとっています。ただそういった場合、欧文なら本文にウェブフォントを採用することが多いですが、和文ではその方法にかなりのコストがかかります。ローカルのフォントを指定するにしてもスタックが複雑になりがちで、テストもたいへんです。そこで、sans-serifなどのジェネリックな指定にとどめ、ユーザーエージェントの設定に委ねるという選択肢を検討しても良いと思います。つまり、UIはシステムに寄せて、コンテンツはユーザーに寄せる、という方向です。

/* For UI */
html {
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Helvetica Neue",
        "Hiragino Sans", "Meiryo", sans-serif;
}

/* For content */
.ArticleBody {
    font-family: sans-serif;
}

このコード例では、デフォルトはシステムフォントで、本文のみユーザーエージェントに応じたサンセリフ体で表示されることを意図しています。UbuntuやFirefox OSなんかも考えるともうちょっと追加する必要があるかもしれませんが、だいたいはこんな感じでカバーできると思います。以下、CSSでシステムフォントを指定する際のポイントをいくつか。

• MacとiOSでSan Franciscoを指定するには-apple-systemというキーワードを使うが、MacのChromeのみBlinkMacSystemFontキーワードが必要¹
• MacのChromeとFirefoxでは@font-familyのsrcディスクリプタで-apple-system/BlinkMacSystemFontキーワードを利用できない
• Mac Yosemite以前のためのフォールバックとしてHelvetica Neueを指定
• MacでSan Franciscoとウェイトを合わせるためヒラギノ角ゴではなくHiragino Sansを指定
• Widnows 10の日本語システムフォントはYu Gothic UIだが、あまり評判が良くないらしいので、メイリオの方が良さそう
• Android 6.0のシステムフォントはRobotoとNoto Sans CJK JPだが、RobotoとNoto Sans CJK JPというフォント名は無効で、sans-serifキーワードで指定²

ここ数年、ウェブフォントが普及したり、MacとWindowsに游書体という共通のフォントが搭載されたりなど、デザイナーの意識が「ことなる環境でも同じフォントで表示できる」という方向に向かいやすい状況だったように思います。しかし言うまでもなく、環境がことなれば最適なタイポグラフィもことなるし、またユーザーの好みが様々であることも依然として変わりません。ここで紹介したアプローチは、プロモーションやブランディングを目的としたサイトなど、UIも含めてページ全体の印象をコントロールしたいような場合はちょっと違うかも知れませんが、とくにアプリケーション寄りやメディア系のサイトなどでは、有力な候補のひとつになるのではないかと思います。

脚注

1. Using System UI Fonts In Web Design: A Quick Practical Guide – Smashing Magazine ↩
2. platform_frameworks_base/fonts.xml at master · android/platform_frameworks_base ↩