[2025-05-01 Latest]
(当ページは、「Noto Sans JPフォントで書かれたテキスト」を悪目立ちしないように表示させる事に一応成功したので、大幅に内容修正しました)
ユーザー「ブラウザーのフォントを勝手に変えられた」┆"デフォルトフォント"の罠┆
4月のWindowsUpdate後、Firefoxを除く各ブラウザーのデフォルトフォントが軒並みNoto Sans JPに置き換わってしまって、Windowsユーザーの間で大騒ぎになっています。
私は普段Firefoxメインなのでブラウジングには支障ないのですが、問題は運営中のWebサイト
私のサイトに来るのは当然Chromeからが多数でEdgeもそれなりにいて、「(ユーザーから見たら)"勝手にフォント改悪"」の被害に遭っている最中なので、とりあえず、「メイリオをベースフォントに指定」の応急処置に踏み切りました。
(本来は、運営中のサイトは原則「フォントファミリー sans-serifのみ指定」ですが、特殊文字を(メイリオ閲覧を前提に)テキスト・記号・画像装飾などに設定しているので、その修正が完了しないと、最悪レイアウト崩壊になるサイトもあるので)
今回は、大多数のChrome及びEdgeユーザーはメイリオに戻す見込みらしいですが、何時またWindowsUpdateでデフォルトフォントを変えられるか分かりません。
それを考えると、ユーザーの選択の自由を奪う事になってしまいますが、「メイリオをベースフォントに優先指定」を一部サイトで継続すべきか迷っています。
(他にも、設定変更完了なのにデフォルトフォントがメイリオに戻らない人(実は、私もそうです・・・拡張入れてやっと戻りました)、会社のPCなどでフォント変更許可されていない人なども相当数いるでしょうし)
(以後 いろいろ情報が錯綜して正確な判断ができないでいたのですが、やっとフォントの最終的評価と対策が一応できたので、当ページの大幅修正更新します)
Noto Sans JP の長所短所 こう指定すれば、Windowsユーザーも、このフォントを受け入れられるようになる かも？
で、その問題の「Noto Sans JP」ですが・・・
一言で言うと、サイトを見るユーザーの環境によっては「貴方がメガネコンタクトに合わせなさい」みたいな事になりかねないフォント
- 「読みやすい？」と言われれば、読みやすい(という回答になる)
- 通常モード(ライトモード)だと、"400"は太過ぎで字の色が濃いと迫ってくる感じ "350"も少し太過ぎ＊ "300"は少し細過ぎて字が薄く見える で、ちょうどいい太さがない
- ダークモードだと、(少なくともWindowsでは)「font-weight 300」がベスト("350"も許容範囲内)
- 字の形は悪くはないけど、「font-weight 400」(こんなに太いのに"レギュラー"って・・・)だと台無し
- Windowsや低解像度のディスプレイだと"400"で字が滲む(見え難いという事はないですが・・・)
- 通常モード(ライトモード)だと、どう頑張っても、スタイリッシュだったり繊細だったりするレイアウトには合わない
- 「font-weight 400以上」だと、ディスレクシア(字の読み書きが困難)を抱えている方には、長文だと見づらいかも？と推測
＊「Noto Sans JPにはDemiLight(＝font weight 350)は含まれていません」と言われていましたが、念のため確認してみたところ、今回の月例WindowsUpdateでインストールされたシステムフォントには運良くWindows11・Windows10共に含まれていました。
"350"なら、メイリオ他で閲覧時に支障ない程度にフォントカラーを薄めに設定し直せばそれなりには見られるので、Windowsでも"使えます"。
以上を勘案した結果、私が出した結論(当然、アクセシビリティも考慮に入れてます)：
2025年春の現在、CSSはこう書くべし(注：企業や行政のサイトだとまずいかもしれませんが)
↓
通常モード・ダークモード共通：
(フォントの種類を特に指定しない場合)
body{
font-family: sans-serif;
}
通常モード(パターン1)：
body{
font-weight: 350;
color: #444444; (多少前後しても可)
}
通常モード(パターン2)：
body{
font-weight: 300;
color: #1e1e1e; (多少薄くするのは可)
}
今現在、Windowsは"メイリオユーザー"が圧倒的かどうかはともかく今も過半数なのは確実なので、
当座は「通常モードパターン1」の方がベターでしょう。
(将来 "Noto Sansユーザー"の割合が増えても「パターン1」を継続する時は、フォントカラーを更にもう少し薄くするのを検討した方がいいかも？)
ダークモード：
body{
font-weight: 300; (350でも許容)
color: (常識的な数値でOK)
}
これで、Windowsユーザーの大部分は今まで通り"メイリオ；font-weight 400" で表示、設定を元に戻さなかったか戻せなかったWindowsユーザーは "Noto Sans JP；font-weight 350"または"300"で表示されます。
(Macやスマホユーザーも(デバイスに入っている他フォントの)font-weight 300で表示になる可能性がありますが、Macのフォントは元々Windowsユーザーから見ると「太過ぎ！」みたいですし、スマホユーザーは昨今は Noto Sans JP がデフォルトが多い(逆に、常に"400"以上で表示されてしまう可能性大？？)という情報見たので、大丈夫ではないかと思われます。
Linux？昨今はNotoフォントも多いとか・・・ちゃんとDemiLight 350も入っているといいけど)
この設定がスタンダードになれば、世のWebサイトは軒並み「読みやすさとレイアウトを両立可能」になるはずですが・・・
広く採用される日は多分来ないだろうな・・・
(因みに、Googleで検索したところ、AI Overviewが、
CSSのfont-weightで300がない場合、一般的にブラウザは400（Normal）に設定します。
と答えてくれたので、<body>に"font-weight 300"と指定しても、もしユーザーのデバイスに"300"のフォントがなかった場合でも"200以下の細さのフォント"が表示される心配はなさそうです)
また、こちらの"CSS解説定番サイト"によると(引用)、
アクセシビリティ
弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。
だそうなので、font-weightが300以上であれば(通常モード時の Noto Sans JP Lightは例外)、コントラスト比が低めでも遵守されている限りは見え方に問題なさそうです)
なお、私は「メイリオ推し」という程ではなく、
Noto Sans JPを万人、特にWindowsユーザーに「見られるフォント」にするには、CSS設定に細心の注意を払う必要があり、そして何より、極めて多数のユーザーが、程度の差はあれ メイリオを推していると判明したため、あくまでも消去法で選択しています。
(本当は、自分のサイトにはWindowsユーザー向けに「Yu Gothic "font-weight 500"」がベターだけど、現実は・・・)
(今回の「ブラウザーのデフォルトフォントが勝手に変わってしまった」騒動で、
フォントにとって読みやすさと同等に最も大事なのは、太さ細さに過不足がなく、(ディスプレイの解像度やライトモードダークモードの別に関係なく)滲まず、見る人の目障り(「体の目」には優しくても「心の目」に優しくない)にならない事
だというのを改めて実感)
(ディスレクシア(字の読み書きが困難)を抱える方は、アプリなどで閲覧中サイトのフォントを変えている事があるそうですが、「CSSでメイリオ強制」にすると無効になってしまうかも？
など、他にもアクセシビリティに関わる重大な問題もあるので、
WindowsUpdateの際にブラウザーのデフォルトフォントまで弄るのは止めて下さい＞ Microsoftさん)