AIイノベーションズ
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

On this page