UI fonts
OSやデバイスのUI向けに設計されたフォントファミリーを利用するための値です。system-uiがOSの標準フォントを使用するのに対し、ui-serif等はカテゴリ別のUIフォントを選択できます。特にui-roundedはiOS/macOSでSF Rounded等の角丸フォントが選択され、親しみやすいデザインに適しています。
概要
OSやデバイスのUI向けに設計されたフォントファミリーを利用するための値です。system-uiがOSの標準フォントを使用するのに対し、ui-serif等はカテゴリ別のUIフォントを選択できます。特にui-roundedはiOS/macOSでSF Rounded等の角丸フォントが選択され、親しみやすいデザインに適しています。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 13.1+
Firefox 未対応
モバイル
Chrome Android 未対応
Safari iOS 13.4+
Firefox Android 未対応
基本構文
CSS
.serif-ui { font-family: ui-serif, serif; }
.mono-ui { font-family: ui-monospace, monospace; }
.friendly { font-family: ui-rounded, system-ui; }実務での使いどころ
-
ネイティブアプリ風のUI表示
PWAのUIにui-roundedやui-sans-serifを使用し、OSの標準アプリと調和した自然な見た目を実現します。
注意点
- Safari以外のブラウザサポートが限定的なため、必ず総称ファミリー名をフォールバックに指定してください。
アクセシビリティ
- UIフォントはOSの設定を反映するため、ユーザーが設定した読みやすさの設定が適用されやすい利点があります。