あなたの好きな Font-family はなんですか？

こんにちは、みみです。

先日の投稿（デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポその1）の通り、 WordPress 日本語 Slack に design チャンネルが作成され、9月下旬から毎週 WordPress についてデザインの視点から話し合い貢献するための定例 MTG が行われています。言い出しっぺなので何となく私が適当な合いの手を入れる係になっていまして毎週役不足を痛感しつつも、内容が結構面白くて学びが多いです。

特に先日の MTG では、5.0対応の公式テーマがキックオフするというところから、フォントについてアツい会話が繰り広げられて特に面白かったので記事にしてみたいと思います。

いま採用されているのは Noto Serif ですが…

2018/10/10現在、WordPress の新エディター Gutenberg には、 GoogleのAPI ( https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C400i%2C700%2C700i ) が読み込まれていて

font-family: "Noto Serif",serif;

が指定されています。

画面のプレビューは以下のページでできます。

新しい Gutenberg 編集エクスペリエンス

あなたの環境ではどのように見えるでしょうか。

実はこのAPIには日本語の Noto Serif JP が無いので、現状はただの Serif （デフォルトの明朝体）です。Noto Serif JPを反映するとこんな感じになります。

スクリーンショットだと若干滲むので、実際はもっと綺麗です。

Noto Serif JP そのものはこちらからご覧ください。

Noto Serif JP – Google Fonts

日本語におけるSerif 体（明朝体）への懸念

明朝体は近年のデバイス上では、かなり綺麗に表示されるようになりましたよね。でも、様々なデバイスで閲覧されるWebという特性上、日本語のサイトでは、特に本文において、視認性を優先して明朝体の指定を避けるケースが多い（多かった）と考えられます。

あと、Google APIとはいえ、日本語Webフォントのサイズ感は3Gにはキツいんじゃないかなーとかいう通信環境の問題など。

レガシーな環境や通信環境や視認性を優先してゴシック体やシステムフォントを取るべきか、美しく新しいWebな Noto Serif を取るべきか。

私個人としては、それを選ぶのはユーザーであるべきではないかなあと思うので、ユーザーに選択を委ねる UI を用意するのが CMS の務めであるような気がしています。その上で Noto Serif いいぞ、と布教活動をする感じが理想かな。

WordPress での話とは別に Noto フォントはコンセプトからしてとても素晴らしいフォントなので、どしどし普及していって欲しいなとは思います。

タイトルを Serif 体にしてみました

そして今回のお話を受けて、このブログのタイトル部分に Serif を入れてみました。ちょっと前だけど Google Font 正式導入？も祝して。Noto Serif のサブセット化とかに苦心した日々を思い返しつつ…。

このサイトのfont-familyはこんな感じに（これは Sass 上の記述です）。

@import url('https://fonts.googleapis.com/css?family=EB+Garamond:700|Noto+Serif+JP:700');

$base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
$serif-font-family: 'EB Garamond', 'Noto Serif JP', serif;

Serif 体では Garamond 系が結構好きで（他にも色々好きなのあるんですが）

[svg]logo[/svg]

ロゴに使っているのもあって、近めな EB Garamond を英字にして、 Noto Serif JP と合わせてみました。700 にしたのだけれど、400 でもいいかもしれないな。

Garamond の i が特に好きです。

この組み合わせ、結構気に入っています。

来週も、話題になると思うので気になる方は #design チャンネルをチェックしてみてくださいねー！参加方法はこちらから。