CSSに設定するfont-family

基本的なことかもしれませんが、Webサイトを作る上でフォント設定を皆さんどうしていますか？

「Windows OS」や「Mac OS」そして各ブラウザの解釈によっても異なる基本設定や、有無をも言わず明朝体にしている、とか色々なんだと思いますが、結局のところどんな指定がいいんだろうと思ったので記録します。

 

Default font-family

 

CSSの記述の仕方と指定方法

使用するプロパティは「font-family」もしくは「font」プロパティになります。
“MS Pゴシック”や”ヒラギノ角ゴ Pro W3″などのフォント自体にスペースが含まれているフォント名は、「”」で囲い指定します。また、フォント名とフォント名の間は「,」で区切ります。

 

基本OS標準フォント

PCにプリインストールされているフォントは以下のようなものがあります。

• Windows-XP(MS Pゴシック)
• Windows-Vista(メイリオ)
• Windows7(メイリオ)
• Windows8(メイリオ)
• MacOS-X(ヒラギノ系フォント)

ある程度PCに詳しい人やデザイナーとかでない限り、追加でフォントをインストールしている方はそう多くないと思われますので、基本的にはこれらのフォントを基準に考えていく必要があります。

 

ブラウザごとの解釈の違い

ブラウザのバージョンごとに、フォント名の指定方法が異なります。

Firefoxは“Hiragino Kaku Gothic Pro”など日本語フォントのアルファベット表記は適用されないので、“ヒラギノ角ゴ Pro W3”,メイリオ,と日本語で明記する必要があります。
Safariは、その逆で英語表記が基本で日本語表記は無効になるので実際の指定は、このようになります。

 

少数派ユーザーへの対策

Macをインストールしている人は、綺麗なヒラギノフォントが標準でインストールされているけれど、Microsoft-Office for Macをインストールすると、メイリオフォントが勝手にインストールされてしまうので、ヒラギノを先に指定しないとMacユーザに嫌な顔をされます。

 

英字も綺麗に

日本語フォントでもアルファベットはある程度綺麗に表示できるけれど、英字は英字フォントで表示させたい人は、先に英字フォントを読み込むと良いでしょう。

 

個人的に、今までずっとこのfont-family指定でやってきました。

 

デモサンプル

サイトコンセプトやデザイン、ターゲットユーザによってフォントファミリーやサイズ、色味なども違ってくると思います。そういったトータル的な観点から、font-familyも使い分けていくことが大切ですね。