なぜあのサイトもこのサイトも-apple-systemを使うのでしょうか？

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

Safariで見ると和文は欧文より1ピクセル小さく、ウェイトがやや軽く掠れたように見え、和文・欧文のバランスが悪いです。TwitterもBlueskyも採用をしてるし、個人サイトはどこかの有名サイトを真似て取り敢えず流行りってるしコピペでフォントを指定してる感じでしょうか。

海外のサイトだと、和文の事なんて全く考えないので-apple-systemを指定するのは理解出来るけど、日本語サイトで-apple-systemをなぜ指定してるのかよく分からないです。と言うか、よく分からずに指定してるんじゃ？と思ってしまいます。欧文よりも和文が小さくなる事を理解して指定してるとは思えません。

わたしのフォント指定が正しいんだ。

とは全く思わないですが、フォント指定は欧文だけ指定して和文フォントは指定するべきで無いとわたしは思います。欧文だけを指定すればmacOSの場合は、通常サイズのヒラギノが自動でセットされます。なぜ-apple-systemを指定してわざわざ欧文より1ピクセル小さなフォントサイズにしたいのか理解出来ません。

-apple-systemなんて使うのならmacOS, iOS向けにはヒラギノ角ゴシックだけを指定してる方が100倍良いと思うし、なんなら総称フォントファミリー名のsans-serifだけを書いておいた方が遥かに良い結果になると思います。

よく考えた上の-apple-systemなら良いと思うけど、よく分かってないなら-apple-systemは使うべきでは無いとわたしは思います。もっとも…未だにOsakaを指定してるよりは遥かに良いとは思いますが…

Windowsでウェブサイトを作ってる人だとmacOSで表示の確認が出来ないのでどこかのコピペで済ましてる人も多いと思うけど、この記事をみたら早々に-apple-system, BlinkMacSystemFontの指定は削除して欲しいです。何も指定しなくてもsans-serifだけあればmacOSでは何の問題も無く綺麗なフォントで表示されます。

ちなみにこのTumblrでは、

font-family: "Lucida Grande", Verdana, sans-serif;

このようにフォントを指定しています。

macOS向けにLucida Grandeを、iOSとWindows向けにVerdanaを指定しています。
本当はOTFフォントを指定したい所ですが、ヒラギノに合った欧文フォントがTTFだとLucida GrandeとVerdanaがベストだと思いわたしは長年気に入って使っています。

と。ここまで書いて何ですが…このTumblrでも-apple-systemを採用しようかと何度か検討してきました。和文・欧文のサイズ違い・ウェイトがやや軽く掠れたように見えるなどの問題を解決出来ないか検討したけど採用は今のところ見送っています。今後問題の解決があればいいのですが。

この記事は過去にTumblrで扱って(2023-05-28)、移転後に一部を編集して再掲載しました。

関連記事