CSS3のフォント組み合わせ（フォントスタック）の基本と使い方

CSS3におけるフォントの組み合わせとは

CSS3では、複数のフォントを組み合わせて指定する「フォントスタック（font stack）」という技術が採用されています。これは font-family プロパティに複数のフォント名をカンマ区切りで列挙する方法で、ブラウザが最初のフォントに対応していない場合、自動的に次のフォントへと順番に切り替えて表示してくれる便利な仕組みです。

フォールバックの仕組み

例えば、次のように指定した場合を考えてみましょう。

p {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

この場合、ブラウザはまず「Helvetica Neue」での表示を試みます。ユーザーの環境にこのフォントがインストールされていなければ、次の「Arial」、それも利用できなければ「ヒラギノ角ゴ ProN」というように、表示可能なフォントが見つかるまで順番に試行していきます。これにより、OSやブラウザの違いによる文字化けや表示崩れを効果的に防ぐことができます。

Sans-Serifフォントの組み合わせ例

セリフ（ひげ飾り）を持たないサンセリフ体（Sans-Serif）フォントを組み合わせた具体例は、下図のようになります。

最後には総称ファミリ名を指定しよう

フォントスタックの末尾には、sans-serif・serif・monospace などの総称ファミリ名（generic family）を必ず指定しておくのがベストプラクティスです。これにより、リスト内のどのフォントも利用できない環境でも、少なくとも同種のフォントで表示されることが保証されます。

日本語サイトでの推奨される組み合わせ

日本語のWebサイトでは、Windows向けに「游ゴシック」「メイリオ（Meiryo）」、macOS向けに「ヒラギノ（Hiragino）」などを組み合わせるのが一般的です。CSS3のフォント組み合わせ機能を活用すれば、あらゆる閲覧環境において読みやすく美しいタイポグラフィを実現できます。