【CSS】font-familyは今どきどうするべきかの記事

ICSさんのfont-familyに関する記事を読んだ

font-familyは昔考えたまま更新してなかったので、こちらの記事で2024年に相応しいfont-familyを学んだ

ics.media

記事の結論を拝借すると、以下の組み合わせがオススメとのこと

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

以下２つの理由が気になったのでメモ

• Hiragino Sansをフォールバックにしている理由
• Helvetica NeueとArialを指定している理由

Hiragino Sansをフォールバックにしている理由

• ヒラギノ角ゴ Proとヒラギノ角ゴ ProNはmacOS Catalina（2019年）以降はバンドルされていない
• CSSでHiragino Kaku Gothic ProNを指定しても、macOS Firefoxではフォントがあたらない
• そのため、Hiragino Sansのフォールバックが必要

となるとなぜ、Hiragino Kaku Gothic ProN が必要になるかというと

• macOSとiOSに搭載されているHiragino Sansのウェイトの種類が異なる
• 扱いが容易なHiragino Kaku Gothic ProNを優先にする

とのことだった

Helvetica NeueとArialを指定している理由

• Helvetica Neue は macOS/iOS/iPadOSのための欧文フォント
• Arial はWindowsのための欧文フォント
• Helvetica NeueとArialは生い立ちから字形が似ているため、Arialを使っておけばApple系OSとWindowsでの表示差異をおさえることができる

知らなかったこと

• sans-serifはブラウザにフォント指定を委ねる総称フォント
• フォントの英語名と日本語名の両方を指定する必要はなく、英語名だけで良い