WWDC20 の "The details of UI typography" という動画をなんとなく見ていたところ偶然気がついた。
Transcript 的にはこの辺:
Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-serif and ui-monospace to Apple platforms.
そもそも: San Francisco 以降 Apple のシステムフォント群はじわじわ増殖している
San Francisco フォントが Apple 製品のシステムフォントになってから、そのファミリーがしれっと拡大していることにお気づきだろうか。
- リマインダーアプリとかで使われている Rounded (丸っこいやつ)
- Xcode とか Terminal とかのデフォルトフォントとして登場した SF Mono
- Books アプリなんかで使われているセリフ体のフォント、New York
- HIG によると "provide a traditional reading experience" したりしたいときに使ってね、という話
- https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#new-york
で、これらのフォントは iOS や macOS なんかのアプリを作るときには使えるようになっていたわけだけど、ウェブページから使う術はなかった。なぜなら San Francisco フォントを font-family: -apple-system; で呼び出していたのに相当する設定がそもそも用意されていなかった (多分) んだけど、それが今回めでたく爆誕したぜ、という話。
Safari 13.1 のリリースノートにも書かれていたっぽいんだけど完全に見逃していた。
実際にやってみた
こうじゃ！
Safari Version 14.1 (16611.1.21.161.3) (macOS Big Sur 11.3 (20E232) 上) ではこういう感じになる:
同じ Mac 上の Google Chrome Version 90.0.4430.93 だとこう:
今はまだ Safari だけ
つまるところ、今はまだ Safari しか対応していない。
system-ui だけは Chrome でも既にサポートされている *1。
caniuse.com でトラッキングできるということは標準化しようという動きがあるということで、すでに CSS の Editor's Draft には入っている。
議論はこのへんでされていそう:
上でも書いたように、Chrome では結構前から system-ui だけサポートされていて、それ以外は未サポートのようだった。チケットだけ立っている。
"system-ui" generic font family - Chrome Platform Status
1029069 - chromium - An open-source project to help move the web forward. - Monorail
Firefox の Bugzilla にもチケットが立ってはいた:
余談
WWDC20 の The details of UI typography という動画の話に戻ると、これまでは表示サイズによって SF Text と SF Display という違うファミリーを出し分けていたのを SF Pro という variable font に統一しました、みたいな話をしていて、これはこれでめちゃくちゃすごいことが起こっているな……という気持ちになる。ウェブとか Apple とか関係なく、フォント好きな人は見ると絶対楽しめると思う。日本語字幕も用意されている。
