クリエイティブ事業部の與世山（よせやま）です。
前回、Google アナリティクスのログを分かりやすくグラフ化してくれる便利なツール「データポータル」紹介しました。今回その続きを記事にしようとがんばったのですが、挫折してしまいました。。。。すいません。「データポータル」の良さをうまく説明するには、まだまだ経験が浅かったなと痛感しています。もう少し経験と情報がたまったら【その2】を記事にしようと思います。
気を取り直して今回は「今更ながら【font-family】の話」をします。日頃、楽天カスタマイズなどのPC環境用のサイトを作る業務を重ねて、ふと！ブラウザが表示する「font-family」の現状をまとめてみました。
環境依存のFONT設定
今ではWeb フォント使い、どの環境でも同じ書体を表示することができます。しかし、Web フォントは通信環境に依存したものですから盤石なものではありません。ここで改めて【font-family】は何を指定していたらいいのか？どの環境にどのFONTを指定したら問題はないのか、情報を集ました。
CSSで設定するfont-familyプロパティは、値に記述した書体をの順番から優先的に表示していきます。とはいえ、ブラウザを閲覧する環境を優先するため、絶対に指定したFONTを表示させることはできません。（それならWeb フォントをつかってくださいね！）なのでサイト制作者側のささやかな願望のFONT指定でしかないのです。それでも大概の閲覧環境ではsans-serif書体（日本語ではゴシック体）とserif書体（日本語では明朝体）のFONTは用意されているのでテキスト部分の書体をコントロールすることは可能なのです。それぞれの環境の書体を見てみましょう。
●WindowsのFONT環境
・ＭＳ Ｐゴシック（MS PGothic）※Windows95
・ＭＳ Ｐ明朝（MS PMincho）※Windows95
・メイリオ（Meiryo）※Windoes Vista以降
・Meiryo UI（Meiryo UI）※Windows7
●MacのFONT環境
・Osaka Osaka ※MacOS X
・Osaka－等幅（Osaka-Mono）※MacOS X
・ヒラギノ角ゴ Pro W3（Hiragino Kaku Gothic Pro）※MacOS X
・ヒラギノ明朝 Pro W3（Hiragino Mincho Pro）※MacOS X
・ヒラギノ角ゴ（ProN W3 Hiragino Kaku Gothic ProN）※MacOS X(10.5)
・ヒラギノ丸ゴ（ProN W4 Hiragino Maru Gothic ProN）※MacOS X(10.5)
・ヒラギノ明朝（ProN W3 Hiragino Mincho ProN）※MacOS X(10.5)
●UNIX系のFONT環境
・sans-serif
・serif
実際は、もっと多くの書体がパソコンのシステムにありますが、指定を厳格にしたとしても閲覧者の環境に指定したFONTがないと代替えフォントが適用されます。しかしながら制作側は、どんな環境でも違いが少ないのが望ましいので試行錯誤をしています。
今どきのFONT設定とは？！
ではどのような指定方法がいいのか下記にまとめました。
スタンダードなゴシック体指定
font-family: ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;
今どきのゴシック体指定
font-family: “Hiragino Sans W3”, “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
明朝体
font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN W3”, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif;
まとめとして最後に、font-familyの今後の動向は、Webフォントの指定が主流になっていくことでしょう。それでも古いサイト、古い閲覧環境が残ることも考えられます。（公共施設や自治体などのリニューアルがされないサイトなど）どんな状況でも、読みやすい分かりやすいタイポグラフィーをととのえるのはデザイナーの務めだと思います。
参考にしたサイト
・もう迷わない、「@font-familyはこれでOK！」を色々考えてみた
・【2021年版】font-familyの正しい指定方法とおすすめフォント設定まとめ
