サイト内のフォント指定について最近は特に迷いやすくなっています。正解は一つではないと思いますが、対応していく方向性や避けていることをまとめてみます。
文字をカーニングして読みやすくする
ウェブサイトもできればプロポーショナルフォントを使用してカーニング（文字詰め）した方が良いと思います。
一番気になるのは「括弧」です。特に「カギ括弧」で始まっている文章はカーニングしていないと綺麗にまとまりません。
ただカーニングを指定した場合の一文字一文字の挙動をよく知らなかったので改めて調べてみました。
結論から書くと下記フォントとCSSを指定する形で良さそうです。
- Mac「ヒラギノ」
- Win「游書体」
- iOS「ヒラギノ」
- Android「Noto」
- Webフォント「Noto」
body {
font-feature-settings: 'palt';
letter-spacing: .03em;
}2020年10月時点のOS、主要ブラウザを想定しています。フォントはゴシック体でも明朝体でもよいのでフォント名だけ書きました（実際の指定方法は割愛）。CSSでカーニングするとやや詰まりすぎるため、全体に少し文字間（letter-spacing）を広げておきます。
このサイトにも適用していますが、やはり完璧ではなく違和感もあります。ただ全体の印象として原稿用紙のように等幅のものよりは綺麗に見えると思います。
一応調べた内容も少し書いておきます。
- font-feature-settings「palt」の特徴は、通常の漢字かな部分や「カギ括弧・丸括弧」「句読点」「中黒」が詰まります。「全角チルダ」や「全角スペース」は全角のままなのでこの形が一番よさそうです。このサイトも「palt」を指定しています。
- 約物を半角にしたフォント「Yaku Han JP」も上記指定では必要ありません。このフォントはプロポーショナルフォントが使えない場合などに便利そうです。
- font-feature-settings は「palt」以外にも様々な指定ができますが、日本語関連で指定される「pwid、pkna」は約物（記号部分）など詰められない場合があります。
- CSSでのカーニング指定方法として「font-variant（font-variant-east-asian）」もあります。下記ページではむしろこちらを指定すべきという記載もありました。ただこの指定は font-feature-settings「pwid」にあたるもので、上に書いた通り望んでいる形にはなりませんでした。
font-feature-settings – CSS: カスケーディングスタイルシート | MDN - 「font-kerning」というプロパティもあります。英語の一部ではカーニングされますが、日本語など調べた限りでは適用されませんでした。各ブラウザも対応していてデフォルトが「auto」なので、特に記述する必要はなさそうです。
font-kerning – CSS: カスケーディングスタイルシート | MDN
英数字は別のフォントにすべきか？
CSSでは下記のようにフォントを複数指定でき、左が優先されます。
font-family: Arial, ‘Hiragino Sans’;
英字フォント、日本語フォントの順で指定した場合、文章の半角英数字は「Arial」、日本語は「Hiragino Sans」で表示されます。つまり二つのフォントが文中で混ざります。
フォントを混ぜること自体は一般的なことですが、日本語フォントの中にも英数字は含まれていて、フォントデザイナーも日本語と英語をいかにきれいに並べるかという点に相当な労力をかけていると思います。また異なるフォントは太さや文字間も異なるので結果的に調整も難しくなります。
よほどの理由がない限り複数のフォントを混ぜる指定はしない方がよいと思います。もし英数フォントを使用したいパーツがあれば、そこだけフォントを変える方が安全です。
標準フォントが指定しづらくなっている
CSSでのフォント指定は「このOSにはこのフォントが入っている」と決め打ちしたものです。
ただOSの標準フォントも変化していて、しばらく落ち着くことはないように思います（良し悪しは別にNotoあたりで統一してもらえると助かります）。
さらに現在はモバイルサイトが重要になり、相対的にPC向けサイトに工数を割けなくなるケースもあります。その場合は、MacとWindowsの様々なフォントにまで手が回りません。
日々細かくメンテナンスできるサイトは良いのですが、あまりコストをかけられないサイトでは、今後は大きく二つの選択肢になりそうです。
- 「sans-serif（ゴシック体）のみ」を指定する
- Webフォントを指定する
1. ゴシック体のみを指定
上に書いた通り、標準フォントの指定は決め打ちなので端末にインストールされていなければ、別のフォントが表示されます。Macでも標準になると思われた「游書体」が新しいOSでは外れました（ダウンロードは可能です）。
であれば、はじめから想定しないというのがこの選択肢「１」です。
本来であれば、どのブラウザもゴシック体をデフォルトにしそうなので、「sans-serif」の指定さえ必要ないように思いますが、Safariだけ明朝体がデフォルトのため実質「Safariで明朝体にしない」という意味になります。
どんなゴシック体で表示されても良いというのは、デザインのクオリティとしては妥協が必要かもしれません。ただ次のWebフォントの指定に比べると表示スピードが早いという大きなメリットもあります。
注意点としては、以前Chromeでゴシック体を指定しても明朝体になったり、iOSではウェイトの問題があったりとブラウザ側にバグがあることです。そうしたイレギュラーな場合は一時的に標準フォントを指定するなど対応が必要になります。
また「serif（明朝体）のみを指定する」という選択肢を作らなかったのは、WindowsやAndroidでの表示がかなり不安なためです。もし明朝体を使いたい場合は次のWebフォントの指定がよいと思います。
2. Webフォントの指定
デザインのクオリティを重視し、モバイルでもフォントを統一したいという場合は「２」のWebフォントの使用しかありません。
具体的にはGoogleフォント「Noto Sans」、明朝体は「Noto Serif」などの利用になります。「Noto」はプロポーショナルフォントなのでカーニングも可能です。
日本語Webフォントは、以前はファイルが重く利用に抵抗がありましたが、Googleフォントもサブセット化によるファイル分割で速度面も改善され使いやすくなりました。
さらに速度面を改善したい場合は、JavaScript「Web Font Loader」などを使い非同期で読み込むこともできます。PageSpeed Insightでもスコアが上がります。
またWebフォントの読み込みの遅延については２通りの対応があります。サイト仕様として検討が必要です。
- ページ読み込み時点で標準フォントを表示し、Webフォントが読み込まれ次第、書き変わる形（font-display:swap）。閲覧者が本当に必要なテキスト情報を待たせることがありません。
- 閲覧者を待たせるが完璧に見た目を制御したいという場合はWebフォントが読み込まれてから表示することも可能です。
自分が関わった訳でもないんですが、たまたまVOGUE JAPAN 公式サイトに目に止め、フォントの使い方がいいなと思ったことがきっかけでこの記事を書きました。雑誌の印象を崩さずとても綺麗にシンプルに表現していると思います。ただCSSを見るとさほど特別なことはなく、フォントの選び方とやはりカーニングが効いているようです。「line-break」（禁則処理）の指定も紙媒体らしいと思いました。
関連記事
NOTE: 標準フォントを指定する
BLOG: 日本語Webフォントの使い方とリスク
（内容が古くなってますが参考までに。NOTEの方は近いうちに書き直します）