遠近法ノート

本好きのデザイナー、西岡裕二の日記帳なのです。デザインと読書について書くはず。

CSSのfont-family指定はこれで決まり!(2013春)

追記:最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした(汗)*1


とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり(一番下の追記も参照で)。

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

CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。

指定順序、入れたフォント、入れてないフォント、すべてに意味があります。

以下説明。

ヒラギノはProではなくProN。

OS X和文標準フォントがヒラギノProからProNに変更されてもう数年がたちます。Proはいちおう後方互換のために残されているようですが、iOSにはProNしか入っていません*2

Osakaは不要。

MacのフォントがOsakaだったのは、もう10年以上前の話です。大手サイトで未だにOsakaを指定しているところもありますが、表示が汚いOsakaは入れないようにしましょう。

Lucida Grandeを先に指定。ヒラギノの従属英数字を使わない。

OS Xの表示フォントであるLucida Grande+ヒラギノ角ゴの合成フォントにします。ヒラギノの従属英数字はあまりスクリーン向けじゃないです。この指定の欠点は、(Macで)三点リーダが欧文扱いになって下がってしまうところ。これを回避したい場合、Lucida Grandeは削ります。

Windowsメイリオで。

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

Helvetica、Arialは指定しない。

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

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

とするのがいいでしょう*3

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;

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

*1:だってまた2013冬が巡ってきちゃいますもんね。

*2:CSSでProを指定しているサイトでは、漢字字形の食い違いが発生しています。

*3:最初にHelveticaを入れるとIEの表示が不正になる、とかいう話もありますが、超レアケースなので考慮しません。