font-family

答えの無い戦い(font-family)

2013年8月5日


この世には2種類の人間しかいない。

WindowsユーザーかMacユーザーかだ。

あ、PC持ってない人もいるか。。しまったLinuxユーザーに怒られる。。etc

まあいい、もっと言うならブラウザのフォントを指定している人としていない人が…

とはいえ、PC使ってる人の8~9割がそんなもん指定するはずがないのだから、議論の余地は無い。

結果的に見やすいフォントが正義なのだ。

というわけで、ウェブデザインをしていて必ずぶち当たるフォントの設定(font-family)について、メモを残す。

 

では何がベストかという話になるのだけれど、(2013現在)

先に結論から書くと、

ゴシック

font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,’MS PGothic’,sans-serif;

明朝

font-family:’ヒラギノ明朝 Pro W3′,’Hiragino Mincho Pro’, ‘HGS明朝E’,’MS P明朝’, serif;

と、僕はしている。

が、異論は多々あると思います。

とりあえず一般的だと思っているので、その理由は以下。

 

ゴシック系では、よくいう「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」。

これに「sans-serif」を付ければ完結。というのが一般的。

調べてみると、ゴシックに関してはもう数年前からそんなに変わっていないというか、ヒラギノ派かメイリオ派かってところで順序が変わるくらいでずっと定着している感がある。どっちにしろヒラギノはWindowsにはデフォで入っていないのと、Macにwindowsがインストールされていた場合にメイリオが一緒に入ってしまうので、ヒラギノ派の方はヒラギノを先に記述します。

font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,’MS PGothic’,sans-serif;

 

 

しかし、時にお客様から「明朝体」表記のご注文が入ってしまうのはこれ避けようがない。

こう言っては何だが、ブラウザの明朝体はサイズを大きくしないと、どうしても汚く見えてしまう。(ゴシックもだけど)

特にWindowsお前だ。

Macにはヒラギノ系フォントが最初からインストールされているので、文字に関しての悩みはほぼ皆無と思っている。

しかしWindowsは違う。明朝体はOSのみの場合、標準フォントがMS系という雑○フォントしかない。

ギリギリOfficeさえインストールしてあれば、HG系など選択の幅は広がるのだがこれもだいぶ頼りない。

こういうところがWindowsがデザイナーに選ばれない理由だと思うのだが、それはまた別の話。

 

だから本音を言えばウェブサイトの文字は全てゴシック体で乗り越えたい。

しかしそうもいかない時どうするか。

1.そもそも発注の時点でなんとか諦めてもらう

2.別ソフトで編集した文章を画像にする

3.フォントサイズを大きく設定

4.やるだけやって見せて最善を尽くしたと言って逃げ切る

1が無難な気がするが、空気読まないとえらい目に遭うかも。2はSEO上厳しい、3はサイトのデザインに影響するところなので、なかなか難しいところなのですが、デザイン上許させるならこれしかない気がする。4は最後の手段だ。

 

ブラウザのフォントには文字を綺麗に見せるためのアンチエイリアスというのがかかる。

これはゴシックも明朝も変わらないが、文字の種類によって適用される決まりが異なっていて、

例えばWindows標準のMS P明朝の場合(以下画像はブラウザのキャプチャ)

MS P明朝

23pxからアンチエイリアスがかかって読みやすくなっているのが分かります。

対してヒラギノ明朝の場合

ヒラギノ明朝

非常に美しく読みやすいことが分かる。

しかし前述したようにこのヒラギノフォントというのはMacでは標準でインストールされているものの、Windowsには入っていないのです。

そこでCSS的には途中に挙げていた、Officeをインストールしてある場合に使えるようになるHG系フォントを利用します。

HGS明朝E

HGS明朝E

これならOfficeさえインストールされているPCなら表示されるし、ヒラギノと同様に小さくても読みやすい文字が表示されています。

もっと厳密に言うと、HGPとHGSでもだいぶ差があります。

HGP〜  半角・全角ともプロポーショナル

HGS〜  半角のみプロポーショナル

(調べてみるとHG系フォントのアンチエイリアス適用が13px以上からという記述を見かけて試してみたのですが、あまり変わらなくみえます。OSなのか、ブラウザなのか、何かのバージョンなのか。どこかで変わったのかも知れませんが面倒なので調べませんでした。)

 

そんなわけで、明朝系のCSS設定は、

font-family:’ヒラギノ明朝 Pro W3′,’Hiragino Mincho Pro’, ‘HGS明朝E’,’MS P明朝’, serif;

 

 

こんなもん、もっと日本語の無料ウェブフォントが充実すりゃ解決なのだけど、ちょっとまだ早いかな。。

 

おまけ、、現在2013年時点での各ブラウザのデフォルトフォントサイズは、ほぼ16px前後みたいです。

正確な数値は調べてみてください。

Leave a Comment

CAPTCHA