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しか対応していない。
ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family (caniuse.com)
system-uiだけは Chromeでも既にサポートされている *1。
system-ui value for font-family (caniuse.com)
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とか関係なく、フォント好きな人は見ると絶対楽しめると思う。日本語字幕も用意されている。