Web開発
独断と偏見で選ぶ日本人に最適なフォントファミリー（font-family）指定
著者: AIイノベーションズ 阿部隼也（X / Twitter）結論
html, body, button, input, optgroup, select, textarea {
font-family:
/* OS ネイティブの UI フォント */
-apple-system,
BlinkMacSystemFont,
/* Windows / Android の欧文 UI フォント */
"Segoe UI",
"Roboto",
/* 既存の欧文フォントフォールバック */
"Helvetica Neue",
Arial,
/* macOS の日本語ゴシック */
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
/* Windows の日本語ゴシック */
"Noto Sans JP",
Meiryo,
/* 最終フォールバック */
sans-serif;
}解説
- セリフ体（明朝体）は見づらすぎるので排除しました。
- Macでは基本的にAppleフォントを優先しています。
- Windowsでは最近(2025年4月の更新)搭載されたNoto Sans JPを優先し、それが無い場合にはMeiryo(=メイリオ)を優先しています。
- それでもフォントが無い場合にはsans-serifを使うように指定しています。
ポイント
- これらのフォント指定で最も重要視すべきはWindowsでのフォント指定ですが、これが最近の更新によりNoto Sans JPを指定できるという神アプデがおこなわれたので、これに対応しています。
- その他iPhone, iPad, MacではAppleの既定フォントを指定しています。AppleのHiragino系はNoto Sans JPと同様に非常に見やすくて良いフォントです。
- あとはCSS内のコメントをご覧ください。
PR