2012-12-28

【CSS】font-familyを指定するな。ユーザー選択に任せよ。

参照:[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ!


上記記事にも直接コメントしましたが、これ以上他人様のブログで自説を展開するのもよろしくありませんので、ここに書きます。


まず前提として、ぼくは
「日本語文章に欧文フォントを指定すべきではない」
と考えています。

理由は上記記事のコメントにも書きましたが、
高さ・ウェイト・字幅・ベースライン等が揃わず
非常に不格好になる。

ためです。



具体例を出しましょう。

「Windows7 + IE9」
「デフォルトフォントにMS Pゴシック指定 + ClearType有効」
環境において、どのように表示が不格好になるのか確認します。

font-family: Arial, sans-serif;

とした際のサンプルが以下になります。




これを見て、どうでしょう?
気にならない方もいらっしゃるのでしょうが、
僕に言わせれば「めちゃめちゃ」です。

たとえば3行目を見てみます。

半角括弧がArialで描画され、続く「英」はMS Pゴシックです。
文字の高さが非常に不揃いになっていますね。




その箇所をドラッグで選択してみたのが上図になります。
フォントの境目で高さが変わっているのがよりはっきりしました。

では、このまま表示を拡大していきます。




おやおや太さがおかしくなってきました。
(実は1枚目の画像も同じ状態です)

これが最初に書いた「ウェイトが揃わない」という現象です。
欧文フォントのほうがClearTypeが効き始めるポイントが小さいため、
このようなことが発生します。
英字だけが妙に強調されて見え、かなりの不統一感があります。





さらに拡大したところで、ようやく太さの違いが見えなくなりました。
文字サイズが大きくなったことで、
MS PゴシックにもClearTypeが適用されるようになったのです。

しかし最初の、
高さが揃わない問題については未解決のままです。



Arial+メイリオならどうか

最近ではこちらの環境の方が優勢でしょうか。
ブラウザのデフォルトフォントでメイリオを指定した場合の想定です。

CSSは、

font-family: Arial, Meiryo, sans-serif;

となります。





一見してわかるとおり、ウェイト(太さ)が揃っていません。

また、メイリオの「懐が広い」字形に対し、
Arialは狭く、余裕が無いように見えます。

つまり、どうしてもデザイン的にちぐはぐな印象
を与えてしまいます。


先ほどと同様にテキスト選択してみますと、






先ほどよりは目立ちませんが、やはり高さの不揃いもそのままです。



Sans-serifのみを指定すればどうか

CSSを以下のように指定することで、

font-family: sans-serif;

IE9はユーザーが設定で指定したフォント
(この場合はMS Pゴシック)を使って描画を行います。

なお、「なぜ font-family: 'MS Pゴシック' としないのか」ですが
「フォントを指定できるのはユーザーのみ、の状態が本質だから」です。

ではサンプル画面です。






いかがでしょう。
フォントの混在が無くなったため、統一された字幅・高さ・太さとなりました。

この場合はフォント設定がMS Pゴシックとなっているせいで
いまいちな表示結果となっていますが、
メイリオやヒラギノに設定を変更すれば、当然きれいに表示されます。


さらに、以下のように拡大していっても
ウェイトの不揃いが出ません。






高さも当然揃っています。






さらに拡大して、全体にClearTypeが適用されるサイズになりました。
きちんと揃っています。






いかがでしょう。
日本語文章に欧文フォントを指定してしまった場合の弊害について、
ご理解いただけたでしょうか。

MacOSではフォントの描画がずっと素敵なので、
Windowsほどの違いは見出せないかもしれません。

しかしそれは、目立たないだけで、
大なり小なり発生している問題
です。


企業サイトなどでも、欧文にのみClearTypeが効いてしまって
和文とウェイトが倍ほども違っていることは多いです。

英字だけを恒常的に強調したいのであれば別ですが……
正直、見る気をなくさせられます。

「自分の環境できれいに表示されたからそれでいい」では、
ただのデザイナーの自己満足ですよね。



ユーザースタイルシートについて

このようなことをなんとなくコメントしたところ、
「ユーザースタイルシート使えばいいじゃんか」
とのお答えをいただきました。

ユーザースタイルシート、あるいは、
「Webページの指定フォントを無効にする」のようなオプションは、
確かに存在はします。

ですが、使ってみた経験のある方ならば
これらは「できる限り使用を避けたい代物」
という感覚に同意いただけると思います。

もともとユーザー補助オプションなのです。
見た目を多少犠牲にしてもいい、という場合の非常手段です。

その結果、たとえば2ch系サイトなどで、AAが盛大にズレます。
ちょっと凝ったことをしているサイトでも、もれなくデザインが壊れます。
使っていたころもありましたが、結局挫折しました。



さいごに

そもそも、FontFamilyに特定のフォント名をハードコードする
というのは、立派な環境依存の実装例です。
つまり、特定の機種やOSでの表示のみが想定された記述方法です。

サイト側が環境依存をわざわざ実装しておきながら
ユーザー側でスタイルシートの上書きを薦めるというのは
Webの思想からはかけ離れていると言わざるをえません。



【aタグtarget=”_blank”は使うべきではない】

なぜ?
→ リンクを新しいタブで開くかどうかはユーザーが決めるべきだから。

ずっと昔から、Webとはこういうものだったはずです。



「ぼくのかんがえたさいきょうのfont-familyしてい」だからこれでいいんだ!
という主張に対しては、もし

「ぼくのかんがえたさいきょうのセキュアログインフォーム(ただし実際は環境依存でセキュリティリスクあり)」
だったら? その方法が拡散してしまったときの責任は?

とだけ書いておきます。