NPO法人音楽の恵みネットワーク ICT構築の備忘録

Information and Communication Technology

font-family で困ったら

HP作成でfont-family に困ったら次のサイト様が役に立ちました。

http://d.hatena.ne.jp/n-yuji/20130225/p1

【概略】

Windowsメイリオで。
素直にメイリオを使用します。英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします(追記:Windowsには通常Lucida Grandeは入ってませんので、これの影響は考慮しません。「WindowsSafariのLucida Grande。」参照)。

Helvetica、Arialは指定しない。
Helvetica、Arialは、あまりスクリーン向けじゃないと思います。特に数字の「1」の形とか。全体的に字間が狭いし。それでもHelvetica系が好きなんだよ!って人は、

font-family:Helvetica, Arial,
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;

とするのがいいでしょう*2。

MS Pゴシックはたぶん入れなくていい。
別に指定しなくても必要なときには出てきちゃうので……(あんまり自信ない)。入れる場合はもちろんメイリオのあとにします。

大手サイトは参考にしない。
Yahoo!とかAmazonとかAppleとか、古くからある大手サイトのfont-family指定は、お手本になりません。
担当になったつもりで考えれば想像がつくと思いますが、大元のCSSを変えたらいろんなところに影響が出るかもしれないわけで、そんなリスクを取りたくはないですよね?
あの手のサイトは、ずっと大昔の指定をそのまま残しているだけです。今からまねをしてはいけません。

以上。PC向け、日本語サイト向けの設定ですので、用途が違うとまた別の解が出てくるとは思いますけど。

 

追記:もっと省略できるのでは?
Lucida Grandeを指定してあればヒラギノ角ゴは自動で出るから省略できるんじゃね?
という意見をいただきました。確かにごもっともです。
また、和文フォントの日本語名はもう不要だという説もあります(かつては一部のブラウザで必要でした)。
……ということは、うんと省略して、

 

font-family:'Lucida Grande', Meiryo, sans-serif;


これで良さそうです!
最小設定としてはこちらのほうがおすすめ。

 

2/27さらに追記:やっぱりヒラギノ角ゴは必要っぽい。
きれいにまとまったと思ったのですが……。上の設定だと、Macメイリオが入っている場合(つまりMS Officeをインストールしてる場合ですね)、Lucida Grandeの代替えとしてのヒラギノ角ゴが効かず、その次の指定であるメイリオが出てしまう、との情報をいただきました。これは考慮せざるを得ませんね。

 

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
Meiryo, sans-serif;

となりました。これでよろしくお願いします。

 

cssはこちら
body {
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
Meiryo, sans-serif;
}