Tweak font settings for windows environment; system-ui (Yu Gothic UI) to BIZ UD Gothic

[honey32]

fixes #639

Mac で閲覧するときには無難なフォント (少なくとも私の環境では Hiragino Kaku Gothic ProN) が選ばれますが、Windows (少なくとも windows 11 では)の場合には本文が Yu Gothic UI になっているのが気になります。

日本語話者が Windows 10 / 11 を使ってブラウジングする標準的な環境において、上記のような問題があるため、フォント設定を調整した。

欧文について

Optimistic Display / Text というのが恐らく、 Meta 社のコーポレートフォント？のようなもので、欧文をカバーしている様子。これは優先度が最も高いので、未翻訳の英文、本文中の英単語 の見え方は保つことができているはず。

Mac 環境について

-apple-system を使って、よしなにフォントを調整してくれているはずなので、 Mac 環境では、これ以降の BIZ UD ゴシック, メイリオの設定を無視して、変わらずフォントを設定してくれているはず。

和文フォントの選定

BIZ UD ゴシック (P ではない) を、その次の優先度で設定している。

標準設定 sans-serif ではない理由

• この場合、Windows でデフォルト設定のまま使用している環境では、カスカスの游ゴシックが表示され、読みづらいし貧相な見た目になる

メイリオの優先度を下げた理由

• 文字が大きすぎて読みづらい
  • 英字に合わせて font-size の設定値が大きめ (17px)
  • このフォント自体が、すこし大きめの作りになっている？
• Twitter, Zenn, Qiita で採用されているので見慣れているものの、やはりフォントが大きいと違和感がある
• 一部の環境で BIZ UD Gothic がインストールされていない可能性も考え、その次の優先度で設定した

BIZ フォントを選択した理由

• ICS も採用している https://ics.media/entry/200317/
• メイリオよりも締まりのある見た目なので、 17px であっても読みやすい
  • (私が設定してこのフォントをデフォルトにしているので、見慣れすぎて過大評価しているかも...)
  • (あまり有名じゃないので、見慣れない人もいる...？)

BIZ UDP Gothic ではなく BIZ UD Gothic を選んだ理由

• 欧文は Optimistic が最高優先度なので、欧文が不格好になる心配がない
• UDP のほうは、文の切れ目が分かりづらく、読むのに疲れる
  • 約物が半角サイズなので、句読点と次の文の頭のあいだのスペースが無いため。

その他

デフォルトの設定は、上記よりも低い優先度でそのままにした。マイナーな環境であっても、最低限適切なフォントが使えたほうが良いはずなので。

デグレがないか、ざっと自主確認

Windows では BIZ UDGothic に変わる、その他の環境では変わらない

• Windows 11, version 22H2, Google Chrome
• Mac, Ventura 13.4.1 (c), Google Chrome
• Mac, Safari
• iPad, Safari
• iPad, Google Chrome
• Android 12, Google Chrome

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	103.17 KB (🟡 +20 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[smikitky]

とりあえず比較用です

UDゴシック:

UDPゴシック：

メイリオ:

現状 (Yu Gothic UI):

[smikitky]

Windowsで確認した限りはOKそうです。メイリオとUDゴシックなら、個人的にはどちらでも…という印象でした（特にメイリオの方が「大きい」という感じはしませんでした）。よくわかっていませんが、Androidではこれまでと同じフォント（Noto Sans系？）が使われ続けるという認識でいいのでしょうか。

、「 のように役物が連続した時や行頭に 「 が来たときにできる奇妙なスペースが個人的に結構嫌いなので、その点に関してだけは「UDPゴシック悪くないじゃん」という気もしています。UDゴシックとUDPゴシックの中間が欲しい…

[smikitky]

手持ちの環境で問題なさそうでしたのでこれで大丈夫そうです！
ありがとうございます。

[honey32]

スクショの掲載いただいて恐縮です。🙇‍♀

Android について補足しますが、私の環境で見た限りでは変更前とも他のサイトとも同じフォントで、おそらく Noto でした。（搭載フォントはベンダー依存だった歴史がある (?) ので、あまり予断はできませんが...）

UDゴシックとUDPゴシックの中間が欲しい…

そうですよね... font-feature-setting では、そこまでコントロールしてくれる設定も無いので、半角スペースを使うしかなくてもどかしいです。

[koba04]

👍 ありがとうございます！